CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
D. Cruz
D. Cruz

Reputation: 3

Bootstrap Carousel Slide Buttons Not Working

My Bootstrap Carousel Slide seems not working even though i tried other Answers here (one of them is this.

But almost all of them aren't working and outdated, even though the it solve most of others problems (which seems doesn't work on me)

Most of the code come from Bootstrap Snippet pack from Visual Studio 2017 (Extension)

    <!-- Image Slider w/ Captions -->
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

        <div id="#my-carousel" class="item active">
            <img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
            <div class="carousel-caption">
                <h3>Caption heading 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
            <div class="carousel-caption">
                <h3>Caption heading 2</h3>
                <p>Morbi eget libero quis metus consectetur semper.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
            <div class="carousel-caption">
                <h3>Caption heading 3</h3>
                <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
            </div>
        </div>
    </div>

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/animations.js"></script>

JS: (Copied the code here)

$(document).ready(function () {
    console.log("Main Content finished loading!");
});

$("#myCarousel .slider-pager a").click(function (e) {
    var index = $(this).index();
    slider.carousel(index);
    e.preventDefault();
});

I also tried other's code in some websites and i can't seem to find the answer or solution to my problem.

Upvotes: 0

Views: 7969

Answers (2)

Daniel Sixl
Daniel Sixl

Reputation: 2499

Your markup has several errors. The Bootstrap CSS CDN link is missing. Every slide in your markup has an ID id="#my-carousel". ID's have to be unique.

Here two working examples of Bootstrap sliders. One using data attributes and one using a JavaScript init and external controls.

var sliderTwo = $('#carouselExampleIndicators2').carousel({
  /* your options for slider #2 */
})

$(".slider-pager li").click(function (e) {
    var index = $(this).data('slide');
    sliderTwo.carousel(index);
    e.preventDefault();
});
.slider-pager {
list-style-type: none;
margin: 0;
padding: 0;
}

.slider-pager li {
background-color: #333;
color: #FFF;
padding: 1em;
margin: 0 0 1em 0;
cursor: pointer;
text-align: center;
border-radius: 4px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<div class="container">

  <h2>Slider via data attributes</h2>

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <!-- Your controls -->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <!-- Your slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=First+slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Second+slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Third+slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>

<hr>

<div class="container">

  <h2>Slider via JavaScript,<br>external controls</h2>

  <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
 
  <!-- Your slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://placehold.it/1200x675/FF851B/FFFFFF&text=First+slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/0074D9/FFFFFF&text=Second+slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/F012BE/FFFFFF&text=Third+slide" alt="Third slide">
    </div>
  </div>
</div>

</div>

<hr>

<div class="container">
  
  <ul class="slider-pager">
    <li data-slide="0" class="active">First slide</li>
    <li data-slide="1">Second slide</li>
    <li data-slide="2">Third slide</li>
  </ul>
</div>

Upvotes: 0

arbuthnott
arbuthnott

Reputation: 3819

I got your code to work as is by fiddling with the bootstrap dependencies.

  • The code you posted did not have bootstrap css. Not sure if you missed it in your own project, but I added a link to the CDN.
  • The link to bootstrap js seemed to be throwing an error (looking for a Popper object?). I switched from the beta to the stable release of bootstrap and it worked.
  • I entirely left out your custom jquery: the bootstrap css can use the html markup to know when to slide next, slide prev, etc.

A last note: I did not change it, but why does every item have id="#my-carousel"? I think only the outer div (with class carousel) needs id="my-carousel" (no hash symbol), and the rest could be removed.

<!-- Image Slider w/ Captions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

        <div id="#my-carousel" class="item active">
            <img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
            <div class="carousel-caption">
                <h3>Caption heading 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
            <div class="carousel-caption">
                <h3>Caption heading 2</h3>
                <p>Morbi eget libero quis metus consectetur semper.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
            <div class="carousel-caption">
                <h3>Caption heading 3</h3>
                <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
            </div>
        </div>
    </div>

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions