Make Admin Template & Builder

Single Item

<div class="slick" data-arrows="true">
    <div class="slide">
        <h3>1</h3>
    </div>
    <div class="slide">
        <h3>2</h3>
    </div>
    <div class="slide">
        <h3>3</h3>
    </div>
</div>

Multiple Items

<div class="widget widget_slider">
    <div class="slick" data-arrows="true" data-num-slides="3" data-num-scroll="3">
        <div class="slide">
            <h3>1</h3>
        </div>
        // ... Other slides
    </div>
</div>

Responsive Display

1

2

3

4

5

6

7

8

$('.responsive').slick({
  dots: true, infinite: false, speed: 300, slidesToShow: 4, slidesToScroll: 4,
  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
      }
    }
  ]
});

Variable Width

200

125

175

150

75

125

<div class="slick" data-variable-width="true" data-center="true">
    <!-- Don't forget to specify width for each slide -->
    <div class="slide" style="width:200px">
        <h3>200</h3>
    </div>
    // ... Other slides
</div>

Fade Effect

<div class="slick" data-fade="true">
    <div class="slide">
        <h3 class="bg-primary">1</h3>
    </div>
    <div class="slide">
        <h3 class="bg-primary">2</h3>
    </div>
    <div class="slide">
        <h3 class="bg-primary">3</h3>
    </div>
</div>

Autoplay False

<div class="slick" data-autoplay="false">
    <div class="slide">
        <h3 class="bg-primary">1</h3>
    </div>
    <div class="slide">
        <h3 class="bg-primary">2</h3>
    </div>
    <div class="slide">
        <h3 class="bg-primary">3</h3>
    </div>
</div>

No Arrow

<div class="slick" data-autoplay="false">
    <div class="slide">
        <h3 class="bg-primary">1</h3>
    </div>
    <div class="slide">
        <h3 class="bg-primary">2</h3>
    </div>
    <div class="slide">
        <h3 class="bg-primary">3</h3>
    </div>
</div>

Articles