I made 3 slidesshow but between the slidesshows this to be a space

Asked

Viewed 59 times

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

  • class="mySlides1 w3-animate-fading"" - There’s an extra quote here.

  • I was going to start trying to simulate your code, but without the link of the figures, it’s hard.

  • Places all HTML, including CSS, and whether you’re using a library or plugin

  • Hmmm I didn’t use css in this part of slideshow

1 answer

1

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

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

Here is the documentation of how to use the W3.css Grid: https://www.w3schools.com/w3css/w3css_grid.asp

And here’s the project home: https://www.w3schools.com/w3css/default.asp

Your code has something that is not good practice, it would be good to read the documentation of the links above.

I tweaked the code just to show you the problems.

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

Follow the code template I made to help you. I put a red border so you can see the size of the cells grid. *The last Cell of Grid I left wrong to demonstrate how it looks when it uses the wrong Class...*

Click the Run button to see the working code!

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

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.