J'ai besoin d'intimité. Non pas parce que mes actions sont douteuses, mais parce que votre jugement et vos intentions le sont.
5138 links
Un slider simplissime par Timo en css et js sans aucune dépendance.
Merci.
<div id="my-slider">
<div id="my-slider-inner">
<img src="<a href="https://picsum.photos/570/270/?random&1"">https://picsum.photos/570/270/?random&1"</a>; alt="Slide 1" />
<img src="<a href="https://picsum.photos/570/270/?random&2"">https://picsum.photos/570/270/?random&2"</a>; alt="Slide 2" />
<img src="<a href="https://picsum.photos/570/270/?random&3"">https://picsum.photos/570/270/?random&3"</a>; alt="Slide 3" />
<img src="<a href="https://picsum.photos/570/270/?random&4"">https://picsum.photos/570/270/?random&4"</a>; alt="Slide 4" />
<img src="<a href="https://picsum.photos/570/270/?random&5"">https://picsum.photos/570/270/?random&5"</a>; alt="Slide 5" />
<img src="<a href="https://picsum.photos/570/270/?random&6"">https://picsum.photos/570/270/?random&6"</a>; alt="Slide 6" />
<img src="<a href="https://picsum.photos/570/270/?random&7"">https://picsum.photos/570/270/?random&7"</a>; alt="Slide 7" />
</div>
</div>
<style>
#my-slider {
width: 570px;
height: 270px;
overflow: hidden;
font-size: 0;
margin: 0 auto;
}
#my-slider-inner {
white-space: nowrap;
transition: margin 1s ease 0s;
}
#my-slider > #my-slider-inner > img {
display: inline-block;
width: 570px;
height: 270px;
}
</style>
<script>
'use strict'
// amount of images in the slider :
var amountImg = 7;
// width of one image (in pixels)
var widthImg = 570;
// waiting interval (in milliseconds)
var waitTime = 4000;
var deltaX = 0;
var slider = document.getElementById('my-slider');
window.setInterval(doSlide, waitTime);
function doSlide() {
deltaX += widthImg;
deltaX %= amountImg*widthImg;
console.log(deltaX);
slider.querySelector('#my-slider-inner').style.marginLeft = '-' + deltaX + 'px';
}
</script>
Slider en css et jQuery