Responsive Slideshow With 6 Transitions - jQuery mixSlide

mixSlide is a responsive and full-featured slideshow/slider/carousel plugin for showcasing your images in an elegant way.

More Features:

• Autoplay.
• Fullscreen mode.
• Thumbnail pagination.
• Image description.
• Random transitions.
• Custom controls.

How to use it:

1. Add images with descriptions to the slideshow.

<div id="mySlideshow">
  <div><img src="1.jpg"/><p>Image 1</p></div>
  <div><img src="2.jpg"/><p>Image 2</p></div>
  <div><img src="3.jpg"/><p>Image 3</p></div>
  <div><img src="4.jpg"/><p>Image 4</p></div>
  <div><img src="5.jpg"/><p>Image 5</p></div>
</div>

2. Include jQuery library and the jQuery mixSlide plugin's files on the page.

<link rel="stylesheet" href="/path/to/src/mixSlide.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.vporel.mixSlide.js"></script>

3. Call the function on the top container and done.

$(function(){
  $('#mySlideshow').mixSlide({
    // options here
  });
});

4. Customize the transition effect:

• random
• fade
• slide
• slices
• tiles
• circle
• square

$('#mySlideshow').mixSlide({
  transition : {
    name : "fade"
  },
});

5. Config the animation speed & delay.

$('#mySlideshow').mixSlide({
  animation:{
    speed:1,
    delay:3
  },
});

6. Config the controls.

$('#mySlideshow').mixSlide({
  controls: {
    // enable/disable
    active: false,
    // top, bottom, left, right, center
    // top-left, top-right
    // bottom-left, bottom-right
    position : 'top'
  },
});

7. Config the image descriptions.

$('#mySlideshow').mixSlide({
  labels: {
    // enable/disable
    active: false,
    // top, bottom, left, right, center
    // top-left, top-right
    // bottom-left, bottom-right
    position : 'top-left'
  },
});

8. Config the thumbnail navigation.

$('#mySlideshow').mixSlide({
  thumbs: {
    // enable/disable
    active: false,
    // top, bottom, left, right, center
    // top-left, top-right
    // bottom-left, bottom-right
    position : 'bottom'
  },
});

9. Enable/disable autoplay. Default: true.

$('#mySlideshow').mixSlide({
  autoplay: false,
});

10. Enable/disable the fullscreen mode. Default: false.

$('#mySlideshow').mixSlide({
  fullscreen: true,
});

Changelog:

2021-11-02

• JS Update

---

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