Small Cross-browser Slideshow Plugin For jQuery - offbeatSlider
File Size: | 13.3 KB |
---|---|
Views Total: | 2506 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

offbeatSlider is a small, responsive, cross-browser jQuery carousel/slideshow plugin where the slides (images or text) fade to next one when you click on the navigation & pagination controls. Also supports autoplay mode that allows to automatically fade through slides at a certain speed.
How to use it:
1. Add jQuery library and the jQuery offbeatSlider plugin's files to the webpage.
<link rel="stylesheet" href="css/offbeat-slider.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="js/offbeat-slider.js"></script>
2. Add your own slide content (images+text) together with the image descriptions and navigation & pagination controls to the webpage.
<div class="ofp-slider"> <div class="ofp-slides ofp-slides-text"> <p style="font-size: 4em;"> The <br/> first <br/> slide </p> </div> <div class="ofp-slides"> <img src="2.jpg"> <p class="ofp-top-middle" style="color: #efefef; font-size: 1em; font-weight: bold;"> Description for the picture </p> </div> <img class="ofp-slides" src="3.jpg"> <img class="ofp-slides" src="4.jpg"> <div class="ofp-slider-navigation ofp-top-left"> <div class="ofp-arrow-left">❰</div> <div class="ofp-arrow-right">❱</div> </div> <div class="ofp-slider-navigation ofp-center ofp-bottom-middle"> <span class="ofp-slider-dots"></span> <span class="ofp-slider-dots"></span> <span class="ofp-slider-dots"></span> <span class="ofp-slider-dots"></span> </div> </div>
3. Initialize the plugin to generate a default slideshow.
$(".ofp-slider").offbeatSlider();
4. Here is a list of default options to customize the slideshow plugin.
$(".ofp-slider").offbeatSlider({ // start index slideStartIndex: 1, // enable animation animate: true, // autoplay? carousel: false, // autoplay delay carouselDelay: 3000, // animation duration duration: 1000, // easein, linear, ... easing: "linear" });
Change log:
2017-10-23
- Fixed carousel timer.
2017-04-27
- CSS update: slider dots and arrows are now bigger when displayed on a smaller screen
This awesome jQuery plugin is developed by PioBeat. For more Advanced Usages, please check the demo page or visit the official website.