Basic Horizontal & Vertical Carousel Plugin For jQuery - jgSlider

jgSlider is a lightweight, flexible, easy-to-style jQuery carousel/slider plugin that supports side or bottom thumbnail navigation, horizontal or vertical scrolling, custom navigation controls and many more.

Basic usage:

1. To get started, first you need to load both jQuery library and the jQuery jqSlider plugin's script in the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jgSlider.js></script> 

2. Then initialize the plugin and we're ready to go.

$(".jg-slider").jgSlider();

3. Create a basic image carousel with numeric pagination and prev/next navigation controls:

<div class="jg-slider">
  <div class="big">
    <ul>
      <li class="current"><a href=""><img src="0.jpg"></a></li>
      <li><a href=""><img src="1.jpg"></a></li>
      <li><a href=""><img src="2.jpg"></a></li>
      <li><a href=""><img src="3.jpg"></a></li>
      <li><a href=""><img src="4.jpg"></a></li>
      <li><a href=""><img src="5.jpg"></a></li>
      <li><a href=""><img src="6.jpg"></a></li>
      <li><a href=""><img src="7.jpg"></a></li>
    </ul>
  </div>
  <div class="small">
    <ul>
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </div>
  <a class="prev" href="javascript:;"></a>
  <a class="next" href="javascript:;"></a>
</div>

.jg-slider {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 330px;
  margin: 10px 0 0 10px
}

.jg-slider .big {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 330px;
}

.jg-slider .big ul { }

.jg-slider .big ul li {
  width: 800px;
  height: 330px;
}

.jg-slider .big ul li img {
  width: 100%;
  height: 100%
}

.jg-slider .small {
  position: absolute;
  right: 40px;
  bottom: 10px
}

.jg-slider .small ul { }

.jg-slider .small ul li {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 30px;
  background-color: #039;
  color: #fff;
  cursor: pointer
}

.jg-slider .small ul li.current { background-color: #f00; }

.jg-slider .prev, .jg-slider .next {
  display: block;
  width: 40px;
  height: 60px;
  background: #FF0;
  color: #fff;
  position: absolute;
  top: 50%;
  margin-top: -30px
}

.jg-slider .prev:hover, .jg-slider .next:hover { background: #f00 }

.jg-slider .prev { left: 40px }

.jg-slider .next { right: 40px }

4. Create a horizontal image carousel with a bottom thumbnail navigation:

<div class="jg-slider1">
  <div class="big">
    <ul>
      <li class="current"><a href=""><img src="0.jpg"></a></li>
      <li><a href=""><img src="1.jpg"></a></li>
      <li><a href=""><img src="2.jpg"></a></li>
      <li><a href=""><img src="3.jpg"></a></li>
    </ul>
  </div>
  <div class="small">
    <ul>
      <li class="current"><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
    </ul>
  </div>
</div>

.jg-slider1 {
  position: relative;
  width: 800px;
  height: 330px;
  margin: 10px 0 10px 10px
}

.jg-slider1 .big {
  position: relative;
  overflow: hidden;
  width: 800px;
  height: 330px;
}

.jg-slider1 .big ul { }

.jg-slider1 .big ul li {
  width: 800px;
  height: 330px;
}

.jg-slider1 .big ul li img {
  width: 100%;
  height: 100%
}

.jg-slider1 .small { margin-top: 5px }

.jg-slider1 .small ul { }

.jg-slider1 .small ul li {
  display: inline-block;
  float: left;
  width: 196px;
  height: 60px;
  border: 2px solid #ccc;
  cursor: pointer
}

.jg-slider1 .small ul li img {
  width: 100%;
  height: 100%
}

.jg-slider1 .small ul li.current { border-color: #f00 }

5. Create a vertical image carousel with a side navigation thumbnail.

<div class="jg-slider2">
  <div class="big">
    <ul>
      <li class="current"><a href=""><img src="0.jpg"></a></li>
      <li><a href=""><img src="1.jpg"></a></li>
      <li><a href=""><img src="2.jpg"></a></li>
      <li><a href=""><img src="3.jpg"></a></li>
    </ul>
  </div>
  <div class="small">
    <ul>
      <li class="current"><img src="0.jpg"></li>
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>
    </ul>
  </div>
</div>

.jg-slider2 {
  position: relative;
  width: 800px;
  height: 256px;
  margin: 10px 0 10px 10px
}

.jg-slider2 .big {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 256px;
  float: left
}

.jg-slider2 .big ul { }

.jg-slider2 .big ul li {
  width: 600px;
  height: 256px;
}

.jg-slider2 .big ul li img {
  width: 100%;
  height: 100%
}

.jg-slider2 .small { float: right }

.jg-slider2 .small ul { }

.jg-slider2 .small ul li {
  display: block;
  width: 196px;
  height: 60px;
  border: 2px solid #ccc;
  cursor: pointer
}

.jg-slider2 .small ul li img {
  width: 100%;
  height: 100%
}

.jg-slider2 .small ul li.current { border-color: #f00 }

6. All possible plugin options to customize the carousel.

$(".jg-slider").jgSlider({
  effect:"left", // or "top"
  navName:(".small"),
  navCurClassName:("current"),
  mainName:(".big"),
  mainCurClassName:("current"),
  prevName:(".prev"),
  nextName:(".next"),
  mouseOverStop:true,
  defaultPlay:true,
  defaultPlayTime:3000,
});

---

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