Carousel Tutorial Demo
How do I make an carousel tutorial demo?
This is used to embed in my blog http://agelber.com/blog/looping-carousel. What is a carousel tutorial demo? How do you make a carousel tutorial demo? This script and codes were developed by Assaf Gelber on 03 January 2023, Tuesday.
Carousel Tutorial Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Carousel Tutorial Demo</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .carousel { position: relative; list-style: none;
}
.carousel > li { position: absolute;
}
.carousel > li:not(.active) { display: none;
}
.carousel > li.next-in { animation: next-in 0.5s;
}
.carousel > li.next-out { animation: next-out 0.5s;
}
.carousel > li.prev-in { animation: prev-in 0.5s;
}
.carousel > li.prev-out { animation: prev-out 0.5s;
}
@keyframes next-in { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0px); }
}
@keyframes next-out { 0% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(-50px); }
}
@keyframes prev-in { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0px); }
}
@keyframes prev-out { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(50px); }
}
/* NOT RELATED TO TUTORIAL */
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
body { transform: translateZ(0px); font-family: 'Source Sans Pro';
}
a, a:visited { text-decoration: none; font-weight: bold; color: black; margin: 5px
}
img { display: block;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <a href="#" class="carousel-nav prev"><</a>
<a href="#" class="carousel-nav next">></a>
<ul class="carousel"> <li>This is the first item. It contains only text.</li> <li> Item number 2 contains <ul> <li>some</li> <li>nested</li> <li>HTML</li> </ul> </li> <li> Item number 3 contains text and an image <img src="http://ww2.hdnux.com/photos/15/25/51/3496529/3/gallery_thumb.jpg"/> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Carousel Tutorial Demo - Script Codes CSS Codes
.carousel { position: relative; list-style: none;
}
.carousel > li { position: absolute;
}
.carousel > li:not(.active) { display: none;
}
.carousel > li.next-in { animation: next-in 0.5s;
}
.carousel > li.next-out { animation: next-out 0.5s;
}
.carousel > li.prev-in { animation: prev-in 0.5s;
}
.carousel > li.prev-out { animation: prev-out 0.5s;
}
@keyframes next-in { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0px); }
}
@keyframes next-out { 0% { opacity: 1; transform: translateX(0px); } 100% { opacity: 0; transform: translateX(-50px); }
}
@keyframes prev-in { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0px); }
}
@keyframes prev-out { 0% { opacity: 1; transform: translateY(0px); } 100% { opacity: 0; transform: translateY(50px); }
}
/* NOT RELATED TO TUTORIAL */
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format('woff');
}
body { transform: translateZ(0px); font-family: 'Source Sans Pro';
}
a, a:visited { text-decoration: none; font-weight: bold; color: black; margin: 5px
}
img { display: block;
}
Carousel Tutorial Demo - Script Codes JS Codes
$(function() { var currentIndex = 0, itemCount = $('.carousel > li').length; /* add the active class to the first item to hide all the others */ $('.carousel > li:eq(' + currentIndex + ')').addClass('active'); $('.carousel-nav').on('click', function() { var $active = $('.carousel > li.active'), isNext = $(this).hasClass('next'); currentIndex = (currentIndex + (isNext ? 1 : -1)) % itemCount; /* go back to the last item if we hit -1 */ if (currentIndex === -1) { currentIndex = itemCount - 1; } var $next = $('.carousel > li:eq(' + currentIndex + ')'); $active.addClass(isNext ? 'next-out' : 'prev-out'); $next.addClass('active').addClass(isNext ? 'next-in' : 'prev-in'); setTimeout(function() { $active.removeClass('active next-out prev-out'); $next.removeClass('next-in prev-in') }, 500); return false; });
});
Developer | Assaf Gelber |
Username | agelber |
Uploaded | January 03, 2023 |
Rating | 3 |
Size | 3,266 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple Night Sky | 3,266 Kb |
Animation Demo | 3,031 Kb |
CSS Only Single-Element 3D Cuboid | 2,913 Kb |
Perspective Demo | 3,143 Kb |
Skew Demo | 3,209 Kb |
Origin Demo | 3,523 Kb |
Rotate Demo | 3,061 Kb |
Text Looping Transition | 5,619 Kb |
Scale Demo | 3,214 Kb |
Form Placeholder Labels | 3,824 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
JQuery Viewport Size | Jeffpannone | 2,317 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
E-mail Template | SoloMDFK | 4,871 Kb |
Week7 replicate | Hwcasis | 1,620 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!