Because < marquee> tag became deprecated, I tried changing my slider to do the same function but using CSS. This is my css code:
<style>
.marquee{
width: 80%;
overflow: hidden;
border:1px solid #ccc;
}
.brandSlider{
display: flex;
list-style: none;
animation: scrollingSlider 20s linear infinite;
}
.barndSliderItem{
height: 250px;
width: 250px;
margin-left: 10px;
}
.brandSliderContainer{
width: 90%;
overflow: hidden;
}
@keyframes scrollingSlider {
0% {transform: translateX(100%);}
100% {transform: translateX(-3000px);}
}
</style>
It works good and moving, but i want the first image appear directly after the last image without any spaces or delay, how to do that?
The images used in slider retrieved from database, this is the html with php code:
<div class="brandSliderContainer">
<div class="brandSlider">
<?php
$sql="select logo,id,website,name from companies where state=1 order by id asc";//get brands from database
$preProd=$con->prepare($sql);
$preProd->execute();
if($preProd->rowcount())
{
$allBrands=$preProd->fetchall();
foreach($allBrands as $img){
$id1=encript_id($img["id"]);
echo "
<a href='brand-products.php?id=$id1'><img class='barndSliderItem' src='../control-panel/images/$img[logo]' alt='Brand Logo'></a>";
}
}
?>
</div>
</div>
The $con is database connection with PDO, the images retrieved successfully.
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>