html [js-slider - slick] #js

Posted 2021-05-11

<!-- Data Attribute Settings -->
<div id="slider" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

<script>
if ($(".products-image")[0]) {
  //fade slider
  $('.products-image').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    
    infinite: true,
    slidesToShow: 3,	//Multiple Items
  	slidesToScroll: 3,
    //Lazy Loading
    lazyLoad: 'ondemand', //<img data-lazy="img/lazyfonz1.png"/>
    
    arrows: false,
    dots: true,
    swipe: false,
    
    fade: true,
    cssEase: 'linear'
    
    centerMode: true,
    centerPadding: '60px',
    
    variableWidth: true,
    adaptiveHeight: true,
    speed: 300,
    
    prevArrow: '<',
    nextArrow: '>',
    
    //Responsive Display
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });

  //thumbnail
  $('.products-image-thumb a').on('click', function() {
    $('.products-image-thumb a').removeClass('active');
    var slideNum = $(this).parent().index();
    $('.products-image').slick('slickGoTo', slideNum);
    $(this).addClass('active');
  });

  //modal
  $(".products-image .boxer").boxer({
    fixed: true
  });
}
/**
	Events/methods
*/
  //add slide
  $('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
  //remove slide
  $('.add-remove').slick('slickRemove',slideIndex - 1);
  
  //destroy slider
  $('.your-slider').slick('unslick');
  
</script>
<!--
troubleshooting:
-->
- TypeError: Cannot read property 'add' of null:
+ first try: change id to bind slick, ie change `id="slider"` to `id="myslider"`
+ second try: $('#slider').not('.slick-initialized').slick({..});