Slide Transition

Question

Slide Transition

Navigation

#1 by (1 votes)

0

I have this automatic slide transition (Internet template) code. I would like to know how I would put the "Fade" effect.

<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFh65LFf2UPsjvNxBuBISj4C4WC3K9FtKfc1_vcC9pvi_oqWAdgw"style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYpuQvYCQfZEBtvib6zTi69oY0CYmwtQGspxeKuLHJsfpb_8P4QQ"style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://www.infoescola.com/wp-content/uploads/2012/10/bauru-cidade_748974265-1000x750.jpg"style="border-radius:10px; width:515px; height:370px" >

<script type="text/javascript">
var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

javascript html css jquery-ui

asked by anonymous 11.09.2018 / 01:18

1 answer

Copy by Javascript and HTML tags Problems with error handling - PHP Laravel

score 1 · Answer 1

If you are using jQuery (tagged jquery-ui ), use the .fadeIn() (to show) and .fadeOut() (to hide) functions, but include a CSS to hide all but the first images:

.mySlides:not(:first-of-type){
   display: none;
}

Or you can use (preferable):

.mySlides:not(:nth-child(1)){
   display: none;
}

Here in the snippet .mySlides:not(:nth-child(1)) did not work!

See:

var slideIndex = 0;
carousel();

function carousel() {
   var x = $(".mySlides"); // seleciona todos os elementos com a classe .mySlides
   if(slideIndex){ // se slideIndex for diferente de 0
      $(".mySlides:visible").fadeOut(function(){ // oculta com efeito de fade a imagem visível
         $(x[slideIndex-1]).fadeIn(); // mostra com efeito de fade a próxima imagem
      });
   }
   slideIndex++;
   if (slideIndex > x.length) slideIndex = 1;
   setTimeout(carousel, 2000); // Change image every 2 seconds
}

.mySlides:not(:first-of-type){
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgclass="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFh65LFf2UPsjvNxBuBISj4C4WC3K9FtKfc1_vcC9pvi_oqWAdgw"style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYpuQvYCQfZEBtvib6zTi69oY0CYmwtQGspxeKuLHJsfpb_8P4QQ"style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://www.infoescola.com/wp-content/uploads/2012/10/bauru-cidade_748974265-1000x750.jpg"style="border-radius:10px; width:515px; height:370px" >

Note: By default the fade functions take 400 milliseconds to run, in this case if you want the transition to occur in exact 2 seconds (2000 milliseconds in setTimeOut ) between one image and another, increase the value for 2400 to compensate.