mixslide-jquery-plugin

A Slideshow Plugin with Amazing Transitions | jQuery mixSlide

by

mixSlide plugin is a slideshow in jquery javascript view. mixSlide is a responsive and full-featured slideshow/slider/carousel plugin for presenting your photos in an elegant way.

responsive image slider with text, slick slider, multiple image slider jquery example, responsive slider with text animation, jquery carousel slider example

How to make use of it:

1. Add photographs 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 the jQuery library and the jQuery mix slide plugin’s files on the web 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 perform on the highest container and accomplished.

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

4. Customize the transition impact:

$('#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 picture 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.

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

10. Enable/disable the fullscreen mode.

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

Responsive Slideshow With 6 Transitions, mixSlide-jquery-Plugin/Github, multi item slider jquery, responsive banner slider

See Demo And Download

Download

Official Website(vporel): Click Here

This superior jQuery/javascript plugin is developed by vporel. For extra Advanced Usages, please go to the official website.

Leave a Comment