0

O meu código:

<div class="w3-content w3-row">
<div class="w3-third">

    <img class="mySlides1 w3-animate-fading" src="comida/1.png" width="250" height="200"  border="3">
    <img class="mySlides1 w3-animate-fading" src="comida/2.jpg" width="250" height="200"  border="3">
    <img class="mySlides1 w3-animate-fading" src="comida/3.jpg" width="250" height="200"  border="3">
    <img class="mySlides1 w3-animate-fading" src="comida/4.jpg" width="250" height="200"  border="3">
    <img class="mySlides1 w3-animate-fading" src="comida/5.jpg" width="250" height="200"  border="3">
    <img class="mySlides1 w3-animate-fading" src="comida/6.jpg" width="250" height="200"  border="3">
</div>

 <div class="w3-third w3-container">

    <img class="mySlides2 w3-animate-fading" src="cozinheiro/cozinheiro1.jpg" width="250" height="200"  border="3">
    <img class="mySlides2 w3-animate-fading" src="cozinheiro/cozinheiro2.jpg" width="250" height="200"  border="3">
    <img class="mySlides2 w3-animate-fading" src="cozinheiro/cozinheiro3.jpg" width="250" height="200"  border="3">
    <img class="mySlides2 w3-animate-fading" src="cozinheiro/cozinheiro4.jpg" width="250" height="200"  border="3">
    <img class="mySlides2 w3-animate-fading" src="cozinheiro/cozinheiro5.jpg" width="250" height="200"  border="3">
    <img class="mySlides2 w3-animate-fading" src="cozinheiro/cozinheiro6.jpg" width="250" height="200"  border="3">

 </div>
 <div class="w3-third w3-container">
    <img class="mySlides3 w3-animate-fading" src="larive/larive1.jpg" width="250" height="200"  border="3">
    <img class="mySlides3 w3-animate-fading" src="larive/larive2.jpg" width="250" height="200"  border="3">
    <img class="mySlides3 w3-animate-fading" src="larive/larive3.jpg" width="250" height="200"  border="3">
    <img class="mySlides3 w3-animate-fading" src="larive/larive4.jpg" width="250" height="200"  border="3">
    <img class="mySlides3 w3-animate-fading" src="larive/larive5.jpg" width="250" height="200"  border="3">
    <img class="mySlides3 w3-animate-fading" src="larive/larive6.jpg" width="250" height="200"  border="3">     
 </div>
 </div>

<script>
    var myIndex1 = 0;
    var myIndex2 = 0;
    var myIndex3 = 0;
    carousel();

    function carousel() {
         var i;
         var x1 = document.getElementsByClassName("mySlides1");
         var x2 = document.getElementsByClassName("mySlides2");
         var x3 = document.getElementsByClassName("mySlides3");
         for (i = 0; i < x1.length; i++) {
             x1[i].style.display = "none";
         }
         for (i = 0; i < x2.length; i++) {
             x2[i].style.display = "none";
         }
         for (i = 0; i < x3.length; i++) {
             x3[i].style.display = "none";
         }
         myIndex1++;
         if (myIndex1 > x1.length) {myIndex1 = 1}
         x1[myIndex1-1].style.display = "block";
         myIndex2++;
         if (myIndex2 > x2.length) {myIndex2 = 1}
         x2[myIndex2-1].style.display = "block";
         myIndex3++;
         if (myIndex3 > x3.length) {myIndex3 = 1}
         x3[myIndex3-1].style.display = "block";
         setTimeout(carousel, 8000);
    }
 </script>
4
  • class="mySlides1 w3-animate-fading"" - Tem uma aspa a mais aqui. 5/01/2018 às 20:57
  • Já ia começar a tentar simular o seu código, mas sem o link das figuras, fica difícil. 5/01/2018 às 20:58
  • Coloca todo o HTML, inclusive o CSS e se está usando alguma biblioteca ou plugin
    – hugocsl
    5/01/2018 às 21:06
  • hmmm eu nao usei css nesta parte do slideshow
    – user100698
    5/01/2018 às 21:09

1 Resposta 1

1

Lucas o que acontece é que você esta usando as classes do W3CSS provavelmente está importando o CDN no <head> da sua pagina.

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Aqui tem a documentação de como usar o Grid do w3.css: https://www.w3schools.com/w3css/w3css_grid.asp

E aqui a home do projeto: https://www.w3schools.com/w3css/default.asp

O seu código tem alguma coisa que não são boas práticas, seria bom que leia a documentação dos links acima.

Ajustei o código apenas para te mostrar os problemas.

Onde está <div class="w3-third w3-container"> deveria estar <div class="w3-col s4"> por exemplo. Mas usar o SlideShow dentro do Grid não é o ideal!

Segue o modelo do código que fiz para te ajudar. Coloquei uma borda vermelha para vc ver o tamanho das células do Grid. *A última Célula do Grid eu deixei errado para demostrar como fica quando usa a Classe errada...*

Clique no botão Executar para ver o código funcionando!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    
</head>
<body>
    <div class="w3-content w3-row">
        <div class="w3-col s4" style="border:1px solid red">
        
            <img class="mySlides1 w3-animate-fading" src="http://placecage.com/250/200" width="100%" height="200" >
            <img class="mySlides1 w3-animate-fading" src="http://placecage.com/250/200" width="100%" height="200" >
            <img class="mySlides1 w3-animate-fading" src="http://placecage.com/250/200" width="100%" height="200" >
            <img class="mySlides1 w3-animate-fading" src="http://placecage.com/250/200" width="100%" height="200" >
            <img class="mySlides1 w3-animate-fading" src="http://placecage.com/250/200" width="100%" height="200" >
            <img class="mySlides1 w3-animate-fading" src="http://placecage.com/250/200" width="100%" height="200" >
        </div>
        
            <div class="w3-col s4"style="border:1px solid red">
        
            <img class="mySlides2 w3-animate-fading" src="http://fillmurray.com/250/200" width="100%" height="200" >
            <img class="mySlides2 w3-animate-fading" src="http://fillmurray.com/250/200" width="100%" height="200" >
            <img class="mySlides2 w3-animate-fading" src="http://fillmurray.com/250/200" width="100%" height="200" >
            <img class="mySlides2 w3-animate-fading" src="http://fillmurray.com/250/200" width="100%" height="200" >
            <img class="mySlides2 w3-animate-fading" src="http://fillmurray.com/250/200" width="100%" height="200" >
            <img class="mySlides2 w3-animate-fading" src="http://fillmurray.com/250/200" width="100%" height="200" >
        
            </div>
            <div class="w3-third w3-container"style="border:1px solid red">
            <img class="mySlides3 w3-animate-fading" src="http://placekitten.com/250/200" width="250" height="200"  border="3">
            <img class="mySlides3 w3-animate-fading" src="http://placekitten.com/250/200" width="250" height="200"  border="3">
            <img class="mySlides3 w3-animate-fading" src="http://placekitten.com/250/200" width="250" height="200"  border="3">
            <img class="mySlides3 w3-animate-fading" src="http://placekitten.com/250/200" width="250" height="200"  border="3">
            <img class="mySlides3 w3-animate-fading" src="http://placekitten.com/250/200" width="250" height="200"  border="3">
            <img class="mySlides3 w3-animate-fading" src="http://placekitten.com/250/200" width="250" height="200"  border="3">     
            </div>
            </div>
        
        <script>
            var myIndex1 = 0;
            var myIndex2 = 0;
            var myIndex3 = 0;
            carousel();
        
            function carousel() {
                    var i;
                    var x1 = document.getElementsByClassName("mySlides1");
                    var x2 = document.getElementsByClassName("mySlides2");
                    var x3 = document.getElementsByClassName("mySlides3");
                    for (i = 0; i < x1.length; i++) {
                        x1[i].style.display = "none";
                    }
                    for (i = 0; i < x2.length; i++) {
                        x2[i].style.display = "none";
                    }
                    for (i = 0; i < x3.length; i++) {
                        x3[i].style.display = "none";
                    }
                    myIndex1++;
                    if (myIndex1 > x1.length) {myIndex1 = 1}
                    x1[myIndex1-1].style.display = "block";
                    myIndex2++;
                    if (myIndex2 > x2.length) {myIndex2 = 1}
                    x2[myIndex2-1].style.display = "block";
                    myIndex3++;
                    if (myIndex3 > x3.length) {myIndex3 = 1}
                    x3[myIndex3-1].style.display = "block";
                    setTimeout(carousel, 8000);
            }
            </script>
</body>
</html>

0