Take a look, I can't get .js to run multiple image sliders independently

JavaScript
,
1

Hello, I’m trying to run multiple image sliders on one page. My mission is that each slider can change image independently not all at once when clicked. Sounds confusing right?
In other words the user controls for Slider #2 is running Slider #1 and #2 , which isn’t my goal. The Goal is for slider #2 to only run #2 and Slider #1 to only run #1.

If you are curious here is the live link:

https://raff2015.github.io/BootStrap-4-Slider-w-Pause.Play.Button.Timer.Caption-/

CODE:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
    <style>

    </style>

</head>

<style>
</style>

<body>
<!--Slide #1-->
  <br>
  <center>
    <div class="col-sm-10 pest-content">
    </div>


  <button type="button" id="myBtn" class="btn btn-success">Start Slide (start)</button>
  <button type="button" id="myBtn2" class="btn btn-danger">Stop slide (pause)</button>



<div class="col-sm-6 pest-carousel">
  <!-- The carousel -->
  <div id="myCarousel" class="carousel slide mt-4" class="carousel slide" data-ride="carousel"> <!--data-interval="500"-->

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="item1 active"></li>
    <li class="item2"></li>
    <li class="item3"></li>
  </ol>

  <!-- The slideshow -->
    <div class="carousel-inner" >
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="First slide" >
      <div class="carousel-caption">
        <h3>Los Angeles</h3>

      </div>
    </div>

    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Second slide" >
      <div class="carousel-caption">
        <h3>Chicago</h3>
    </div>
    </div>

    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Third slide" >
      <div class="carousel-caption">
        <h3>New York</h3>

      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  </div>
  </div>

</center>
<br>
<!--End of Slide #1-->



<!--Slide #2-->
<br>
<center>
  <div class="col-sm-6 pest-content">
  </div>
<button type="button" id="myBtn3" class="btn btn-success">Start Slide (start)</button>
<button type="button" id="myBtn4" class="btn btn-danger">Stop slide (pause)</button>



<div class="col-sm-8 pest-carousel">
<!-- The carousel -->
<div id="myCarousel2" class="carousel slide mt-4" class="carousel slide" data-ride="carousel"> <!--data-interval="500"-->

<!-- Indicators -->
<ol class="carousel-indicators">
  <li class="item4 active"></li>
  <li class="item5"></li>
  <li class="item6"></li>
</ol>

<!-- The slideshow -->
  <div class="carousel-inner" role="listbox">
  <div class="carousel-item active">
    <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="First slide" >
    <div class="carousel-caption">
      <h3>Los Angeles</h3>

    </div>
  </div>

  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Second slide" >
    <div class="carousel-caption">
      <h3>Chicago</h3>
  </div>
  </div>

  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Third slide" >
    <div class="carousel-caption">
      <h3>New York</h3>

    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#myCarousel2" 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="#myCarousel2" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>
</div>

</center>
<br>
<!--End of Slide #2-->
<script>
//Slider #1 Settings
$(document).ready(function(){
    // Activate the Carousel, but pause it from the start
    //$("#myCarousel").carousel("pause");
 $("#myCarousel").carousel({interval: 1000 });


    // Click on the button to start sliding
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("cycle");
    });

    // Click on the button to stop sliding
    $("#myBtn2").click(function(){
        $("#myCarousel").carousel("pause");
    });

    // Enable Carousel Indicators
    $(".item1").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".item2").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".item3").click(function(){
        $("#myCarousel").carousel(2);
    });

    // Enable Carousel Controls
    $(".carousel-control-prev").click(function(){
        $("#myCarousel").carousel("prev");
    });
    $(".carousel-control-next").click(function(){
        $("#myCarousel").carousel("next");
    });
});
//End of Slider #1 Settings



//Slider #2 Settings
$(document).ready(function(){
    // Activate the Carousel, but pause it from the start
    //$("#myCarousel").carousel("pause");
 $("#myCarousel2").carousel({interval: 2000 });


    // Click on the button to start sliding
    $("#myBtn3").click(function(){
        $("#myCarousel2").carousel("cycle");
    });

    // Click on the button to stop sliding
    $("#myBtn4").click(function(){
        $("#myCarousel2").carousel("pause");
    });

    // Enable Carousel Indicators
    $(".item4").click(function(){
        $("#myCarousel2").carousel(3);
    });
    $(".item5").click(function(){
        $("#myCarousel2").carousel(4);
    });
    $(".item6").click(function(){
        $("#myCarousel2").carousel(5);
    });

    // Enable Carousel Controls
    $(".carousel-control-prev2").click(function(){
        $("#myCarousel2").carousel("prev");
    });
    $(".carousel-control-next2").click(function(){
        $("#myCarousel2").carousel("next");
    });
});
//End of Slider #2 Settings
</script>

</body>
</html>

Any help or advice would be greatly appreciated :slight_smile:

Thank You

-E

2 
 <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#myCarousel2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>

Take a verrrry close look at the class of that <a>…

    $(".carousel-control-prev").click(function(){
        $("#myCarousel").carousel("prev");
    });

    $(".carousel-control-prev2").click(function(){
        $("#myCarousel2").carousel("prev");
    });

Which of these two functions will fire when you click that link?

1 Like
3

Here’s how i fixed your code:

  • Remove the prev/next click() from the top section.
  • Alter the prev/next click() in the bottom section to reference the HREF attribute of the buttons.
  • Changed the slide identifiers in items 4 5 and 6 to be the correct values (0,1,and 2 respectively. New carousel, new slide index!)

Your code:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
    <style>

    </style>

</head>

<style>
</style>

<body>
<!--Slide #1-->
  <br>
  <center>
    <div class="col-sm-10 pest-content">
    </div>


  <button type="button" id="myBtn" class="btn btn-success">Start Slide (start)</button>
  <button type="button" id="myBtn2" class="btn btn-danger">Stop slide (pause)</button>



<div class="col-sm-6 pest-carousel">
  <!-- The carousel -->
  <div id="myCarousel" class="carousel slide mt-4" class="carousel slide" data-ride="carousel"> <!--data-interval="500"-->

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li class="item1 active"></li>
    <li class="item2"></li>
    <li class="item3"></li>
  </ol>

  <!-- The slideshow -->
    <div class="carousel-inner" >
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="First slide" >
      <div class="carousel-caption">
        <h3>Los Angeles</h3>

      </div>
    </div>

    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Second slide" >
      <div class="carousel-caption">
        <h3>Chicago</h3>
    </div>
    </div>

    <div class="carousel-item">
      <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Third slide" >
      <div class="carousel-caption">
        <h3>New York</h3>

      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  </div>
  </div>

</center>
<br>
<!--End of Slide #1-->



<!--Slide #2-->
<br>
<center>
  <div class="col-sm-6 pest-content">
  </div>
<button type="button" id="myBtn3" class="btn btn-success">Start Slide (start)</button>
<button type="button" id="myBtn4" class="btn btn-danger">Stop slide (pause)</button>



<div class="col-sm-8 pest-carousel">
<!-- The carousel -->
<div id="myCarousel2" class="carousel slide mt-4" class="carousel slide" data-ride="carousel"> <!--data-interval="500"-->

<!-- Indicators -->
<ol class="carousel-indicators">
  <li class="item4 active"></li>
  <li class="item5"></li>
  <li class="item6"></li>
</ol>

<!-- The slideshow -->
  <div class="carousel-inner" role="listbox">
  <div class="carousel-item active">
    <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="First slide" >
    <div class="carousel-caption">
      <h3>Los Angeles</h3>

    </div>
  </div>

  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Second slide" >
    <div class="carousel-caption">
      <h3>Chicago</h3>
  </div>
  </div>

  <div class="carousel-item">
    <img class="d-block img-fluid" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Third slide" >
    <div class="carousel-caption">
      <h3>New York</h3>

    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#myCarousel2" 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="#myCarousel2" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>
</div>

</center>
<br>
<!--End of Slide #2-->
<script>
//Slider #1 Settings
$(document).ready(function(){
    // Activate the Carousel, but pause it from the start
    //$("#myCarousel").carousel("pause");
 $("#myCarousel").carousel({interval: 1000 });


    // Click on the button to start sliding
    $("#myBtn").click(function(){
        $("#myCarousel").carousel("cycle");
    });

    // Click on the button to stop sliding
    $("#myBtn2").click(function(){
        $("#myCarousel").carousel("pause");
    });

    // Enable Carousel Indicators
    $(".item1").click(function(){
        $("#myCarousel").carousel(0);
    });
    $(".item2").click(function(){
        $("#myCarousel").carousel(1);
    });
    $(".item3").click(function(){
        $("#myCarousel").carousel(2);
    });
});
//End of Slider #1 Settings



//Slider #2 Settings
$(document).ready(function(){
    // Activate the Carousel, but pause it from the start
    //$("#myCarousel").carousel("pause");
 $("#myCarousel2").carousel({interval: 2000 });


    // Click on the button to start sliding
    $("#myBtn3").click(function(){
        $("#myCarousel2").carousel("cycle");
    });

    // Click on the button to stop sliding
    $("#myBtn4").click(function(){
        $("#myCarousel2").carousel("pause");
     });

    // Enable Carousel Indicators
    $(".item4").click(function(){
        $("#myCarousel2").carousel(0);
    });
    $(".item5").click(function(){
        $("#myCarousel2").carousel(1);
    });
    $(".item6").click(function(){
        $("#myCarousel2").carousel(2);
    });

    // Enable Carousel Controls
    $(".carousel-control-prev").click(function(){
        $($(this).attr('href')).carousel("prev");
    });
    $(".carousel-control-next").click(function(){
        $($(this).attr('href')).carousel("prev");
    });
});
//End of Slider #2 Settings
</script>

</body>
</html>

Alternatively, fixing the class of the <a> would make your existing code work. I just like making functions generic when possible :wink:

1 Like
4

WOW!, Thank you sooo much. The solution you made is very interesting :smiley:
Again, Thank you for taking your time to help me out, I truly appreciate it.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.