Basic Content Carousel Slider Plugin With jQuery - gaBasicSlider

Basic Content Carousel Slider Plugin With jQuery - gaBasicSlider
File Size: 19.5 KB
Views Total: 2080
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="//"></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">
    <h2>Title 1</h2>
    <p>Description 1</p>
    <h2>Title 2</h2>
    <p>Description 2</p>
    <h2>Title 3</h2>
    <p>Description 3</p>

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


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

// turn animation on

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.