Effet slide sur carrousel de texte
Bonjour ! Voila petite question pratique pour savoir comment faire un carrousel de texte
HTML
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <div class="part">
<p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus animi totam quibusdam maxime assumenda aliquid corporis architecto necessitatibus, ipsam, voluptatibus voluptatem a nulla eveniet quasi excepturi blanditiis quod minima mollitia!</p>
</div>
<div class="part">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus exercitationem ut unde, beatae ad blanditiis pariatur impedit autem deleniti nesciunt!</p>
</div>
<div class="part">
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita, debitis? Obcaecati ipsum laborum possimus labore sint saepe eveniet amet. Voluptatum!</p>
</div>
<div style='text-align: center;' class="switch">
<span class="select" onclick="currentSlide(1)"></span>
<span class="select" onclick="currentSlide(2)"></span>
<span class="select" onclick="currentSlide(3)"></span>
</div> |
JS
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n){
showSlides(slideIndex += n);
}
function currentSlide(n){
showSlides(slideIndex = n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName('part');
var dots = document.getElementsByClassName('select');
if (n > slides.length) {
slideIndex = 1}
if (n < 1){
slideIndex = slides.length
}
for (i = 0 ; i < slides.length ; i++){
slides[i].style.display = "none";
}
for (i = 0; i < dots.length ; i++){
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
} |
Voila j'aimerais que les textes défilent effet slide avec les sélecteurs...
Est ce que c'est possible de le faire en JS PURE avec du CSS sans utiliser Query ou Bootstrap ou Glide que je ne maitrise pas encore ??
Merci !