I have the code below that works normally. However, with one drawback:
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 each other 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>