Zepto content Sliding Plug-ins: zepto.hwSlider.js usage examples

Zepto, because of its small size, provides almost the same API as jquery, and it does replace the huge jquery library at the mobile end. Then the development of Zepto Plug-ins and jquery plug-ins a little different, Jquery.hwSlide.js plug-in package based on the jquery version of the plug-in to Zepto version.

Html

The HTML section is simple, a slider list #hwslider.

The code is as follows	Copy Code
<div id= "Hwslider" class= "Hwslider" > <ul> <li class= "Active" ></li> <li><a href= "#" ></a></li> <li></ul> </div>

Load the Zepto library file and plug-in JS in the page, and then invoke the plugin.

The code is as follows	Copy Code
<script src= "/zepto/1.1.4/zepto.min.js" ></script> <script src= "Js/zepto.hwslider.js" ></script> <script> $ (function () { $ ("#hwslider"). Hwslider ({ Autoplay:false,//whether to play automatically Dotshow:true,//whether to show dot navigation Touch:true//Whether to support touch sliding screen switching }); }); </script>

Css

The most basic CSS is provided here, and the slider content is nicely laid out.

The code is as follows

Copy Code

. hwslider{width:100%;height:auto;min-width:280px;min-height:160px;margin:20px auto; position:relative; overflow: Hidden;} . Hwslider ul{width:100%; height:100% position:absolute; Z-index:1} . hwslider ul Li{display:none;position:absolute; left:0; top:0; width:100%;height:100%; overflow:hidden;} . Hwslider ul Li.active{display:block;} . hwslider ul li img{width:100%;max-width:100%; height:auto;display:block} Dots{position:absolute; bottom:20px; left:200px; min-width:60px; height:12px; z-index:2;} . dots span{float:left; width:12px;height:12px; border:1px solid #fff; border-radius:50%; background: #333; margin-righ t:8px; Cursor:pointer;} . Dots span.active{background:orangered} Arr{display:none;position:absolute; top:140px; z-index:2;width:40px; height:40px; line-height:38px; text-align:cen ter;; font-size:36px; Background:rgba (0,0,0,.3); Color: #fff; Text-decoration:none} . Arr:hover{background:rgba (0,0,0,.7); text-decoration:none;} . Hwslider:hover. Arr{display:block text-decoration:none;color: #fff} . prev{left:20px} . next{right:20px}

So what I'm going to explain here is that Zepto is generally used on the mobile side, and Zepto also provides animate animation functions like jquery, but it is said that the new energy is poor and requires additional calls. So at the moving end of the animation effect we advocate the use of CSS3 animation to achieve.
The combination of CSS3 animate and key frame animation keyframes can achieve excellent animation effect.

The code is as follows

Copy Code

. movein_right{ -webkit-animation:slidein_right 5s forwards Ease-in; Animation:slidein_right 5s forwards Ease-in; } . moveout_right{ -webkit-animation:slideout_right 5s forwards Ease-in; Animation:slideout_right 5s forwards Ease-in; } . movein_left{ -webkit-animation:slidein_left 5s forwards Ease-in; Animation:slidein_left 5s forwards Ease-in; } . moveout_left{ -webkit-animation:slideout_left 5s forwards Ease-in; Animation:slideout_left 5s forwards Ease-in; } @-webkit-keyframes slidein_left{ from { -webkit-transform:translatex (-100%); } to { -webkit-transform:translatex (0); } } @keyframes Slidein_left { from { -webkit-transform:translatex (-100%); Transform:translatex (-100%); } to { -webkit-transform:translatex (0); Transform:translatex (0); } } @-webkit-keyframes slideout_left{ from { -webkit-transform:translatex (0); } to { -webkit-transform:translatex (100%); } } @keyframes Slideout_left { from { -webkit-transform:translatex (0); Transform:translatex (0); } to { -webkit-transform:translatex (100%); Transform:translatex (100%); } } @-webkit-keyframes slidein_right{ from { -webkit-transform:translatex (100%); } to { -webkit-transform:translatex (0); } } @keyframes Slidein_right { from { -webkit-transform:translatex (100%); Transform:translatex (100%); } to { -webkit-transform:translatex (0); Transform:translatex (0); } } @-webkit-keyframes slideout_right{ from { -webkit-transform:translatex (0); } to { -webkit-transform:translatex (-100%); } } @keyframes Slideout_right { from { -webkit-transform:translatex (0); Transform:translatex (0); } to { -webkit-transform:translatex (-100%); Transform:translatex (-100%); } } Zepto

Then, when implementing the slider switch, we add the left and right sliding animation class in the CSS to the corresponding slider element through the Zepto addclass () method. Also need to note is zepto under the gesture Touch screen event Touchstart and touchend slightly to be dealt with.