Just Another Simple jQuery Image Slider Plugin smSlider - Download Just Another Simple jQuery Image Slider Plugin - smSlider

Download Just Another Simple jQuery Image Slider Plugin – smSlider

By Posted on

This time I will share jQuery Plugin and tutorial about Just Another Simple jQuery Image Slider Plugin – smSlider, hope it will help you in programming stack.

Just Another Simple jQuery Image Slider Plugin smSlider - Download Just Another Simple jQuery Image Slider Plugin - smSlider
File Size: 9.1 KB
Views Total: 4667
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

smSlider is a lightweight and flexible jQuery image slider/slideshow plugin that features transition/easing animations, auto play, thumbnails, dots/arrows navigation and much more.

Basic Usage:

1. Include the smslider.css file for the basic slider styles.

view source
1 <link rel="stylesheet" type="text/css" href="smslider.css" />

2. Include the jQuery javascript library and jQury smSlider plugin at the end of the html document.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2 <script type="text/javascript" src="jquery.smslider.min.js"></script>

3. The markup for creating a image slider with thumbnails navigation.

view source
01 <div id="wrapper">
02 <div id="demo">
03 <ul>
04 <li> <img src="images/large/1.jpg" /> </li>
05 <li> <img src="images/large/2.jpg" /> </li>
06 <li> <img src="images/large/3.jpg" /> </li>
07 <li> <img src="images/large/4.jpg" /> </li>
08 <li> <img src="images/large/5.jpg" /> </li>
09 </ul>
10 </div>
11 <div id="sm_submenu">
12 <div class="sm_submenu-item" data-index="0"> <img src="images/1.jpg" /><span class="year">1935</span>
13 <div class="sm_submenu-description">Image One</div>
14 </div>
15 <div class="sm_submenu-item" data-index="1"> <img src="images/2.jpg" /><span class="year">1931</span>
16 <div class="sm_submenu-description">Image Two</div>
17 </div>
18 <div class="sm_submenu-item" data-index="2"> <img src="images/3.jpg" /><span class="year">1937</span>
19 <div class="sm_submenu-description">Image Three</div>
20 </div>
21 <div class="sm_submenu-item" data-index="3"> <img src="images/4.jpg" /><span class="year">1933</span>
22 <div class="sm_submenu-description">Image Four</div>
23 </div>
24 <div class="sm_submenu-item last" data-index="4"> <img src="images/5.jpg" /><span class="year">1938</span>
25 <div class="sm_submenu-description">Image Five</div>
26 </div>
27 </div>
28 </div>

4. Call the plugin with default options.

view source
01 <script type="text/javascript">
02 $(document).ready(function(){
03 $('#demo').smSlider({
04 namespace : 'sm', // namespace
05 start : 0, // start with element:
06 transition: 'animate', // 'animate' or 'fader'
07 activeClass : 'active',
08 autoArr : true, // auto generating control buttons
09 innerBlock: 'sm_slider-inner',
10 prev : 'sm_prev', // class of prevent control button
11 next : 'sm_next', // class of next control button
12 children : 'sm_slide',
13 pagination: true, // turn on pagination buttons
14 typeCtrl : 'dots', // 'dots' or 'numeric'
15 sub<a href="https://www.jqueryscript.net/menu/">Menu</a> : false, // turn on additional controls
16 subMenuClass : 'sm_submenu-item', // css class for additional controls
17 autoPlay : false,
18 delay : 5000,
19 hoverPause: true, // pause on hover
20 easing : 'swing', // 'swing' or 'linear'
21 duration : 600,
22 flexible : false, // width in persents
23 animationStart : function(){},
24 animationComplete : function(){}
25 })
26 });
27 </script>

Change logs:

2015-08-12

  • bugfix

2014-09-15

  • add sass, namespace, cycles reverse

This awesome jQuery plugin is developed by sashamochalin. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: