Lightweight Overlay Content Slider Plugin For jQuery
File Size: | 6.39 KB |
---|---|
Views Total: | 2846 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.