Clever Geek Handbook

How do I make the following button, prev button in html to scroll through a lot of elements in a div? (use jquery, javascript)

! I have a photograph.

<div id="slider">
    <ul>
        <li class="li"> Div 1</li>
        <li class="li"> Div  2</li>
        <li class="li"> Div  3</li>
        <li class="li"> Div  4</li>
        <li class="li"> Div 5</li>
        <li class="li"> Div 6</li>
        <li class="li"> Div 7 </li>
        <li class="li"> Div 8 </li>
        <li class="li"> Div 9</li>
    </ul>
</div>

when i have more element it fills the div. How can I make the next button and the previous button, I want to scroll through some items, when I click the Next button, then 5 or 6 items are displayed. and when I click the previous button, it scrolls through some items in the previous session. thank!

+3


source to share


2 answers


I am using swiper.js in my projects to achieve this.



You can get it as a separate js version and as a jQuery plugin. It works well on mobile and touch devices. Take a look at the documentation or examples to get started.

0


source


You can use anchors (an element <a>

with an attribute id

used as a named anchor).

Browsers scroll the page to the right anchor ( <a id="myanchor"></a>

) on the url likehttp://mywebsite.com/foo.html#myanchor

On the Javascript side, you can jump to a specific anchor thanks to document.location.hash = "#myanchor";

( lecture ).

So, you can add DOM bindings and bind button actions to figure out the correct binding name. Here's an example:



<html>
  <head>
    <style>
      ul li { height: 200px;}
      #slider aside {
          position: fixed;
          top: 0px;
      }
    </style>
  </head>
  <body>
    <div id="slider">
      <aside>
          <button class="prev">prev</button>
          <button class="next">next</button>
      </aside>
      <ul>
          <li class="li"><a id="1"></a> Div 1</li>
          <li class="li"><a id="2"></a> Div  2</li>
          <li class="li"><a id="3"></a> Div  3</li>
          <li class="li"><a id="4"></a> Div  4</li>
          <li class="li"><a id="5"></a> Div 5</li>
          <li class="li"><a id="6"></a> Div 6</li>
          <li class="li"><a id="7"></a> Div 7 </li>
          <li class="li"><a id="8"></a> Div 8 </li>
          <li class="li"><a id="9"></a> Div 9</li>
      </ul>
      </div>
  </body>
  <script>
    var step = 2;
    var nbDiv = document.querySelectorAll('#slider ul > a').length

    var prevBtn = document.querySelector('#slider button.prev');
    prevBtn.addEventListener('click', function onPrev(event) {
        actualPosition = parseInt(document.location.hash.slice(1));
        if (isNaN(actualPosition))
            actualPosition = step;
        var newPosition = actualPosition - step;
        if (newPosition < 0)
            newPosition = 0;
        document.location.hash = '#' + newPosition;
    });

    var nextBtn = document.querySelector('#slider button.next');
    nextBtn.addEventListener('click', function onNext(event) {
        actualPosition = parseInt(document.location.hash.slice(1));
        if (isNaN(actualPosition))
            actualPosition = 0;
        var newPosition = actualPosition + step;
        if (newPosition > nbDiv)
            newPosition = nbDiv;
        document.location.hash = '#' + newPosition;
    });
  </script>
</html>

Note that you can add an anchor dynamically in Javascript ( lecture ):

var lis = document.querySelectorAll('#slider > ul > li');
for (var i=0, li; li=lis[i]; i++)  {
    var anchor = document.createElement('a');
    anchor.name = i.toString();
    li.insertBefore(anchor, li.firstChild);
}
0


source






More articles: