Multiple Image Slider Plugin with slick.js｜DAD UNION

Slick.js is a widely used jQuery-based slider plugin that enables the implementation of sophisticated sliders and carousels on web pages quickly and efficiently. Offering various options and features, it allows developers to create sliders tailored to different requirements.

Following “Responsive Multi-Image Slider Plugin Using Swiper.js“, we introduce a responsive multiple-image slider plugin that supports swipe gestures on smartphones and tablets using slick.js.

Contents

CSS Code for Multiple Image Slider Plugin Using slick.js
HTML Code for Multiple Image Slider Plugin Using slick.js
JavaScript Code for Responsive Multi-Image Slider Plugin with slick.js Supporting Swipe on Smartphones and Tablets
- Options and Settings
- Advanced Usage
Demo Page of Multiple Image Slider with slick.js
Source: slick – the last carousel you’ll ever need

CSS Code for Multiple Image Slider Plugin Using slick.js

※Load the slick.css and slick-theme.css files. Modify as needed.

  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }
    * {
      box-sizing: border-box;
    }
    .slider {
        width: 50%;
        margin: 100px auto;
    }
    .slick-slide {
      margin: 0px 20px;
    }
    .slick-slide img {
      width: 100%;
    }
    .slick-prev:before,
    .slick-next:before {
      color: black;
    }
    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    .slick-active {
      opacity: .5;
    }
    .slick-current {
      opacity: 1;
    }
  </style>

HTML Code for Multiple Image Slider Plugin Using slick.js

※Two slider patterns are provided (class=”regular slider”, class=”center slider”). Set multiple jpg images (1.jpg to 9.jpg) in the slider area. Modify as needed.

  <section class="regular slider">
    <div>
      <img src="1.jpg">
    </div>
    <div>
      <img src="2.jpg">
    </div>
    <div>
      <img src="3.jpg">
    </div>
    <div>
      <img src="4.jpg">
    </div>
    <div>
      <img src="5.jpg">
    </div>
    <div>
      <img src="6.jpg">
    </div>
  </section>

  <section class="center slider">
    <div>
      <img src="1.jpg">
    </div>
    <div>
      <img src="2.jpg">
    </div>
    <div>
      <img src="3.jpg">
    </div>
    <div>
      <img src="4.jpg">
    </div>
    <div>
      <img src="5.jpg">
    </div>
    <div>
      <img src="6.jpg">
    </div>
    <div>
      <img src="7.jpg">
    </div>
    <div>
      <img src="8.jpg">
    </div>
    <div>
      <img src="9.jpg">
    </div>
  </section>

JavaScript Code for Responsive Multi-Image Slider Plugin with slick.js Supporting Swipe on Smartphones and Tablets

※Load the jquery-2.2.0.min.js and slick.js files. Write $(slider-area).slick({options}).

  <script src="./jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {

      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
      $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 5,
        slidesToScroll: 3
      });

    });
</script>

Options and Settings

Slick.js offers numerous configuration options, allowing customization to suit each project’s needs. Here are some key options:

slidesToShow: Number of slides shown at once.
slidesToScroll: Number of slides scrolled at once.
autoplay: Whether the slider automatically advances to the next slide.
autoplaySpeed: Speed of autoplay (in milliseconds).
arrows: Display navigation arrows on the sides.
dots: Display navigation dots.
pauseOnHover: Pause autoplay when hovered.
responsive: Define settings for different viewport sizes.

Advanced Usage

Custom Navigation

Besides the default arrows and dots, you can use custom navigation to control the slider, such as creating buttons that jump to specific slides.

Leveraging Events

Slick.js offers multiple events that can enrich user interactions. For example, you can use beforeChange and afterChange events to trigger specific actions before and after a slide change.