Creating dynamic content with SwiperJS

Currently I have a <div> class that holds my buttons. These buttons have a active class member. Like so:

<div class="image-gallery-bullets-container" id="bullets">
   <button type="button" class="image-gallery-bullet active"></button>
   <button type="button" class="image-gallery-bullet "></button>
    <button type="button" class="image-gallery-bullet "></button>

In my script tag I have an activeIndex function to tell me which slide the slides are currently in and I also have a function to loop through the bullets to enable making it active:

var swiper = new Swiper('.swiper-container');
  swiper.on('slideChange', function () {
    if(this.activeIndex === 0) {
          console.log("IM ON First SLIDE!");
    if(this.activeIndex === 1) {
      console.log("IM ON SECOND SLIDE!");

  var header = document.getElementById("bullets");
  var btns = header.getElementsByClassName("image-gallery-bullet");
  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";

But the problem is how do I combine both of these. I want it so that with each swipe, the respective class becomes active.

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