jQuery & CSS3 Based Content Slider with Zoom Animations - Gummy slider
File Size: | 2.38 KB |
---|---|
Views Total: | 1401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Gummy slider is a responsive jQuery content slider that uses CSS3 transitions and transforms to produce zoom in / out animations when you slide through the slides.
How to use it:
1. Add content slides into the slider.
<div class="slider-inner"> <div class="slide active">1</div> <div class="slide">2</div> <div class="slide">3</div> <div class="slide">4</div> <div class="slide">5</div> <div class="slide">6</div> <div class="slide">7</div> <div class="slide">8</div> </div>
2. Create a pagination to navigate through the slides manually.
<nav class="slider-nav"> <div class="active"></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </nav>
3. Wrap them into a slider container.
<div class="slider"> <!-- Slider Inner --> <!-- Slider Navigation --> </div>
4. The core CSS / CSS3 rules for the slider.
.slider { background-color: white; position: relative; width: 100%; height: 600px; overflow: hidden; display: none; } .slider-inner { position: absolute; left: 0; top: 0; height: 100%; -webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1); transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1); -webkit-transition-duration: 1s; transition-duration: 1s; background-visibility: hidden; -webkit-transition-delay: .75s; transition-delay: .75s; -webkit-transform: translateZ(0); transform: translateZ(0); } .slide { position: absolute; top: 0; height: 100%; background-color: #f1c40f; background-visibility: hidden; -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25); transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25); -webkit-transform: translateZ(0) scale(0.8, 0.8); transform: translateZ(0) scale(0.8, 0.8); -webkit-transition-duration: .5s; transition-duration: .5s; text-align: center; line-height: 600px; font-size: 5rem; color: white; } .slide.active { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); -webkit-transition-delay: 2s; transition-delay: 2s; } .slider-nav { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 20px; text-align: center; } .slider-nav > div { float: left; width: 10px; height: 10px; border: 1px solid white; z-index: 2; display: inline-block; margin: 0 10px; cursor: pointer; border-radius: 50%; opacity: .5; -webkit-transition-duration: .25s; transition-duration: .25s; background-color: transparent; } .slider-nav > div:hover { opacity: 1; } .slider-nav > div.active { background-color: white; -webkit-transform: scale(2); -ms-transform: scale(2); transform: scale(2); opacity: 1; }
5. Load the latest version of jQuery JavaScript library from a CDN.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
6. The core jQuery script to enable the content slider.
$(document).ready(function(){ var slide = $(".slide"); var viewWidth = $(window).width(); var sliderInner = $(".slider-inner"); var childrenNo = sliderInner.children().length; sliderInner.width( viewWidth * childrenNo ); $(window).resize(function(){ viewWidth = $(window).width(); }); function setWidth(){ slide.each(function(){ $(this).width(viewWidth); $(this).css("left", viewWidth * $(this).index()); }); } function setActive(element){ var clickedIndex = element.index(); $(".slider-nav .active").removeClass("active"); element.addClass("active"); sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)"); $(".slider-inner .active").removeClass("active"); $(".slider-inner .slide").eq(clickedIndex).addClass("active"); } setWidth(); $(".slider-nav > div").on("click", function(){ setActive($(this)); }); $(window).resize(function(){ setWidth(); }); setTimeout(function(){ $(".slider").fadeIn(500); }, 2000); });
This awesome jQuery plugin is developed by Lewi Hussey. For more Advanced Usages, please check the demo page or visit the official website.