Minimalist jQuery Image Slider / Slideshow Plugin - slidethrough

slidethrough is a basic jQuery slider / slideshow plugin which enables you to slide (or fade) through a group of images by clicking on the left or right side of the current image.

How to use it:

1. Insert your images into DIV elements and wrap them together with the next / prev navigation into a container element.

<div class="slideshow">
  
  <!-- Slide holder -->
  <div class="slideshowinner">
    <div class="slide">
      <img src="1.jpg">
    </div>
    <div class="slide">
      <img src="2.jpg">
    </div>
    <div class="slide">
      <img src="3.jpg">
    </div>
  </div>
  
  <!-- Slideshow buttons -->
  <a href="#" class="btn sbtn prev">Previous</a>
  <a href="#" class="btn sbtn next">Next</a>      
  
</div>

2. Put jQuery library and the jQuery slidethrough plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.slidethrough.js"></script>

3. Include the jQuery easing plugin for more easing effects (Optional).

<script src="jquery.easing.min.js"></script>

4. Initialize the plugin and we're ready to go.

$(".slideshow").slideThrough();

5. Apply your own CSS styles to the slider.

.slideshow {
  width: 640px;
  height: 426px;
  position: relative;
  overflow: hidden;
}

.slide, .slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.slide { height: 100%; }

.slide img {
  display: block;
  z-index: 1;
}

.sbtn {
  position: absolute;
  cursor: pointer;
  text-indent: -99999px;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
  z-index: 10;
}

.sbtn.next { right: 0; }

.sbtn.prev { left: 0; }

6. Configuration options with default values.

$(".slideshow").slideThrough({

  // animation speed in ms
  speed: 300,

  // easing effect
  easing: "linear",

  // width of the slider
  width: "",

  // 'slide' or 'fade'
  fx: "slide"
  
});

---

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