Simple Smooth Image Carousel Plugin - jQuery SnackSlider

SnackSlider is a simple, lightweight, dynamic, responsive image slider/carousel plugin which uses CSS transitions and transforms for smooth slide/fade animations.

It also supports CSS object-fit property that dynamically stretches/crops/shrinks images to fit their container element.

How to use it:

1. Add references to jQuery library and the SnackSlider plugin's files:

<link href="snackslider.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script>
<script src="snackslider.js"></script>

2. Create a container in which the carousel will generate.

<div class="slider">
</div>

3. Call the SnackSlider on the container and specify the path to the images in a JS array:

const slider = new SnackSlider({
      selector: '.slider',
      children: [
        '1.jpg',
        '2.jpg',
        '3.jpg'
      ]
});

4. Customize the transition type.

• 'right': Right to left. Default.
• 'left': Left to right.
• 'top': Top to bottom.
• 'bottom': Bottom to top.
• 'fade': Fade in/out.

const slider = new SnackSlider({
      selector: '.slider',
      children: [
        '1.jpg',
        '2.jpg',
        '3.jpg'
      ],
      mode: 'left'
});

5. Determine how to resize the image to fit its parent.

• 'cover': The image will be sized to maintain its aspect ratio while filling the container. Default.
• 'fill': The image will completely fill the container.
• 'contain': The image will be scaled to maintain its aspect ratio while fitting within the container.

const slider = new SnackSlider({
      selector: '.slider',
      children: [
        '1.jpg',
        '2.jpg',
        '3.jpg'
      ],
      fit: 'cover'
});

6. Set the background color of the image.

const slider = new SnackSlider({
      selector: '.slider',
      children: [
        '1.jpg',
        '2.jpg',
        '3.jpg'
      ],
      background: 'white'
});

7. Set the animation speed & autoplay interval.

const slider = new SnackSlider({
      selector: '.slider',
      children: [
        '1.jpg',
        '2.jpg',
        '3.jpg'
      ],
      speed: 1000,
      pause: 4000
});

8. Set the width/height of the carousel. 0 means to use the parent's size.

const slider = new SnackSlider({
      selector: '.slider',
      children: [
        '1.jpg',
        '2.jpg',
        '3.jpg'
      ],
      const slider = new SnackSlider({
      selector: '.slider',
      children: [
        '1.jpg',
        '2.jpg',
        '3.jpg'
      ],
      width: 0,
      height: 0
});

9. Override the default settings programmatically.

slider.mode='left'
slider.speed=500
slider.pause=6000
slider.fit='fill'
slider.width=320
slider.height=240

10. API methods.

// remove an image
slider.delete(1);

// insert a new image
slider.insert(1, '4.jpg');

// play
slider.play();

// start
slider.start();

// stop
slider.stop();

---

This awesome jQuery plugin is developed by rheesh. For more Advanced Usages, please check the demo page or visit the official website.