Difficulty in putting the right images but they are diagonal

Asked

Viewed 63 times

0

Here is my code: 

    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, 2000);
    }
<div class="w3-content w3-section" >
    <img class="mySlides1" src="1.png" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="2.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="3.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="4.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="5.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
    <img class="mySlides1" src="6.jpg" width="250" height="200" hspace="250px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro1.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro2.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro3.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro4.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro5.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
        <img class="mySlides2" src="cozinheiro6.jpg" width="250" height="200" hspace="530px" vspace="50px" border="3">
            <img class="mySlides3" src="larive1.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive2.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive3.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive4.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive5.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">
            <img class="mySlides3" src="larive6.jpg" width="250" height="200" hspace="810px" vspace="50px" border="3">

</div>

javascript html

  • Luke better your title. Be objective with just 5 or 6 words. The rest you put in the text body of the question. Also put your HTML and CSS for easy response.

  • if I put all the code I don’t know why but cuts the html and css and a little java

  • Lucas uses the tool "Javascript/HTML/CSS snippet (Ctrl-M)" in the question field. It is the seventh option, next to insert Image.

  • sorry. I’m new to programming I didn’t understand what you said

  • @Lucassintra copied to the snippet, now you need to edit adding the css and explain better what you want to do.

  • i didn’t use css for the images. basically what I want to do is: have 3 slides of images run automatically. I’ve been able to do that but the problem is that they’re not on the same line. I have already used hspace and vspace to see if they are on the same line but not.

Show 1 more comment

2 answers

0

I didn’t see your javascript, but the visual solution I thought I was looking for I solved it with CSS, including removing all redundant attributes from its elements. Make sure that’s what you’re looking for.

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, 2000);
    }
.w3-section img{
  height:200px;
  width:250px;
  border:3px solid black;
  position:relative;
  float:left;
  display:inline;
  margin:5px;
}
<div class="w3-content w3-section" >
    <img class="mySlides1" src="1.png">
    <img class="mySlides1" src="2.jpg">
    <img class="mySlides1" src="3.jpg">
    <img class="mySlides1" src="4.jpg">
    <img class="mySlides1" src="5.jpg">
    <img class="mySlides1" src="6.jpg">
    
    <img class="mySlides2" src="cozinheiro1.jpg">
    <img class="mySlides2" src="cozinheiro2.jpg">
    <img class="mySlides2" src="cozinheiro3.jpg">
    <img class="mySlides2" src="cozinheiro4.jpg">
    <img class="mySlides2" src="cozinheiro5.jpg">
    <img class="mySlides2" src="cozinheiro6.jpg">
    
    <img class="mySlides3" src="larive1.jpg">
    <img class="mySlides3" src="larive2.jpg">
    <img class="mySlides3" src="larive3.jpg">
    <img class="mySlides3" src="larive4.jpg">
    <img class="mySlides3" src="larive5.jpg">
    <img class="mySlides3" src="larive6.jpg">
</div>

  • I copied your code and put it in mine and can’t keep doing the same thing I was doing before. that is, the images are diagonal instead of straight

  • removed their vspace and hspace?

0


Follow example code. Run it and see if it solves your problem:

<!DOCTYPE html>
<html>
<head>
  <title>Slide Show</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
    <div class="w3-content w3-row">
    <div class="w3-third">
      <img class="mySlides1" src="1.jpg" width="250" height="200" border="3">
      <img class="mySlides1" src="2.jpg" width="250" height="200" border="3">
    </div>
    <div class="w3-third w3-container">
      <img class="mySlides2" src="3.jpg" width="250" height="200" border="3">
      <img class="mySlides2" src="4.jpg" width="250" height="200" border="3">
    </div>
    <div class="w3-third w3-container">
      <img class="mySlides3" src="5.jpg" width="250" height="200" border="3">
      <img class="mySlides3" src="6.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, 1000);
    }
  </script>
</body>
</html>

  • Just need to replace with the image names, but this code is already working.

  • hi, gave. but removed my border and changed my letter. da to put back?

  • In the example there is no letter. What letter are you talking about? You can choose the font type you want via CSS or using W3.CSS’s own styles..

  • that’s how I had previously chosen Arial for my title and with the <link...> changed to another type. that’s the least important. Do you know why the border has disappeared? I know it’s a lot to ask but can you tell me what java script does? like a note to see what it’s more or less for. be can I would really appreciate it

  • https://becode.com.br/javascript-para-iniciantes-origens-o-que-e-para-que-serve/

Browser other questions tagged javascript html

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