Infinite Image slider with pure CSS3
As you suggested, that I should answer instead of a comment so here it goes, you can refer to a source here - http://css3.bradshawenterprises.com/cfimg/ which uses CSS3 animations to swap the images.
Though I would suggest you to use jQuery or JS instead of CSS3 animations due to cross browser support especially when it comes to IE.
How can i make images slider repeating as an infinity loop or Marquee using CSS
Rather than doing what I should have been doing I fudged around with this and applied the "two copies" type approach with the latter copy offset and delayed by some degree. Using css variables allows this to be tweaked so that the time might be changed, the number of slides, the sizes etc etc
Initially things take a while to appear but I'm sure you could translateX
by a smaller value
What could be better than an endlessly scrolling display of kittens? Added a pause
feature too but not extensively tested with mobile devices.
const d = document;
const q = (e, n = d) => n.querySelector(e);
const qa = (e, n = d) => n.querySelectorAll(e);
const parent = q('.brandSliderContainer');
const pausehandler = function(e) {
qa('.brandSlider').forEach(n => {
let pttn = new RegExp('mouse*');
let evt = (pttn.test(e.type) == true) ? 'mouseover' : 'touchstart';
let state = e.type == evt ? 'paused' : 'running';
n.style.setProperty('animation-play-state', state);
});
};
parent.addEventListener('mouseover', pausehandler);
parent.addEventListener('mouseout', pausehandler);
parent.addEventListener('touchstart', pausehandler);
parent.addEventListener('touchend', pausehandler);
:root {
--t: 30s;
--w: 250px;
--slides: 10;
--margin: 10px;
--sw: calc( var(--w) + calc(var(--margin) * 2));
--tw: calc( var(--slides) * var(--sw));
--offset: calc( var(--tw) * -1);
}
.brandSlider {
clear: none;
position: absolute;
top: var(--margin);
display: flex;
flex-direction: row;
flex-wrap: none;
align-content: center;
justify-content: space-around;
width: var(--tw);
height: var(--w);
margin: 0;
animation: scrollingSlider var(--t) linear infinite;
counter-reset: slide;
}
.brandSlider:nth-of-type(2) {
position: absolute;
top: var(--margin);
animation-delay: calc( var(--t) / 2);
transform: translate(100%);
}
.brandSlider a {
height: var(--w);
width: var(--w);
margin-left: auto;
counter-increment: slide;
text-decoration: none;
display: inline-block;
}
.brandSliderContainer {
display: block;
position: absolute;
top: var(--margin);
left: 5%;
width: 90%;
max-width: 90%;
height: calc( var(--w) + calc( var(--margin) * 2));
overflow: hidden!important;
background: inherit;
}
@keyframes scrollingSlider {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(var(--offset));
}
}
<div class="brandSliderContainer">
<div class="brandSlider">
<a href='?id=1'>
<img src='//placekitten.com/250/250?image=1' alt='Brand Logo' />
</a>
<a href='?id=2'>
<img src='//placekitten.com/250/250?image=2' alt='Brand Logo' />
</a>
<a href='?id=3'>
<img src='//placekitten.com/250/250?image=3' alt='Brand Logo' />
</a>
<a href='?id=4'>
<img src='//placekitten.com/250/250?image=4' alt='Brand Logo' />
</a>
<a href='?id=5'>
<img src='//placekitten.com/250/250?image=5' alt='Brand Logo' />
</a>
<a href='?id=6'>
<img src='//placekitten.com/250/250?image=6' alt='Brand Logo' />
</a>
<a href='?id=7'>
<img src='//placekitten.com/250/250?image=7' alt='Brand Logo' />
</a>
<a href='?id=8'>
<img src='//placekitten.com/250/250?image=8' alt='Brand Logo' />
</a>
<a href='?id=9'>
<img src='//placekitten.com/250/250?image=9' alt='Brand Logo' />
</a>
<a href='?id=10'>
<img src='//placekitten.com/250/250?image=10' alt='Brand Logo' />
</a>
</div>
<div class="brandSlider">
<a href='?id=1'>
<img src='//placekitten.com/250/250?image=1' alt='Brand Logo' />
</a>
<a href='?id=2'>
<img src='//placekitten.com/250/250?image=2' alt='Brand Logo' />
</a>
<a href='?id=3'>
<img src='//placekitten.com/250/250?image=3' alt='Brand Logo' />
</a>
<a href='?id=4'>
<img src='//placekitten.com/250/250?image=4' alt='Brand Logo' />
</a>
<a href='?id=5'>
<img src='//placekitten.com/250/250?image=5' alt='Brand Logo' />
</a>
<a href='?id=6'>
<img src='//placekitten.com/250/250?image=6' alt='Brand Logo' />
</a>
<a href='?id=7'>
<img src='//placekitten.com/250/250?image=7' alt='Brand Logo' />
</a>
<a href='?id=8'>
<img src='//placekitten.com/250/250?image=8' alt='Brand Logo' />
</a>
<a href='?id=9'>
<img src='//placekitten.com/250/250?image=9' alt='Brand Logo' />
</a>
<a href='?id=10'>
<img src='//placekitten.com/250/250?image=10' alt='Brand Logo' />
</a>
</div>
</div>
Infinite scrolling carousel (CSS only)
The carousel works based on fixed widths. If there are 7 slides:
- They've duplicated slides once in the html. Make sure you repeat slides.
- The
carousel__wrapper
has givenwidth: calc(250px * 14);
. Twice the number of slides to show. Note, the wrapper is dependent on slide width and slides are not dependent on wrapper. - The
carousel
has width less than the wrapper it's250px * 4
and the overflow is hidden so we see only the window and not entire carousel__wrapper. - The animation shifts the slides by
calc(-250px * 7)
to left. Here, 250px is slide width. Note they are shifting only by 7 slides not entire 14.
You can't use relative dimensions without using javascript. To keep it CSS only you'll need absolute widths.
If you use variables then things will be easy to maintain and understand:
:root {
--no-of-slides: 6;
--slides-in-view: 4;
--slide-width: 200px;
--slide-height: 300px;
--iteration-time: 10s;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(var(--slide-width) * var(--no-of-slides)* -1));
}
}
.carousel__wrapper {
display: flex;
/*justify-content: center;*/
align-items: center;
width: calc(var(--slides-in-view) * var(--slide-width));
overflow: hidden;
border: 1px dashed gray;
margin: 0 auto;
}
.carousel {
padding: 100px 0;
background: lightblue;
overflow: hidden;
width: calc(2 * var(--no-of-slides));
}
.carousel__slide {
animation: scroll var(--iteration-time) linear infinite;
display: flex;
flex-direction: column;
flex: 0 0 auto;
width: var(--slide-width);
height: var(--slide-height);
box-sizing: border-box;
/*border: 1px dotted darkblue;*/
}
.carousel__image {
background-size: cover;
background-repeat: no-repeat;
height: 50%;
/*width: 100px;*/
margin: 15px 20px;
}
/* just for analysis remove this 3 rules later*/
.carousel__slide {
position: relative;
}
.carousel {
counter-reset: slideNo;
}
.carousel__slide::before {
counter-increment: slideNo;
content: counter(slideNo);
position: absolute;
top: 0%;
left: 50%;
font-size: 2rem;
color: lime;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<section class="carousel">
<div class="container-fluid px-0">
<div class="row">
<div class="col-12">
<div class="carousel__wrapper">
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
</div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
</div>
</div>
<!--#### repeat ####-->
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/1/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/2/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/3/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/4/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/5/200/300');"></div>
</div>
<div class="carousel__slide">
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
</div>
<div class="carousel__image" style="background-image: url('https://picsum.photos/seed/picsum/200/300');">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Pure CSS3 slideshow repeats the last 4 slides?
It has to do with the time set for your animation
. When i changed the time to 114s it cycled throught all images.
If you need to make it faster or slower you will have to go through and adjust the animation
on the figure
element and the animation-delay
manually on each .pic-x
element.
Related Topics
Leaflet for R: How to Change Default CSS Cluster Classes
R Markdown: How to Change Style with Internal CSS
How to Disable Margin Collapse Between Sibling Elements
Why Do Inline Elements Behave Like Block Level Elements When Floated
Internet Explorer and Safari Mobile CSS Filter Invert
How to Assign Custom CSS Class to Arbitrary Arbitrary Rows of H:Datatable
How to Justify a Single Flexbox Item (Override Justify-Content)
What Is Better: CSS Hacks or Browser Detection
Apply Style to Only First Level of Td Tags
On the Web, What Fonts Should I Use to Create an Equivalent Experience Cross-Platform
Rmarkdown Font Size and Header
Styled-Components VS SASS (Scss) or Less
What Is Correct Media Query for iPad Pro
Get Angular Material Theme Color Scheme/Palette for Other Elements