Switchable slider based on jQuery slideshow module plugin that allows you to create automatic banner rotator with lots of customization options.
jquery banner slider free download, jquery slider carousel, responsive banner slider jquery, draggable image slider jquery, jquery image slider code
How to make use of it:
1. Upload the jQuery library or jQuery switchable plugin
to your web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="lib/switchable.js"></script>
2. Wrap your HTML content in a slide show as follows. Note that you have to use the data-src
attribute to hold your images.
<div class="g_slide" id="slides"> <div class="switch_main"> <a class="item switch_item" href="#"><img data-src="1.jpg"></a> <a class="item switch_item" href="#"><img data-src="2.jpg"></a> <a class="item switch_item" href="#"><img data-src="3.jpg"></a> </div> </div>
3. Required CSS to design the slideshow.
.g_slide { position: relative; width: 698px; height: 235px; overflow: hidden; } .g_slide .item { display: none; position: absolute; left: 0; top: 0; } .switch_main { position: relative; } .g_slide .switch_nav { width: 100%; position: absolute; right: 0; bottom: 10px; z-index: 11; text-align: center; } .g_slide .switch_nav_item { display: inline-block; margin: 0 10px 0 0; width: 13px; height: 13px; line-height: 200px; overflow: hidden; font-size: 0; border-radius: 100%; background: #b7b7b7; text-align: center; font-size: 18px; color: #fff; } .g_slide .switch_nav_item:hover { text-decoration: none; } .g_slide .switch_nav_item_current { background: #eb6100; } .g_slide .prev, .g_slide .next { position: absolute; top: 50%; z-index: 10; margin-top: -15px; width: 18px; height: 30px; overflow: hidden; background: url(slide.png) no-repeat; transition: margin-left .3s ease, margin-right .3s ease; } .g_slide .prev { left: -18px; _left: 10px; } .g_slide .next { right: -18px; _right: 10px; background-position: -19px 0; } .g_slide .prev:hover { background-position: 0 -70px; } .g_slide .next:hover { background-position: -19px -70px; } .g_slide:hover .prev { margin-left: 28px; } .g_slide:hover .next { margin-right: 28px; }
4. Create a slideshow.
switchable({ $element: $('#slides'), // MORE OPTIONS HERE });
5. Plugin options.
// imgScroll or leave blank type: '', // number of items per one slide imgScroll: { num: 2 } // transition effect effect: 'slide', // show next / prev navigation arrows showNav: true, // show pagination showPage: true, // callback functions callback: { loaded: function () { }, start: function () { }, complete: function () { } }, // animation speed animateSpeed: 500, // transition interval interval: 2000, // restart delay restartDelay: 2000, // pause autoplay on mouse hover pauseOnHover: true, // delay the loading of images loadImg: true, // enable autoplay autoPlay: true, // CSS classes switchNavEvent: 'click', switchMainClass: 'switch_main', switchItemClass: 'switch_item', pageClass: 'switch_page', pageItemClass: 'switch_page_item', navClass: 'switch_nav', navItemClass: 'switch_nav_item', navCurrentClass: 'switch_nav_item_current', mixClass: 'item'
6. Use with required.
<script src="lib/require.js"></script>
require.config({ paths: { 'jquery': 'lib/jquery', 'switchable': 'lib/switchable' } }); require(['jquery', 'switchable'], function($, switchable){ switchable({ $element: $('#slides'), // MORE OPTIONS HERE }); });
lightweight banner slideshow rotator Plugin/Github
See Demo And Download
Official Website(fhqdgv): Click Here
This superior jQuery/javascript plugin is developed by fhqdgv. For extra advanced usage, please go to the official website.
Be First to Comment