Small Cross-browser Slideshow Plugin For jQuery - offbeatSlider

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">&#10096;</div>
      <div class="ofp-arrow-right">&#10097;</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.