Tiny jQuery Content Carousel / Slider Plugin - jSlider

Yet another jQuery based content carousel / slider where you're able to navigate between slides by clicking on the navigation arrows or hovering the pagination dots.

How to use it:

1. The essential html structure for the slider.

<div class="mySlider">
  <div class="slide-wrapper">
    <div class="slide" style="background:#111;"></div>
    <div class="slide" style="background:#999;"></div>
    <div class="slide" style="background:#ddd;"></div>
  </div>
  <div class="slide-prev"></div>
  <div class="slide-next"></div>
  <div class="pagination">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

2. Load the necessary JavaScript files at the end of the html document.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="jslider.jquery.js"></script>

3. Initialize the slider.

var jSlider = new JSlider('.mySlider',{
    nextButton: '.slide-next',
    prevButton: '.slide-prev',
    pagination: '.pagination'
});

4. Apply your own CSS styles to the slider and it's controls.

.mySlider {
  position: relative;
  width: 640px;
  height: 360px;
  margin: auto;
  font-size: 0;
  overflow: hidden;
}

.slide-wrapper {
  position: relative;
  height: 100%;
}

.slide {
  width: 640px;
  height: 100%;
  display: inline-block;
}

.slide-prev, .slide-next {
  position: absolute;
  top: 50%;
  width: 17px;
  height: 30px;
  z-index: 999;
  margin-top: -15px;
  cursor: pointer;
}

.slide-prev {
  background: url(imgs/arrows.png) no-repeat left top;
  left: 10px;
  background-color: rgba(0,0,0,.5);
}

.slide-next {
  background: url(imgs/arrows.png) no-repeat left bottom;
  right: 10px;
  background-color: rgba(0,0,0,.5);
}

.pagination {
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.pagination span {
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  display: inline-block;
  margin: 0 3px;
  border-radius: 7px;
  cursor: pointer;
}

.pagination span.pagination-active { background: #fff; }

---

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