jQuery creates responsive image carousel effect

This time I will bring you jQuery to create a responsive image carousel effect. What are the precautions for jQuery to create a responsive image carousel effect? ​​Here are practical cases, let’s take a look.

The screenshot of the running effect is as follows:

mislider is a very cool jQuery responsive circular image carousel special effects plug-in, mislider carousel The features of the plug-in are:

• Easy to use

• Supports multiple carousels on the same screen

• The content of the carousel can be a single image or complex HTML content

• Lightweight

• Responsive design

• Very easy to customize

• Rich Callback function

• Cross-browsing browser, supports IE8 browser

Introduce core files
mislider plug-in depends on some plug-ins, you must first introducejQuery , html5shiv.js, mislider.min.js and mislider.min.css, mislider-custom.css file.

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

Build html

<ol class="mis-slider">
   <!-- slider 元素 - class是一个参数选项 -->
   <li class="mis-slide">
    <!-- 一个旋转元素 - class是一个参数选项 -->
    <a href="#" class="mis-container">
     <!-- A slide container - this element is optional, if absent the plugin adds it automatically -->
     <figure>
      <!-- Slide content - whatever you want -->
      <img src="images/garden01.jpg" alt="Pink Water Lillies">
      <figcaption>Pink Water Lillies</figcaption>
     </figure>
    </a>
   </li>
   <li class="mis-slide">
    <a href="#" class="mis-container">
     <figure>
      <img src="images/garden02.jpg" alt="Pond with Lillies">
      <figcaption>Pond with Lillies</figcaption>
     </figure>
    </a>
   </li>
 </ol>

Note: The above classes are not necessary. If you do not write these classes, the plug-in will automatically add classes to the corresponding elements. By default, the carousel plug-in uses an ordered list structure. If you use a different element structure, make sure to modify the selectorSlider and selectorSlide options.

WriteJSInitialize the plug-in

jQuery(function ($) {
   var slider = $('.mis-stage').miSlider({
    // The height of the stage in px. Options: false or positive integer. false = 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 number starting at 1 - '1','2','3', etc. Defualt: 'beg'
    slideStart: 'mid',
    // The relative percentage scaling factor of the current slide - other slides are scaled down. Options: positive number 100 or higher. 100 = No scaling. 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. Pos value = 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 to .mis-stage the jQuery selector and the carousel container in the HTML page The class names are the same.
Parameters

 jQuery(function ($) {
   var slider = $('.mis-stage').miSlider({
    // 轮播图过渡动画的速度 
    // 单位毫秒. Options: positive integer.
    speed: 700,
    // 轮播图在两个过渡动画之间的暂停时间 
    // in milliseconds. Options: false, positive integer. 
    // false = Autoplay off，设为false则不自动播放.
    pause: 4000,
    // 轮播图的增量 
    // Autoplay and Nav Buttons. 自动播放与导航按钮 
    // Options: positive or negative integer. 
    // Positive integer = Slide left. 正数向左
    // Negative integer = Slide right. 负数向右
    increment: 1,
    // 轮播图的高度 
    // Options: false or positive integer. 值：false或正整数
    // false = height is calculated using 设为false自动计算高度
    // maximum slide heights.最大高度
    stageHeight: false,
    // 同时在屏幕上可见的轮播图图片数量
    // Options: false or positive integer. 值：false或正整数
    // false = Fit as many as possible. false为自适应
    slidesOnStage: 1,
    // 连续运动-轮播图在同一个方向上无限循环 
    // true = slides loop in one direction if possible.
    slidesContinuous: true,
    // 当前轮播图在屏幕上的位置：left, center, right 
    // Options: 'left', 'right', 'center'.
    slidePosition: 'left',
    // 轮播图开始播放的位置. 
    // Options: 'beg', 'mid', 'end' 
    // or slide number starting at 1 - '1','2', etc.
    slideStart: 'beg',
    // 当前slide的宽度，单位px 
    // Options: false or positive integer. 值：false或正整数
    // false = width is the maximum of 设为false时为最大宽度
    // the existing slide widths.
    slideWidth: false,
    // 当前slide的缩放因子-其它图片会相应缩小
    // of the current slide
    // other slides are scaled down. 
    // Options: positive number 100 or higher. 
    // 100 = No scaling.
    slideScaling: 100,
    // slide的垂直偏移
    // as a percentage of slide height. 
    // Options: positive or negative number. 
    // Neg value = up. Pos value = down. 
    // 0 = No offset.
    offsetV: 0,
    // slide中的内容垂直居中
    // Boolean.
    centerV: false,
    // 原点导航按钮是否可用
    // Boolean.
    navList: true,
    // 箭头导航按钮是否可用
    // Boolean.
    navButtons: true,
    // 箭头导航一直显示
    // except when transitioning - Boolean.
    navButtonsShow: false,
    // 箭头导航按钮的透明度 
    // button navigation when not transitioning. 
    // Options: Number between 0 and 1. 
    // 0 (transparent) - 1 (opaque).
    navButtonsOpacity: 0.5,
    // 轮播图随机顺序
    // Boolean.
    randomize: false,
    // 轮播图加载后的回调函数
    // called when slides have loaded.
    slidesLoaded: false,
    // 轮播图过渡动画前的回调函数
    // call back function - called before 
    // the slide transition.
    beforeTrans: false,
    // 轮播图过渡动画完成之后的回调函数
    // call back function - called at the end 
    // of a slide transition.
    afterTrans: false,
    // Stage元素上的class名称
    // to the stage element.
    classStage: 'mis-stage',
    // The CSS class that will be Slider元素上的class名称
    // applied to the slider element.
    classSlider: 'mis-slider',
    // The CSS class that will be 每一个Slide元素上的class名称
    // applied to each slide element.
    classSlide: 'mis-slide',
    // The CSS class that will be 箭头导航按钮元素上的class名称
    // applied to the parent of the 
    // prev and next button navigation elements.
    classNavButtons: 'mis-nav-buttons',
    // The CSS class that will be 圆点导航按钮上的class名称
    // applied to the parent of the 
    // numbered list navigation elements
    classNavList: 'mis-nav-list',
    // The selector used to select 用于选择轮播图的选择器
    // the slider element
    // Descendant of the stage
    selectorSlider: 'ol',
    // The selector used to select 用于选择每一个Slide的选择器
    // each slide element
    // Descendant of the slider
    selectorSlide: 'li'
   });
  });

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of JS JQuery dynamic operation table row method

jQuery implementation of text button special effects collection in the form

The above is the detailed content of jQuery creates responsive image carousel effect. For more information, please follow other related articles on the PHP Chinese website!