Generic Content Slideshow / Carousel Plugin with jQuery - jUsualSlider

jUsualSlider is a responsive, cross-browser and mobile-friendly jQuery slider / slideshow / carousel plugin that slides automatically or manually through a list of any html content with smooth CSS3 transition effects.

How to use it:

1. Load jQuery JavaScript library and the jQuery usualSlider.js script in your project.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="/path/to/usualSlider.js"></script>

2. Add a list of slides to the slider.

<div class="slider demo">
  <ul class="slider__list">
    <li class="slider__item">1</li>
    <li class="slider__item">2</li>
    <li class="slider__item">3</li>
  </ul>
</div>

3. The basic styles for the slider.

.slider {
  height: 25vh;
  position: relative;
  overflow: hidden;
}

.slider__list {
  list-style-type: none;
  position: relative;
  height: 100%;
  transition: left 0s ease 0s;
}

.slider__item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

4. The optional CSS styles for the arrows & bullets navigation.

.slider__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.2);
  width: 15vh;
  cursor: pointer;
  transition: background-color 0.3s ease 0s;
}

.slider__nav:hover { background: rgba(255, 255, 255, 0.5); }

.slider__nav:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-color: #cba867;
  border-style: solid;
  width: 3vh;
  height: 3vh;
  margin: -1.5vh 0 0 -1.5vh;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.slider__nav_left { left: 0; }

.slider__nav_left:before { border-width: 0 0 1vh 1vh; }

.slider__nav_next { right: 0; }

.slider__nav_next:before { border-width: 1vh 1vh 0 0; }

.slider__tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}

.slider__tabs__item {
  border-radius: 50%;
  background: #aaa;
  display: inline-block;
  vertical-align: top;
  width: 2.5vh;
  height: 2.5vh;
  margin: 2vh;
  cursor: pointer;
}

.slider__tabs__item_active { background: #fff; }

5. Initialize the slider.

$('.demo').jUsualSlider();

6. Default options & callback events for the slider.

$('.demo').jUsualSlider({

  // values
  activeIndx: 0,
  animationTime: 500,
  timerTime: 5000,
  slidesPerPage: 1,
  autoSlide: true,

  // elements
  slideClass: 'slider__item',
  btns: $('.slider__btn'),
  tabs: false,
  tabsElems: null,

  // callbacks
  // will be performed when the sliding had ended
  afterSlide: null 

});

---

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