3D Rotating Image Carousel With jQuery And CSS3
File Size: | 1.87 KB |
---|---|
Views Total: | 4378 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
This is a small jQuery and CSS3 based image carousel that comes with a subtle 3D rotation animation when transitioning between images. Also provides a progress bar control which indicates how many times left for next image rotation.
How to use it:
1. Code the html for the image carousel.
<div class="mySlider"> <img src="1.jpg" alt="1" class="active" data-image="1"> <img src="2.jpg" alt="2" data-image="2"> <ul> <li><a href="#" class="active" data-link="1"></a></li> <li><a href="#" data-link="2"></a></li> </ul> </div>
2. The core CSS/CSS3 styles for the image carousel.
.mySlider, img { box-sizing: border-box; overflow: hidden; margin: 0 auto; width: 100%; position: relative; perspective: 1200px; display: block; } img { position: absolute; top: 0; animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } img.active { transform-origin: 100% 50%; animation-name: imageIn; animation-duration: 800ms; animation-iteration-count: 1; z-index: 1; } img.inactive { animation-name: imageOut; animation-duration: 800ms; animation-iteration-count: 1; } @keyframes imageOut { to { transform: translateX(100%); filter: brightness(50%); } } @keyframes imageIn { from { filter: brightness(50%); transform: translateX(-100%) rotateY(-20deg); z-index: -1; } }
3. The CSS/CSS3 styles for the carousel controls.
ul { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); padding: 0; z-index: 2; } li { display: inline; } li:not(:last-child) a { margin-right: 16px; } a { display: block; position: relative; width: 70px; height: 3px; background-color: rgba(255, 255, 255, 0.4); float: left; } a:hover { transition: background-color 300ms; background-color: rgba(255, 255, 255, 0.6); } a::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); transform-origin: center left; transform: scaleX(0); } a.active::before { animation-name: active; animation-duration: 4800ms; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); } a.inactive::before { transition: opacity 800ms; opacity: 0; } @keyframes active { 0% { transform-origin: center left; transform: scaleX(0); } 45% { transform-origin: center left; transform: scaleX(1); } 65% { transform-origin: center right; transform: scaleX(1); } 100% { transform-origin: center right; transform: scaleX(0); } }
4. The image carousel requires the latest jQuery JavaScript library to work properly.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script>
5. The JavaScript to activate the image carousel.
setInterval(function() { var $inactiveLink = $("[data-link]:not(.active)"); var $inactiveImage = $("[data-image]:not(.active)"); var $activeLink = $("[data-link].active"); var $activeImage = $("[data-image].active"); $activeImage.removeClass("active").addClass("inactive"); $activeLink.removeClass("active").addClass("inactive"); $inactiveImage.addClass("active").removeClass("inactive"); $inactiveLink.addClass("active").removeClass("inactive"); }, 4800);
This awesome jQuery plugin is developed by whmii. For more Advanced Usages, please check the demo page or visit the official website.