Tiny Responsive Image Carousel In jQuery - Slider Auto

Slider Auto is a tiny and simple-to-use jQuery slider script (not a plugin) to generate a fully responsive image slider carousel with automatic slide transitions between slides.

How to use it:

1. Add images as slides to the carousel.

<div class="slider">
  <div class="slide-viewer">
    <div class="slide-group">
      <div class="slide slide-1">
        <img src="1.jpg" alt="slide_01" />
      </div>
      <div class="slide slide-2">
        <img src="2.jpg" alt="slide_02" />
      </div>
      <div class="slide slide-3">
        <img src="3.jpg" alt="slide_03" />
      </div>
      ... more slides here ...
    </div>
  </div>
  <div class="slide-buttons"></div>
</div>

2. The core styles for the carousel.

.slider {
  max-width: 940px;
  margin: 0px auto 30px auto;
}

.slide-viewer {
  position: relative;
  overflow: hidden;
  height: 430px;
}

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

.slide {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
}

.slide:first-child {
  display: block;
}

3. Style the pagination bullets.

.slide-buttons {
  text-align: center;
}

.slide-btn {
  border: none;
  background: none;
  color: #000;
  font-size: 200%;
  line-height: 0.5em;
}

.slide-btn.active, .slide-btn:hover {
  color: #009900;
  cursor: pointer;
}

4. Load the Slider Auto script after jQuery library. That's it.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/index.js"></script>

---

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