Multi-Style jQuery Image Carousel Plugin - Oka Slider
File Size: | 1.14 MB |
---|---|
Views Total: | 4086 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Oka Slider is a jQuery plugin for creating a fully responsive image carousel that comes with more than ten different slider types.
How to use it:
1. Import jQuery library and the jQuery Oka Slider plugin's files into your document.
<link rel="stylesheet" href="css/oka_slider_model.css"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="js/oka_slider_model.js"></script>
2. Markup Html structure.
<div class="slider_model"> <div class="slider_model_box"> <img src="1.jpg" title="Caption1" alt="Long Description"> <img src="2.jpg" title="Caption2" alt="Long Description"> <img src="3.jpg" title="Caption3" alt="Long Description"> <img src="4.jpg" title="Caption4" alt="Long Description"> <img src="5.jpg" title="Caption5" alt="Long Description"> <img src="6.jpg" title="Caption6" alt="Long Description"> <img src="7.jpg" title="Caption7" alt="Long Description"> <img src="8.jpg" title="Caption8" alt="Long Description"> </div> </div>
3. Active the image carousel slider.
$('.slider_model').oka_slider_model();
4. Customize the image carousel slider.
$('.slider_model').oka_slider_model({ // slider type. 0~9 'type': 1, // animation speed 'animateSpeed': 300, // autoplay interval 'speed': 5000 });
This awesome jQuery plugin is developed by okaoka0709. For more Advanced Usages, please check the demo page or visit the official website.