Lightweight Overlay Content Slider Plugin For jQuery

myContentSlider is a simple, lightweight, automatic jQuery carousel slider plugin which slides through a list of html content with a smooth CSS3 powered transition effect.

How to use it:

1. Create a list of html content for the carousel slider. You can specify the individual slide duration for each slide using data-duration attribute.

<ul id="slideshow" class="slides">
  <li data-duration="5000" class="active">
    <div class="slide-content">
      Slide Content 1
    </div>
  </li>
  <li data-duration="3000">
    <div class="slide-content">
      Slide Content 2
    </div>
  </li>
  <li data-duration="1000">
    <div class="slide-content">
      Slide Content 3
    </div>
  </li>
</ul>

2. Include the JavaScript file slider.js after jQuery library, but before the closing body tag.

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

3. Initialize the carousel slider.

$('#slideshow').dsSlider();

4. The required CSS/CSS3 styles for the carousel slider. Add the following CSS snippets into your CSS file.

ul.slides {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.slides li {
  margin: 0;
  background: rgba(10, 10, 90, 0.5);
  padding: 10%;
  color: #fff;
  font-size: 18rem;
  font-weight: bold;
  display: flex;
  align-content: center;
  justify-content: center;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  transition: transform 1.4s cubic-bezier(0.01, 1, 0.91, 1) 0.5s;
}
 @media all and (max-width: 760px) {

ul.slides li { font-size: 20vw; }
}

ul.slides li.active { z-index: 10; }

ul.slides li.active.slide-left { transform: translate3d(100%, 0, 0); }

ul.slides li.active.slide-right { transform: translate3d(-100%, 0, 0); }

ul.slides li.last-active { z-index: 9; }

ul.slides li:first-child {
  left: 0;
  opacity: 1;
}

5. Override the default plugin settings as displayed below.

$('#slideshow').dsSlider({
  duration: 10000, // in ms
  direction: "right" // or 'left'
});

---

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