how to set the bullet buttons works right in jquery slider-CodePudding

I want to click the bullet in index number 4 and the image show the image index number 4 also, and another too.. i failed to do so..

here is a fiddle https://jsfiddle.net/saintzack92/50hsktom/24/

(function($) {
  $.fn.imageSlider = function(options) {
    let settings = $.extend({
      interval: 2000,
      slide: 'auto'
    }, options);

    if (settings.slide === 'auto') {
      intervals = window.setInterval(nextImg, settings.interval)
    } else {
      clearInterval(nextImg, settings.interval)
    }
    let currentSlide = 0;
    let currentBullet = 0
    // set up initial state
    // first, hide all img elements
    $('img').hide();

    // then show currentslide that is the start index is 0 as eq() function is 
    $('img').eq(currentSlide).show();
    $('.bullet').eq(currentBullet).addClass('active')

    // make sliding to next image function
    function nextImg() {
      // how the code works
      $('.bullet').removeClass('active')
      // first step: hide current slide that is index 0
      $('img').eq(currentSlide).hide().removeClass('active');
      $('.bullet').eq(currentBullet).removeClass('active')

      // second : update current slide index after modulo calculation
      currentSlide = (currentSlide   1) % $('img').length;
      currentBullet = (currentBullet   1) % $('.bullet').length;

      // show new slide
      $('img').eq(currentSlide).fadeIn().addClass('active')
      $('.bullet').eq(currentBullet).addClass('active')
    }

    function prevImg() {
      $('.bullet').removeClass('active')
      // hide current slide
      $('img').eq(currentSlide).hide().removeClass('active');
      $('.bullet').eq(currentBullet).removeClass('active')

      // update current slide index
      currentSlide = (currentSlide - 1) % $('img').length;
      currentBullet = (currentBullet - 1) % $('.bullet').length;

      // show new slide
      $('img ').eq(currentSlide).fadeIn().addClass('active')
      $('.bullet').eq(currentBullet).addClass('active');

    }

    $('.right-button').on('click', function() {
      nextImg()
      window.clearInterval(intervals)
      if (settings.slide === 'auto') {
        intervals = window.setInterval(nextImg, settings.interval)
      }


    })


    $('.left-button').on('click', function() {
      prevImg()
      window.clearInterval(intervals)
      if (settings.slide === 'auto') {
        intervals = window.setInterval(nextImg, settings.interval)
      }

    });

  }

})(jQuery);

$('.container').imageSlider({
  interval: 2000,
  slide: 'stop'
})

.parent-container {
     background-color: bisque;
     position: relative;
     z-index: 100;
     overflow: hidden;
     display: block;
     margin: 0 auto;
     width: 600px;
     height: 100%;
     align-items: center;
     display: flex;
}
 .parent-container .left-button {
     left: 0;
     cursor: pointer;
     width: 30px;
     background-color: yellow;
     height: 30px;
     position: absolute;
     z-index: 39;
}
 .parent-container .right-button {
     right: 0;
     cursor: pointer;
     width: 30px;
     background-color: yellow;
     height: 30px;
     position: absolute;
     z-index: 39;
}
 .parent-container .container {
     justify-content: center;
     align-items: center;
     margin: 0 auto;
     background-color: darkolivegreen;
     height: 500px;
     display: flex;
     position: relative;
}
 .parent-container .container .active {
     margin: 0 auto;
     position: relative;
     width: 300px;
     height: 300px;
     background-color: darkred;
     align-items: center;
}
 .bullets {
     width: 400px;
     margin: 0 auto;
     text-align: center;
     position: relative;
     bottom: 30px;
     z-index: 300;
}
 .bullets .bullet {
     background-color: red;
     display: inline-block;
     width: 10px;
     height: 10px;
     border-radius: 5px;
     background: #ccc;
     margin: 0 5px;
     cursor: pointer;
}
 .bullets .active {
     background: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<main>
  <div >
    <div ></div>
    <div ></div>

    <div >
      <img src="https://picsum.photos/id/237/200/300" >
      <img src="https://picsum.photos/seed/picsum/200/300" >
      <img src="https://picsum.photos/200/300?grayscale" >
      <img src="https://picsum.photos/200/300/?blur" >

    </div>
  </div>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</main>

CodePudding user response：

Your intervals var is not in scope

You did not have an event handler on the bullets

$(".bullet").on("click", function() {
  currentSlide = $(this).index()-1;
  currentBullet = $(this).index()-1;
  nextImg()
})

Also I unwrapped the IIFE

$(function() {
  let intervals;
  let currentSlide = 0;
  let currentBullet = 0;

  $.fn.imageSlider = function(options) {
    let settings = $.extend({
      interval: 2000,
      slide: 'auto'
    }, options);

    if (settings.slide === 'auto') {
      intervals = window.setInterval(nextImg, settings.interval)
    } else {
      clearInterval(nextImg, settings.interval)
    }
    // set up initial state
    // first, hide all img elements
    $('img').hide();

    // then show currentslide that is the start index is 0 as eq() function is 
    $('img').eq(currentSlide).show();
    $('.bullet').eq(currentBullet).addClass('active')

    // make sliding to next image function
    function nextImg() {
      // how the code works
      $('.bullet').removeClass('active')
      // first step: hide current slide that is index 0
      $('img').eq(currentSlide).hide().removeClass('active');
      $('.bullet').eq(currentBullet).removeClass('active')

      // second : update current slide index after modulo calculation
      currentSlide = (currentSlide   1) % $('img').length;
      currentBullet = (currentBullet   1) % $('.bullet').length;

      // show new slide
      $('img').eq(currentSlide).fadeIn().addClass('active')
      $('.bullet').eq(currentBullet).addClass('active')
    }

    function prevImg() {
      $('.bullet').removeClass('active')
      // hide current slide
      $('img').eq(currentSlide).hide().removeClass('active');
      $('.bullet').eq(currentBullet).removeClass('active')

      // update current slide index
      currentSlide = (currentSlide - 1) % $('img').length;
      currentBullet = (currentBullet - 1) % $('.bullet').length;

      // show new slide
      $('img ').eq(currentSlide).fadeIn().addClass('active')
      $('.bullet').eq(currentBullet).addClass('active');
    }
    $('.right-button').on('click', function() {
      nextImg()
      window.clearInterval(intervals)
      if (settings.slide === 'auto') {
        intervals = window.setInterval(nextImg, settings.interval)
      }
    })
    $('.left-button').on('click', function() {
      prevImg()
      window.clearInterval(intervals)
      if (settings.slide === 'auto') {
        intervals = window.setInterval(nextImg, settings.interval)
      }
    });
    $(".bullet").on("click", function() {
    console.log($(this).index())
      currentSlide = $(this).index()-1;
      currentBullet = $(this).index()-1;
      nextImg()
    })

  }



  $('.container').imageSlider({
    interval: 2000,
    slide: 'stop'
  })
})

.parent-container {
  background-color: bisque;
  position: relative;
  z-index: 100;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  width: 600px;
  height: 100%;
  align-items: center;
  display: flex;
}

.parent-container .left-button {
  left: 0;
  cursor: pointer;
  width: 30px;
  background-color: yellow;
  height: 30px;
  position: absolute;
  z-index: 39;
}

.parent-container .right-button {
  right: 0;
  cursor: pointer;
  width: 30px;
  background-color: yellow;
  height: 30px;
  position: absolute;
  z-index: 39;
}

.parent-container .container {
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background-color: darkolivegreen;
  height: 500px;
  display: flex;
  position: relative;
}

.parent-container .container .active {
  margin: 0 auto;
  position: relative;
  width: 300px;
  height: 300px;
  background-color: darkred;
  align-items: center;
}

.bullets {
  width: 400px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  bottom: 30px;
  z-index: 300;
}

.bullets .bullet {
  background-color: red;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.bullets .active {
  background: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<main>
  <div >
    <div ></div>
    <div ></div>

    <div >
      <img src="https://picsum.photos/id/237/200/300" >
      <img src="https://picsum.photos/seed/picsum/200/300" >
      <img src="https://picsum.photos/200/300?grayscale" >
      <img src="https://picsum.photos/200/300/?blur" >

    </div>
  </div>
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</main>