Implementation of circular picture Carousel effect _jquery based on jquery

This article is an example of the implementation of a jquery-based response circular picture carousel effect code. Share to everyone for your reference. Specifically as follows:
The screenshot of the running effect is as follows:

Mislider is a very cool effect of the jquery response circular picture Carousel effect plug-in, Mislider wheel map plug-in features:

• Easy to use
• Support multiple carousel graphs on the same screen
• The contents of a carousel diagram can be either a single picture or a complex HTML content
• Lightweight
• Response-Type Design
• Very easy to customize
• A rich callback function
• Cross-browser, support ie8+ browser

Introducing Core Files
Mislider plug-in relies on some plug-ins to introduce jQuery, Html5shiv.js, Mislider.min.js , and Mislider.min.css,mislider-custom.css files .

<link href= "Css/mislider.css" rel= "stylesheet" > <link href= "css/mislider-custom.css" rel= "stylesheet"
>
<script src= ". /lib/html5shiv/html5shiv.js "></script>
<script src=" Js/jquery.min.js "></script>
<script src= "Js/mislider.js" ></script>

Building HTML

 <ol class= "Mis-slider" > <!--slider Element-class is a parameter option--> <li clas s= "Mis-slide" > <!--a rotational element-class is a parameter option--> <a href= "#" class= "Mis-container" > <!--a SLI De container-this element is optional, if absent the plugin adds it automatically--> <figure> <! --Slide Content-whatever you want-->  ; Figcaption>pink Water lillies</figcaption> </figure> </a> </li> <li class= "M Is-slide "> <a href=" # "class=" Mis-container "> <figure>  <figcaption>pond with lillies</figcaption> </figure> </a> </li> </ol> 

Note: The above class is not required, if you do not write these classes, Plug-ins will automatically add class for the corresponding elements. By default, the Carousel map plug-in uses a sequence table structure, and if you use a different element structure, make sure you want to modify the Selectorslider and Selectorslide options.

Write JS Initialization plugin

JQuery (function ($) {var slider = $ ('. Mis-stage '). Mislider ({//the height of the stage in PX.) Options:false or positive integer. False = the height is calculated using maximum slide heights. Default:false stageheight:380,//number of slides visible at one time. Options:false or positive integer. false = fit as many as possible. Default:1 Slidesonstage:false,//The location of the current slide on the stage. Options: ' Left ', ' right ', ' center '. Defualt: ' Left ' slideposition: ' center ',//the slide to start on. Options: ' Beg ', ' mid ', ' End ' or slide # starting at 1-' 1 ', ' 2 ', ' 3 ', etc. Defualt: ' Beg ' Slidestart: ' mid ',//the relative percentage scaling-factor of the current slide-other slides AR E scaled down. Options:positive number or higher. Scaling = No. defualt:100 slidescaling:150,//The vertical offset of the slide center as a percentage of slide height. Options:positive or negative number. Neg value = up. PosValue = down. 0 = No Offset. default:0 Offsetv: -5,//Center slide contents Vertically-boolean. Default:false centerv:true,//Opacity of the Prev and Next button navigation when not transitioning. Options:number between 0 and 1. 0 (Transparent)-1 (opaque).
  Default:. 5 navbuttonsopacity:1}); });

Note: Make sure that the. mis-stage jquery selector is the same as the class name of the Carousel diagram container in the HTML page.
parameter

 JQuery (function ($) {var slider = $ ('. Mis-stage '). Mislider ({//Carousel graph Transition Animation speed//unit milliseconds.
    Options:positive Integer. speed:700,//Carousel graph between two transition animations in the pause time//in milliseconds. 
    Options:false, positive integer.
    false = AutoPlay off, set to false without AutoPlay. pause:4000,//AutoPlay and Nav Buttons of the carousel graph. 
    Auto Play with navigation button//options:positive or negative integer. Positive integer = Slide left. Positive number left//Negative integer = Slide right. Negative numbers to the right increment:1,//The height of the Carousel Graph//Options:false or positive integer. Value: False or positive integer//false = calculated using Set to False to automatically compute height//maximum slide heights. Max Height Stageheight:fal SE,//also visible on the screen of the number of Carousel Pictures//Options:false or positive integer. Value: False or positive integer//false = fit as many as possible.
    False for adaptive slidesonstage:1,//Continuous motion-carousel graph Infinite loops in the same direction//true = Slides loop in one direction if possible. Slidescontinuous:true,//location of the current carousel map on the screen: left, center, right/Options: ' Left ', ' right ', ' center '. 
    Slideposition: ' Left ',//the position where the carousel diagram begins to play.
    Options: ' Beg ', ' mid ', ' end '/or slide # starting at 1-' 1 ', ' 2 ', etc. Slidestart: ' Beg ',//Current slide width, unit px//Options:false or positive integer.
    Value: False or positive integer//False = width is the maximum of the maximum width//The existing slide widths when set to false. 
    Slidewidth:false,//Current slide scaling factor-the other pictures will be reduced//of the present slide//Others slides are scaled down. 
    Options:positive number or higher.
    Scaling = No. 
    slidescaling:100,//Slide vertical offset//As a percentage of slide height. 
    Options:positive or negative number. Neg value = up. 
    Pos value = down.
    0 = No Offset.
    The content in offsetv:0,//slide is centered vertically//Boolean.
    Centerv:false,//The origin navigation button is available//Boolean.
    Navlist:true,//arrow navigation buttons available//Boolean.
    Navbuttons:true,//arrow navigation always shows//except when Transitioning-boolean. Navbuttonsshow: False,///Arrow navigation button transparency//button navigation when not transitioning. 
    Options:number between 0 and 1.
    0 (Transparent)-1 (opaque).
    navbuttonsopacity:0.5,//Carousel graph random Order//Boolean.
    Randomize:false,//Called when the callback function is loaded//when the carousel is slides have loaded.
    Slidesloaded:false,//Carousel Graph Transition Animation before callback function//Call back function-called before//the slide transition.
    Beforetrans:false,//The callback function after the transition animation completes//call back function-called at the end//of a slide transition.
    Aftertrans:false,///stage element on the class name//to the stage element.
    Classstage: ' Mis-stage ',//The CSS class that would be slider element on the class name//applied to the slider element.
    Classslider: ' Mis-slider ',//The CSS class that would be the class name//applied to each slide element on each of the slide elements.  Classslide: ' Mis-slide ',//The CSS class that would be arrow navigation button element class name//applied to the parent of the Prev and Next button Navigation elements. 
    Classnavbuttons: ' mis-nav-buttons ',//The CSS class that'll be the class name on the DOT navigation button//applied to the parent of the 
    Numbered list navigation elements classnavlist: ' mis-nav-list ',//The selector used to select the selector for the carousel graph The slider element//descendant of the stage Selectorslider: ' Ol ',//The selector used to select for selection
  Select each slide selector//each slide element//descendant of the slider selectorslide: ' Li '}); });

The above is for everyone to share the cool jquery response round picture Carousel Mislider, I hope you can skillfully use Mislider plug-ins in their own work can be flexible use.