Add Or Remove Slides Dynamically in Slick Slider

In this tutorial we will learn how to add or remove slides from slick slider dynamically , So lets go with an example where some data is coming from api which containes slider images and we need to add the images Slide to the existing Slick slider dynamically we may add new slick slide item to the center so for that we will use Slick add & remove function which will add slides to the existing slick slider below is the code example by which we can add or remove the slides in slick slider

Code To add the slide in existing slick slider

 $('.slider-info').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');

Code To remove the slide in existing slick slider

$('.slider-info').slick('slickRemove',slideIndex - 1);

Now lets have an example where data is coming from the API

const slides = [
      {
        image:
          'https://simplifyscript.com/wp-content/uploads/2024/07/slide2.jpeg',
        slideTitle: 'this is Slide One',
      },
      {
        image:
          'https://simplifyscript.com/wp-content/uploads/2024/07/slide4.jpeg',
        slideTitle: 'this is Slide One',
      },
    ];

HTML Markup code

 <div class="main-ss-slider">
        
      <div class="slider slider-info">
        <div>
          <img
            src="https://simplifyscript.com/wp-content/uploads/2024/07/slide-one-scaled.jpg"
          />
        </div>
        <div>
          <img
            src="https://simplifyscript.com/wp-content/uploads/2024/07/slide5.jpeg"
          />
        </div>
      </div>
      <div class="pagingInfo"></div>
      <div class="buttons">
        <a href="javascript:void(0)" class="button js-add-slide">Add Slide</a>

        <a href="javascript:void(0)" class="button js-remove-slide">
          Remove Slide
        </a>
      </div>
    </div>

In the above code we have only added two slides in html first and below to that we have created a button to add or remove the slides , now let go through the full javascript code which add images to the slick slider dynamically from array

  <script>
    const slides = [
      {
        image:
          'https://simplifyscript.com/wp-content/uploads/2024/07/slide2.jpeg',
        slideTitle: 'this is Slide One',
      },
      {
        image:
          'https://simplifyscript.com/wp-content/uploads/2024/07/slide4.jpeg',
        slideTitle: 'this is Slide One',
      },
    ];

    var $status = $('.pagingInfo')
    var $slickElement = $('.main-ss-slider')

    $slickElement.on('init reInit afterChange', function (
      event,
      slick,
      currentSlide,
      nextSlide,
    ) {
      //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
      var i = (currentSlide ? currentSlide : 0) + 1
      $status.text(i + '/' + slick.slideCount)
    })


    $('.slider-info').slick({
      infinite: false,
      speed: 200,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrow: true,
    })
    var slideIndex = 3
    var slideCount = 0
    $('.js-add-slide').on('click', function () {
      var slideAdded = false
      slides.forEach((ele, index) => {
        if (index == slideCount && slideCount < 2 && !slideAdded) {
          $('.slider-info').slick(
            'slickAdd',
            '<div><img src="' + ele.image + '"/></div>',
          )
          slideAdded = true
          slideCount++
        }
      })
    })

    // code to show slide count

  
    $('.js-remove-slide').on('click', function () {
      $('.slider-info').slick('slickRemove', slideIndex - 1)

      if (slideIndex !== 0) {
        if (slideCount !== 0) {
          slideCount--
        }
        slideIndex--
      }
    })
  </script>

Now lets go through the working demo below

Add Slide Remove Slide

More into slick slider