Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)
We can create an infinitely scrolling slider using CSS Flexbox with the help of JavaScript.
Example
The following examples illustrate carousel using CSS.
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
.container {
max-width: 600px;
position: relative;
margin: 6% auto;
}
.prevbtn, .nextbtn {
position: absolute;
top: 50%;
padding: 12px;
margin-top: -20px;
color: white;
font-weight: bold;
cursor: pointer;
transition: 0.2s ease-in;
border-radius: 50%;
}
.prevbtn:hover, .nextbtn:hover {
background-color: darkgrey;
color: rgb(0,0,0);
}
.nextbtn {
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="slide">
<img src="https://images.unsplash.com/photo-1609517904792-bac493d55556?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1609883475382-c4c9378569e5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1611094607507-8c8173e5cf33?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
</div>
<a class="prevbtn" onclick="changeSlide(-1)">❮</a>
<a class="nextbtn" onclick="changeSlide(1)">❯</a>
</div>
<script>
let slideIndex = [1,1];
viewSlides(1);
function changeSlide(n) {
viewSlides(slideIndex[0] += n);
}
function viewSlides(n) {
let ele = document.getElementsByClassName("slide");
if (n > ele.length) {
slideIndex[0] = 1
}
if (n < 1) {
slideIndex[0] = ele.length
}
for (i = 0; i < ele.length; i++) {
ele[i].style.display = "none";
}
ele[slideIndex[0]-1].style.display = "block";
}
</script>
</body>
</html>This gives the following output
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 120px;
max-width: 600px;
margin: 12px auto;
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
border: 4px ridge rgba(20,30,240,0.6);
}
.container > div {
height: 120px;
width: 2400px;
background: url(https://images.unsplash.com/photo-1611485916153-fce531587fe0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120);
position: absolute;
height: 100%;
transform: translate3d(0, 0, 0);
}
.container .slider {
animation: slideshow 20s linear infinite;
}
@keyframes slideshow {
100% {
transform: translateX(-33.33%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="slider"></div>
</div>
</body>
</html>This gives the following output
Updated on: 10-Feb-2021
2K+ Views
Advertisements