Basic jQuery Content Carousel Slider with Tabbed Nav - jwgSlider

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.