mobile-slider


mobile-slider is a slider zepto plugin for mobile device.view at github

DOWNLOAD

download from github

Demo

scan qrcode below to see the demo in your phone

vertical

mobile-slider

mobile-slider

mobile-slider

page 3

page 4

page 5

horizontal

mobile-slider

mobile-slider

mobile-slider

page 3

page 4

page 5

vertical, auto roll

mobile-slider

mobile-slider

mobile-slider

page 3

page 4

page 5

Features

  • support swipe(by zepto)
  • vertical and horizontal slider
  • beforeAction and afterAction callback
  • any dom element, image, div, a, ...
  • can auto roll

How to use

link it(use my customized zepto 'http://zxdong262.github.io/mobile-slider/dist/mobile-slider.min.js', or it might not work due to 'https://github.com/madrobby/zepto/issues/823')

<script src="http://zxdong262.github.io/mobile-slider/res/zepto.min.js"></script> 
<script src="http://zxdong262.github.io/mobile-slider/dist/mobile-slider.min.js"></script> 

html structure

<!-- mobile-slider units wrapper-->
<div id="slider">

  <!-- one mobile-slider unit -->
  <div>
    <h1 class="aligncenter">mobile-slider Demo</h1>
    <p class="aligncenter">a "response effect" slider jQuery plugin .</p>
  </div>
  <!-- /one mobile-slider unit -->

  <!-- one mobile-slider unit -->
  <img src="img/a.jpg" alt="" />
  <!-- /one mobile-slider unit -->

  <!-- one mobile-slider unit -->
  <div>
    <h2 class="aligncenter">page 3</h2>
  </div>
  <!-- /one mobile-slider unit -->

  <!-- one mobile-slider unit -->
  <div>
    <h2 class="aligncenter">page 4</h2>
  </div>
  <!-- /one mobile-slider unit -->

  <!-- one mobile-slider unit -->
  <a href="#" >
    <h2 class="aligncenter">page 5</h2>
  </a>
  <!-- /one mobile-slider unit -->

</div>
<!-- /mobile-slider units wrapper -->   

note:make sure the"mobile-slider units wrapper"haswidth,height, andpositionset,positionmust be set as"position:absolute", or"position:relative", or"position:fixed":

#slider {
  position:relative;
  width: 100%;
  height: 100%;
}
          

basic use

//scripts
$(function() {
  //init a slider 
  var sliderInstance = $('#slider').mobileSlider()
})
          

Custom options

//scripts
$(document).ready(function() {
    
    //options available
    var opts = {
      speed: 1000 //animation time
      ,timer: 4000 //time stops between auto roll
      ,autoSlider: false //auto slider
      ,hasNav: true //show nav buttons
      ,navEvent: true //click tap nav button trigger slider
      ,swipeEvent: true //swipe trigger slider
      ,hasVerticalTopNav: false //show vertical slider top nav button
      ,navLeftHtml: '«' //left nav button html
      ,navRightHtml: '»' //right nav button html
      ,navTopHtml: '∧' //top nav button html
      ,navBottomHtml: '∨' //bottom nav button html
      ,zIndex:20 //base index
      ,ease: 'linear'
      ,beforeAction: function() {
        this.$sliderItems.eq((this.currentPage + 1 + this.length) % this.length).css({
          opacity: 0.5
        })
      } //callback before slider fires, param ms()
      ,afterAction: function() {
        this.$sliderItems.eq(this.currentPage).css({
          opacity: 1
        })
      } //callback fater slider finish. param ms(MS instance)
      ,startIndex: 0 //start from index, start from 0
      ,vertical: true //is vertical slider
      ,hasIndicator: true //show Indicator
    }
    var sliderInstance = $('#slider').mobileSlider(opts)

})
          

exposed variables and functions

a mobile-slider instance will be like:

{
  currentPage: 1          //current show page
  ,defs: {
    speed: 1000 //animation time
    ,timer: 4000 //time stops between auto roll
    ,autoSlider: false //auto slider
    ,hasNav: true //show nav buttons
    ,navEvent: true //click tap nav button trigger slider
    ,swipeEvent: true //swipe trigger slider
    ,hasVerticalTopNav: false //show vertical slider top nav button
    ,navLeftHtml: '«' //left nav button html
    ,navRightHtml: '»' //right nav button html
    ,navTopHtml: '∧' //top nav button html
    ,navBottomHtml: '∨' //bottom nav button html
    ,zIndex:20 //base index
    ,ease: 'linear'
    ,beforeAction: function() {
      this.$sliderItems.eq((this.currentPage + 1 + this.length) % this.length).css({
        opacity: 0.5
      })
    } //callback before slider fires, param ms()
    ,afterAction: function() {
      this.$sliderItems.eq(this.currentPage).css({
        opacity: 1
      })
    } //callback fater slider finish. param ms(MS instance)
    ,startIndex: 0 //start from index, start from 0
    ,vertical: true //is vertical slider
    ,hasIndicator: true //show Indicator
  }
  ,timerhandler: 18952              //loop handler, you can clearTimeout(sliderInstance.timerhandler)
  ,lenth: 5                   //how many slider unit in the loop
  ,onAction: false          //the onAction flag, when the animation is on the go, onAction = true
  ,$wrap: b.fn.b.init[1]        //the jQuery object  which contains all the slider unit jQuery objects
  ,$sliderItems: b.fn.b.init[5]       //all the slider unit jQuery objects
  ,action: function (index, isNext) {...}        //core slider animation function, 
                                                  //index: the taget unit index, 
                                                  //isNext: the slider animation direction flag, true will go next frame
                                                  
  ,autoRoll: function (){...}                   //the auto roll function, you can call it by sliderInstance.autoRoll()
  ,destroy: function (){...}                    //destroy , you can call it by sliderInstance.destroy()
}
          

* note * the odd slider unit will get a "ms-odd" class, you can use it to better custom style.

Style it

page nav buttons, and slider unit should be proper styled, example css like below:

.ms-slider {
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
  display: block;
  background: #fff;
}
.ms-odd {
  background: #eee;
}
.ms-nav {
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 38px;
  display: inline-block;
  cursor: pointer;
  background: rgba(0,0,0,.1);
  border-radius: 40px;
  color: #888;
  text-align: center;
  font-size: 30px;
}
.ms-nav:hover {
  background: rgba(0,0,0,.2);
}

.ms-nav-prev {
  left: 2em;
  top: 50%;
  margin-top: -20px;
}
.ms-nav-next {
  right: 2em;
  top: 50%;
  margin-top: -20px;
}
.ms-vertical .ms-nav-prev {
  top: 1em;
  left: 50%;
  margin-left: -20px;
  margin-top: 0;
}
.ms-vertical .ms-nav-next {
  bottom: 1em;
  top: auto;
  left: 50%;
  margin-left: -20px;
  margin-top: 0;
}
.ms-hide-top-nav .ms-nav-prev {
  display: none;
}    
.ms-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
}
.ms-vertical .ms-dots {
  position: absolute;
  right: 10px;
  bottom: auto;
  top: 50%;
  left: auto;
}
.ms-dots .ms-dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #c5c5c5;
    background: #fff;
    margin: 0 8px;
    border-radius: 16px;
}
.ms-vertical .ms-dots .ms-dot {
    display: block;
    margin: 12px 0;
}
.ms-dots .ms-dot.on,
.ms-dots .ms-dot:hover {
    background: #c5c5c5;
}