'a href(for button) not working on caraousel

href is not able to clickable on carousel due to jQuery

Carousel is using jQuery for automated sliding and when I'm placing an element with a href tag it's not working, also as the project is using multiple JavaScript files for fast uploading. I'm not able to identify how to make href clickable on carousel.
How can I overwrite existing jQuery to make only that particular href clickable?

<li class="ds cover-image animated scaleAppear">
    <img src="<?php echo $Domain;?>img/slide2.jpg" alt="img">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row  text-center" style="text-align:center;">
                    <div id="arrow-left" class="arrow">
                        <div class="col-sm-6 ">
                            <h6 id="firstLineh6"><span style="font-size:50px;">&#9632;</span>Farming-as-a-Service</h6>
                            <h1 id="firstLineh1">Advance,Affordable,<br>Accessible</h1>
                            <div class="vertical">
                                <p id="contP">
                                    We are making advanced farm mechanization services affordable to farmers through the
                                    Pay and Use Model
                                </p>
                            </div>
                            <a id="carbtn1" href="https://google.com">Traxi Customer</a>
                            <a id="carbtn2" href="https://google.com">Traxi Partner</a>
                            <div class="col-sm-6 fade-in text-center" style="text-align:right;"></div>
                        </div>

                        <div class="intro_layers_wrapper">
                            <div class="intro_layers">
                                <!-- <div class="intro_layer">
                                    <p class="intro_before_featured_word pTextSize">Looking For Mechanized Crop Cultivation? </p>
                                    <p class="text-capitalize intro_featured_word pTextSize"> We are the "Solution" </p>
                                    <br>
                                    <a href="<?php echo $Domain; ?>products.php"  class="btn btn-outline-darkgrey big-btn font-25">Tell Us Your Farming Need</a> 
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</li>
phphtmljquerycss


Solution 1:[1]

Hey there as I got that your all links working with above code. https://imgur.com/a/DeZd2K9

But if you still facing issue with your Code you can try given below code for slider-

.bs-fullscreen {
    height: 100%;
}
.bs-fullscreen .carousel,
.bs-fullscreen .item,
.bs-fullscreen .active {
    height: 100%;
}

.bs-fullscreen .carousel-inner {
    height: 100%;
}
.carousel-bg .carousel-inner .item {
    background-color: darkslategrey;
    background-size: cover;
    background-position: center;
    min-height: 664px;
}

.banner-text {
    position: absolute !important;
    top: 215px;
    left: 12%;
    background: rgba(0, 0, 0, 0.5);
    padding: 47px 80px;
}
.banner-text p {
    font-size: 16px;
    font-family: 'Roboto';
    color: #fff;
    font-weight: 600;
}
.banner-text h2 {
    font-size: 42px;
    font-family: 'Poppins';
    font-weight: 600;
    color: #fff;
    line-height: 44px;
}
.banner-text a {
    font-size: 16px;
    color: #000;
    font-weight: 800;
    background: #fff;
    padding: 10px 20px;
    font-family: 'Roboto';
}
.banner-text span {
    font-size: 48px !important;
}

@media only screen and (max-width:600px) {
    .banner-text span {
        font-size: 34px !important;
    }
}
@media only screen and (max-width:400px) {
    .banner-text {
        position: center;
    }
}
<!doctype html>
<html>

<body>
    <div class="bs-fullscreen">
        <div id="carousel-example" class="carousel slide carousel-bg" data-ride="carousel" data-interval="3000">
            <!-- Bottom dots {indicators} -->

            <div class="carousel-inner" role="listbox">
                <div class="item active"
                    style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/4-3-1.jpg);">
                    <div class="banner-text">
                        <p>Eco Friendly | Feathery Light Perfect Fit</p>
                        <h2>50 WASH <br><span>UNDERWEARS</span></h2>
                        <a href="https://www.ashleyandalvis.com/shop/">Shop Collection</a>
                    </div>
                </div>
                <div class="item mob-banner"
                    style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Desktop-View-Home-Page-banner-1280x720px-1.jpg);">
                    <div class="banner-text">
                        <p>Memory Stretch | Skinny Soft Modal</p>
                        <h2>CONFIDENCE <br><span>INSIDE</span></h2>
                        <a href="https://www.ashleyandalvis.com/shop/">Shop Collection</a>
                    </div>
                </div>
                <div class="item mob-banner1"
                    style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Confidence-INSIDE-MOBILE-SLIDER-1280-%C3%97-720px.png);">
                    <div class="banner-text">
                        <p>Memory Stretch | Skinny Soft Modal</p>
                        <h2>CONFIDENCE <br><span>INSIDE</span></h2>
                        <a href="https://www.ashleyandalvis.com/shop/">Shop Collection</a>
                    </div>
                </div>
            </div>

            <a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only"></span>
            </a>
        </div>
    </div>
</body>

</html>

Hope you like the answer.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tyler2P

Related Questions