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.
CodePudding user response：
I think you need to have two sets of <a> tags for solving your issue. Here I posted the solution that works for me:
.marquee{
width: 80%;
overflow: hidden;
border:1px solid #ccc;
min-height: 250px;
}
.fixSlide{
display: flex;
list-style: none;
position: absolute;
animation-name: fixSlider;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.brandSlider{
display: flex;
background-color: #fff;
list-style: none;
position: absolute;
animation-name: scrollingSlider;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.barndSliderItem{
height: 250px;
width: 250px;
margin-left: 10px;
}
.brandSliderContainer{
width: 90%;
/* border: 2px solid red; */
min-height: 250px;
position: relative;
overflow: hidden;
}
@keyframes scrollingSlider {
0% {
right: 0;
transform: translateX(100%);
}
100% {
right: 0;
transform: translateX(0%);
}
}
@keyframes fixSlider {
0% {
right: 0;
transform: translateX(0);
}
100% {
right: 0;
transform: translateX(-100%);
}
}<!-- .php file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slider</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<section class = "marquee">
<div class="brandSliderContainer">
<?php
$allBrands = [1, 2, 3, 4, 5, 6];
echo "<div class='fixSlide'>";
foreach($allBrands as $img){
echo "
<a href='#'><img class='barndSliderItem' src='img/$img.jpg' alt='$img'></a>";
}
echo "</div>";
echo "<div class='brandSlider'>";
foreach($allBrands as $img){
echo "
<a href='#'><img class='barndSliderItem' src='img/$img.jpg' alt='$img'></a>";
}
?>
</div>
</div>
</section>
</body>
</html>I just used an array of numbers that refers to img names in my local folder, But you can use your own images from database.
CodePudding user response：
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>