Basic Content Carousel Slider Plugin With jQuery - gaBasicSlider

gaBasicSlider is a jQuery plugin for creating an infinite carousel slider that each new content slides over the previous one. With support for custom animations, indicators and next/prev navigation buttons.

Basic Usage:

1. Place the jQuery JavaScript library and the jQuery gaBasicSlider plugin at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="ga-basic-slider-min.js"></script>

2. Add your content to the slider following the Html structure as shown below.

<div id="example" class="slider">
  <div>
    <h2>Title 1</h2>
    <p>Description 1</p>
  </div>
  <div>
    <h2>Title 2</h2>
    <p>Description 2</p>
  </div>
  <div>
    <h2>Title 3</h2>
    <p>Description 3</p>
  </div>
</div>

3. Initialize the plugin to create a basic content carousel slider.

$(document).ready(function(){         
  $('#example').gaBasicSlider();
});

4. All the default settings.

// enable auto rotation
animate: true,

// animation delay time
animationDelay: 6000,

// animation duration time
animationTime: 300,

// CSS selector for custom indicator
indicators: null,

// CSS selector for custom next button
btnNext: null,

// CSS selector for custom previous button
btnPrevious: null

4. Public methods to control the slider.

// turn animation off
$('#example').gaBasicSlider('stop'); 

// turn animation on
$('#example').gaBasicSlider('start');;

Change log:

v0.0.4 (2015-04-15)

• Bug fixes

v0.0.3 (2015-04-12)

• Bug fixes

---

This awesome jQuery plugin is developed by gregartist. For more Advanced Usages, please check the demo page or visit the official website.