Adaptive Slick Slider

index.html

<!-- put mobile (smaller) images URIs to the data-images attribute, separate them by semicolon -->
<div id="slider-mobile" class="slick-slider" data-images="http://dummyimage.com/300x200/000/00f;http://dummyimage.com/300x200/000/f00;http://dummyimage.com/300x200/000/0f0">
</div>

<!-- put desktop (larger) images URIs to the data-images attribute, separate them by semicolon -->
<div id="slider-desktop" class="slick-slider" data-images="http://dummyimage.com/600x400/000/00f;http://dummyimage.com/600x400/000/f00;http://dummyimage.com/600x400/000/0f0">
</div>

index.js

// main js file
// the init_slick_slider.js needs to be loaded at this point

$(function(){
  
  // initialize the right slick slider when document is ready
  $('.slick-slider').initSlickSlider();
});

init_slick_slider.js

// mini jQuery plugin that initializes the Slick plugin on one of the sliders (the one that is visible)
// you can pass object with config options for Slick
$.fn.initSlickSlider = function(slickOpts) {
  slickOpts = $.extend({
    autoplay: true,
    arrows: false,
    pauseOnHover: false,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear'
  }, slickOpts);
  this.each(function(){
    var $slider = $(this);
    if ( $slider.is(':visible') ) {
      $slider.data('images').split(';').forEach(function(url){
        $slider.append('<img src="'+url+'" />');
      });
      $slider.slick(slickOpts);
    }
  })
}

styles.css

.slick-slider img {
  height: auto;
}

/* show only the #slider-mobile on small screens */
@media (max-width: 767px) {
  #slider-mobile {
    display: block;
  }
  #slider-desktop {
    display: none;
  }
}

/* show only the #slider-desktop on big screens */
@media (min-width: 768px) {
  #slider-mobile {
    display: none;
  }
  #slider-desktop {
    display: block;
  }
}