I did 3 slidesshow but between the slidesshows there is a space [closed]

Question

I did 3 slidesshow but between the slidesshows there is a space [closed]

Navigation

#1 by (1 votes)

0

My code:

<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>

javascript html

asked by anonymous 05.01.2018 / 21:46

1 answer

I am creating a game, how to implement a pause menu? Import Vue or other components into child components

score 1 · Answer 1

Lucas, what happens is that you are using the W3CSS classes you are probably importing the CDN into <head> of your page.

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

Here is the documentation on how to use the w3.css Grid: link

And here's the project home: link

Your code has something that is not good practice, you might want to read the documentation for the above links.

I set the code just to show you the problems.

Where <div class="w3-third w3-container"> should be <div class="w3-col s4" > for example. But using SlideShow inside the Grid is not ideal!

Here's the code template I've been able to help you with. I put a red border to see the size of the cells of the Grid. * The last cell of Grid I left wrong to show how it gets when you use the wrong class ...

Click the Run button to see the code working!

<!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>