Basic Horizontal & Vertical Image Slider For jQuery - My Slider

A basic and customizable jQuery slider plugin which enables you to vertically or horizontally slide a couple of images with a simple dots navigation.

More features:

• Auto sliding on page loaded.
• Custom sliding speed and duration.
• 4 direction options: left, right, up or down.
• Carousel style endless looping.

How to use it:

1. Insert several images into your webpage. The markup structure should be like this.

<div id="slider-holder">
  <div class="slide"> <img src="images/universe_1.jpg" width="800" height="500" alt=""> </div>
  <div class="slide"> <img src="images/universe_2.jpg" width="800" height="500" alt=""> </div>
  <div class="slide"> <img src="images/universe_3.jpg" width="800" height="500" alt=""> </div>
  ...
  <div id="btn-nav-holder">
   <img src="images/bn-slide-on.png" width="8" height="8" alt=""> 
   <img src="images/bn-slide-off.png" width="8" height="8" alt=""> 
   <img src="images/bn-slide-off.png" width="8" height="8" alt=""> 
   ...
  </div>
</div>

2. The sample CSS for the image slider. Feel free to change or override the styles below to meet your business needs.

#slider-holder {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  height: 100%;
  max-height: 500px;
  overflow: hidden;
}

#slider-holder .slide {
  display: none;
  position: absolute;
  float: left;
  width: 100%;
  height: auto;
  max-height: 500px;
  font-size: 0px;
}

.slide .slide-img {
  position: relative;
  margin: 0;
  width: 100%;
  min-width: 320px;
  max-width: 800px;
  height: auto;
  max-height: 500px;
}

#slider-holder #btn-nav-holder {
  z-index: 20;
  position: absolute;
  bottom: 20px;
  left: 20px;
}

3. Include the necessary jQuery library and the jQuery my slider plugin at the bottom of your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/my-slider-1.0.0.js"></script>

4. Setup the image slider at the end of the my-slider-1.0.0.js. Params : g(Slide Holder), w(Slide), m(Slide Button Holder), n(Sliding Speed), p(horizontal or vertical), q(Timer Duration), f(left or right or up or down).

("slider-holder", "slide", "btn-nav-holder", 1E3, "horizontal", 4E3, "left");

---

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