Basic jQuery Content Carousel Slider with Tabbed Nav - jwgSlider
File Size: | 41.3 KB |
---|---|
Views Total: | 10384 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jwgSlider is a lightweight yet fully customizable jQuery plugin allows you to switch between content slides with arrows or tabs navigation.
Features:
- The plugin will automatically stretch to fit it's container.
- Allows to infinitely cycle through a series of content slides.
- CSS3 transition powered animations.
- Fully styleable via CSS.
Basic Usage:
1. Load the required stylesheets in your document.
<link rel="stylesheet" href="basic.css"> <link rel="stylesheet" href="theme.css">
2. Load the jQuery jwgSlider plugin's script after jQuery library.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/JwgSlider.min.js"></script>
3. Create the Html for a content carousel slider.
<div class="jwg_slider_module" style="height:350px"> <div class="arrow_navigation"> <div class="left"> <p>◀</p> </div> <div class="right"> <p>▶</p> </div> </div> <div class="slides"> <div class="slide"> <p>Slide 1 Content</p> </div> <div class="slide"> <p>Slide 2 Content</p> </div> <div class="slide"> <p>Slide 3 Content</p> </div> </div> <div class="tabbed_navigation"> <ul> <li> <p>Slide 1 Tab</p> </li> <li> <p>Slide 2 Tab</p> </li> <li> <p>Slide 3 Tab</p> </li> </ul> </div> </div>
4. Initialize the plugin by calling the function jwgSlider(NAVIGATION, SPEED);
on the slider container.
- Navigation: tabs, arrows or both
- Speed: animation speed in ms
$('.jwg_slider_module').jwgSlider('both', 400);
This awesome jQuery plugin is developed by joewgwynn. For more Advanced Usages, please check the demo page or visit the official website.