0
I have the code below that works normally. But with an inconvenience:
The more images I put on the slide the faster the images change.
I would like to make sure that, regardless of the amount of images added to the slide, they touch at the same time!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Slide 8</title>
<style>
* {
margin:0;
padding:0;
boder: none;
}
body {
width:1000px;
margin: auto;
}
div.slider {
width:100%;
overflow:hidden;
}
div.slider ul.slide {
width:9000%;
animation:tocaSlide infinite;
}
div.slider ul.slide li {
width:100%;
list-style:none;
}
div.slider ul.slide li img {
float:left;
}
</style>
<script type="text/javascript" src="_js/jquery.js"></script>
<script type="text/javascript" src="_js/jquery.keyframes.min.js"></script>
<script>
$(document).ready(function(e) {
var tempoTransicao = 10;
var quantasImagens = $("div.slider ul.slide li img").length;
var tamanhoIntervalos = 100/quantasImagens;
var tempoImagens = 0;
var t = 0;
var obj ={ name: 'tocaSlide' };
$("div.slider ul.slide li:first").clone().appendTo("div.slider ul.slide")
for (i = 0; i < quantasImagens; i++) {
tMin = t + tempoTransicao;
tMax = t + tamanhoIntervalos;
t += tamanhoIntervalos;
if (i == 0) tMin = 0;
if (i == quantasImagens - 1) tMax = 100;
obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
tempoImagens += 100;
}
$.keyframe.define([obj]);
$("div.slider ul.slide").css({
'animation-duration' : tempoTransicao + 's',
}).on("animationiteration",function(e){
$(this).css("animation-delay", "-"+e.originalEvent.elapsedTime/quantasImagens+"s").removeClass("slide");
void this.offsetWidth;
$(this).addClass("slide");
})
});
</script>
</head>
<body>
<div class="slider">
<ul class="slide">
<li><img src="_imgs/_slideShow/1.png" /></li>
<li><img src="_imgs/_slideShow/2.png" /></li>
<li><img src="_imgs/_slideShow/3.png" /></li>
<li><img src="_imgs/_slideShow/4.png" /></li>
</ul>
</div>
</body>
</html>
Have a sample online or is it local?
– Sam
I withdrew the answer, but the problem is
e.originalEvent.elapsedTime/quantasImagenswhich sets the time in relation to the number of images by the value invar tempoTransicao = 10;... If you have 4 images, the time will be 2.5, if you have 8 images, the time falls to 1.25.. IE, the more images, the shorter the transition time in 10s...– Sam
Ok, another problem that occurs is that when arriving at the last slide (image) the passage to the first again does not receive the effect. The first one comes in abruptly. There’s a way around that?
– Carlos Rocha