## Carousel Sliders

This slider plugin is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

For more informations about options & methods you can visit official website here: Slide Documentation.

### Single Item

### 1

### 2

### 3

    <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

### 1

### 2

### 3

### 4

### 5

### 6

    <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

### 1

### 2

### 3

    <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

### 1

### 2

### 3

    <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

### 1

### 2

### 3

    <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>