Easy Responsive Content Slider With jQuery And CSS3
File Size: | 2.15 KB |
---|---|
Views Total: | 6890 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A responsive, fullscreen content slider that comes with a 'Zoom out' animation when transitioning between slides. Based on jQuery, SVG icon, CSS Flex box and CSS3 transitions & transforms.
How to use it:
1. Add html content together with the SVG based navigation arrows into the slider.
<div class="slide one"> <h2>Content here</h2> </div> <div class="slide two"> <h2>Content here</h2> </div> <div class="slide three"> <h2>Content here</h2> </div> <div class="slide four"> <h2>Content here</h2> </div> <div class="slide five"> <h2>Content here</h2> </div>
2. The CSS to position the navigation arrows.
svg { position: absolute; top: 50%; height: 5em; width: 5em; margin-top: -2.5em; cursor: pointer; } svg#next { right: 1em; } svg#previous { display: none; left: 1em; }
3. The core CSS/CSS3 styles for the slides.
.slide { display: flex; -webkit-display: flex; -webkit-align-items: center; align-items: center; justify-content: center; -webkit-justify-content: center; width: 100%; height: 100%; position: absolute; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; }
4. Create the 'Zoom out' effect using CSS3 2D transforms.
.zoomout { transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); }
5. Place the needed jQuery JavaScript library at the end of the document.
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
6. The core JavaScript (jQuery script) to active the slider.
var timer = 0; var elementCount = 0; var firstPos = 0; var lastPos = 0; $(function() { initialiseSlider(); $("#next").click(function() { slideRight(); }); $("#previous").click(function() { slideLeft(); }); }); function initialiseSlider() { $("div").each(function(value) { elementCount += 1; var position = -100 * value; $(this).css("left", position + "%"); }); if (elementCount === 1) $("#next").hide(); } function slideRight() { $("div").each(function(value) { $(this).addClass("zoomout"); var position = parseInt($(this)[0].style.left) + 100; if (value === 0) firstPos = position; $(this).css("left", position + "%"); timer = setTimeout(removeZoom, 1000); }); console.log(firstPos); if (firstPos !== ((elementCount - 1) * 100)) { $("#next").show(); $("#previous").show(); } else $("#next").hide(); } function slideLeft() { $("div").each(function(value) { $(this).addClass("zoomout"); var position = parseInt($(this)[0].style.left) - 100; if (value === (elementCount - 1)) lastPos = position; $(this).css("left", position + "%"); timer = setTimeout(removeZoom, 1000); }); console.log(lastPos); if (lastPos !== ((elementCount - 1) * -100)) { $("#previous").show(); $("#next").show(); } else $("#previous").hide(); } function removeZoom() { $("div").each(function() { $(this).removeClass("zoomout"); }); }
This awesome jQuery plugin is developed by christiancoan. For more Advanced Usages, please check the demo page or visit the official website.