Bollate

HTML

[ANSWERED] javascript – How to make the button clickable in the carousel banner?

By

Nov 19, 2022 , ,

Solution 1 :

your button at <figcaption> its blocked by

<a class="carousel-control-prev" href="#mainBanner" role="button" data-slide="prev">
<span class="prev">&laquo;</span>
</a>
<a class="carousel-control-next" href="#mainBanner" role="button" data-slide="next">
<span class="next">&raquo;</span>
</a>

setting the <figcaption> position and give z-index at style like this

css

figcaption
{
    position: relative;
    z-index: 2;
}

full code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
    <style type="text/css">
        figcaption{
            position: relative;
            z-index: 2;
        }
    </style>
    <h1><strong>Upcoming Productions</strong></h1>
    
    <div id="banner" style="width: 100%" class="bg-secondary">
        <div id="mainBanner" class="carousel slide" data-ride="carousel" data-interval="7000">
            
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
            </ol>
            
            <div class="carousel-inner">
                
    <!-- Slideshow feature 1 - Production Banner 1
        photo banner's dimensions should follow 1100px x 400px -->

        <div class="carousel-item active" style="height: 400px">
            <section class="showcasecontent"></section>
            <figcaption>
                <a href="oedipus.php"><div class="productioncontent">
                    <h2>Oedipus</h2>
                    <h4>5 - 7 Feb 2021</h4>
                    <a href="../oedipus.php" class="btn">
                        Find Out More <i class="fas fa-chevron-right"></i>
                    </a>
                </div></a>
            </figcaption> 
            <br>
        </div>
        
    <!-- slideshow feature 2 - Production banner 2
        photo banner's dimensions should follow 1100px x 400px -->

        <div class="carousel-item" style="height: 400px">
            <section class="showcasecontent2"></section>
            <figcaption>
                <div class="productioncontent">
                    <h2>Is That It?</h2>
                    <h4>To be released soon</h4>
                    <a href="../isthatit.php" class="btn">
                        Find Out More <i class="fas fa-chevron-right"></i>
                    </a>
                </div>
            </figcaption> 
            <br>
        </div>

        <!-- Left right controls -->
        <a class="carousel-control-prev" href="#mainBanner" role="button" data-slide="prev">
            <span class="prev">&laquo;</span>
        </a>
        <a class="carousel-control-next" href="#mainBanner" role="button" data-slide="next">
            <span class="next">&raquo;</span>
        </a>

    </body>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    </html>

Problem :

I have a carousel banner in my webpage that points to different webpages, but I just realised that the button is not clickable. It scrolls to the next banner when I clicked on it, but it is not what I want. How do I solve this?

I have the following code for my carousel banner.

<h1><strong>Upcoming Productions</strong></h1>
                
    <div id="banner" style="width: 100%" class="bg-secondary">
    <div id="mainBanner" class="carousel slide" data-ride="carousel" data-interval="7000">
        
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>
        
    <div class="carousel-inner">
        
    <!-- Slideshow feature 1 - Production Banner 1
    photo banner's dimensions should follow 1100px x 400px -->

    <div class="carousel-item active" style="height: 400px">
    <section class="showcasecontent"></section>
            <figcaption>
        <a href="oedipus.php"><div class="productioncontent">
      <h2>Oedipus</h2>
        <h4>5 - 7 Feb 2021</h4>
      <a href="../oedipus.php" class="btn">
        Find Out More <i class="fas fa-chevron-right"></i>
      </a>
    </div></a>
    </figcaption> 
    <br>
    </div>
    
    <!-- slideshow feature 2 - Production banner 2
    photo banner's dimensions should follow 1100px x 400px -->

    <div class="carousel-item" style="height: 400px">
    <section class="showcasecontent2"></section>
        <figcaption>
        <div class="productioncontent">
      <h2>Is That It?</h2>
        <h4>To be released soon</h4>
      <a href="../isthatit.php" class="btn">
        Find Out More <i class="fas fa-chevron-right"></i>
      </a>
    </div>
    </figcaption> 
    <br>
        </div>

            <!-- Left right controls -->
    <a class="carousel-control-prev" href="#mainBanner" role="button" data-slide="prev">
    <span class="prev">&laquo;</span>
    </a>
    <a class="carousel-control-next" href="#mainBanner" role="button" data-slide="next">
    <span class="next">&raquo;</span>
    </a>

Comments

Comment posted by Md Somir

can you specify which button?

Comment posted by Valerie Chua

The part of the code which says Find Out More

Comment posted by s.kuznetsov

is this the bootstrap?

Comment posted by Md Somir

Find Out More this is nested in another anchor tag… try avoiding nested anchor tag

Comment posted by Valerie Chua

I have bootstrap 4.0.0 stylesheet linked to the webpage

By

Related Post

HTML

[ANSWERED] html – Hidden Div Text Reappears?

Nov 20, 2022
HTML

[ANSWERED] c# – InvalidCastException when reading mshtml.HTMLDocument.Script property

Nov 20, 2022
HTML

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022