Arrow function in slide

Asked

Viewed 156 times

2

I wonder if it is possible to make this slide that I adapted from "w3school", work with arrows, and every time it jumps image, the site rise to the top again.

HTML:

    <!DOCTYPE html>
<html>
<title>slide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="slide.css"/>
<style>
.mySlides {display:none}
</style>
<body>

    <div class="container">
        <div class="content" style="max-width: 930px">
          <img class="mySlides" src="1.jpg" style="max-width: 100%;display: block;margin-left: auto;margin-right: auto;">
          <img class="mySlides" src="2.jpg" style="max-width: 100%; display: block;margin-left: auto;margin-right: auto;">
          <img class="mySlides" src="3.png" style="max-width: 100%; display: block;margin-left: auto;margin-right: auto;">
        </div>

        <div class="center">
          <div class="section">
            <div class="button" onclick="plusDivs(-1)">❮ Prev</div>
            <div class="button" onclick="plusDivs(1)">Next ❯</div>
          </div><br/>
          <div class="pag demo" onclick="currentDiv(1)">01</div> 
          <div class="pag demo" onclick="currentDiv(2)">02</div> 
          <div class="pag demo" onclick="currentDiv(3)">03</div> 
        </div>
    </div>


<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" red", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " red";
}
</script>

</body>
</html>

CSS:

 .container {
    text-align: center;
}

.content {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 1280;
}

.center {
    margin: 0 auto;
    display: inline-block;
    width: auto;
}

.section, code {
    display: inline-block;
    margin-top:16px!important;
    margin-bottom:16px!important;
}

.button {
    border:none;
    display:inline-block;
    padding:8px 16px;
    text-decoration:none;
    background-color: #000;
    color: crimson;
    text-align:center;
    padding:8px 16px;
    margin: 0 auto;
    cursor: pointer;
}

.pag  {
    background: #000;
    color: crimson;
    width: auto;
    display:inline-block;
    padding: 10px;
    cursor: pointer;
}

.red {
    color:#fff!important;
    background-color:#f44336!important;
}

I know a little HTML and CSS, but javascript no longer know anything...

javascript css slide

  • Do you want the page to go back to the top every time the slide changes? This is going to be a bad user experience

  • Hm... not exactly. I don’t know if you noticed, but I’m making a very simple online comic book reader. An example: http://mangaonline. with . br/Kingdom/chapter/570/

  • Okay, I got that wrong. Yes, very simple to do with javascript, just put the function to go to the top of the page inside the function plusDivs, var scrollTop = Function() { window.scrollTo(0, 0); };

  • Wow, thank you so much! half completed... And would you happen to know how to change pages with arrows? From what I can tell "scrollTop = Function()" makes it go up every time it changes pages.

  • In fact, the scrollTop function makes the page go up every time the button calling it is clicked, regardless of whether it actually changes the page or not. What error is appearing when you try to change the page by clicking the button?

  • Well, since you asked... It’s not working at all. I did a brief search at W3school and checked the function, but anyway it doesn’t work.

  • Check out this tutorial here: https://tableless.com.br/criando-slideshow-zero-com-javascript-puro-2/ well explained

Show 2 more comments

1 answer

1


Change your plusDivs function: 

function plusDivs(n) {
      showDivs(slideIndex += n);
      var scrollTop = function() { 
        window.scrollTo(0, 0); 
    };
    }

The window.scrollTo(0, 0) will cause every time the button that is calling the function plusDivs is clicked the page up to the top!

Browser other questions tagged javascript css slide

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