Minimalist jQuery Image Slider / Slideshow Plugin - slidethrough

Minimalist jQuery Image Slider / Slideshow Plugin - slidethrough
File Size: 6.41 KB
Views Total: 1348
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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 class="slide">
      <img src="2.jpg">
    <div class="slide">
      <img src="3.jpg">
  <!-- Slideshow buttons -->
  <a href="#" class="btn sbtn prev">Previous</a>
  <a href="#" class="btn sbtn next">Next</a>      

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

<script src="//"></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.


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;
} { right: 0; }

.sbtn.prev { left: 0; }

6. Configuration options with default values.


  // 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.