Before choosing any plugin from internet its necessary to know about the uses and benefits. Here are the uses and benefits of the carousel slider which I am going to introduce with you.
Features:
- Its fully responsive.
- Usable for image, video and text based content.
- Multiple slider can use in single page.
- Next, Previous and Auto Rotate option.
The plugin needs jQuery1.7 + library becuae of using .on method to bind the events which you can use from CDN server.
Google CDN:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> </head>
Microsoft CDN:
<head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script> </head>Then you have to use 'responsiveCarousel.js' to make this slider work.
Please use download link from the page below to get this JS file with complete example file.
Here is the complete markup.
<div class="crsl-items"> <div class="crsl-wrap"> <figure class="crsl-item"> <img src="/path/to/image.jpg"> </figure> <figure class="crsl-item"> ... </figure> <figure class="crsl-item"> ... </figure> </div> </div>You can also use navigations bar to navigate the sliders.
<div id="NAV-ID" class="crsl-nav"> <a href="#" class="previous">Previous</a> <a href="#" class="next">Next</a> </div> <div class="crsl-items" data-navigation="NAV-ID"> ... </div>
Plugin script is called in $(document).ready() detection.
jQuery(document).ready(function($){
$('.crsl-items').carousel();
});
Please visit to the plugin site to get more details or download from here below.
No comments:
Post a Comment