how to make next button, prev button in html to scroll a lot of elements in div?(use jquery, javascript)
Question
!i have picture.
<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 makes full the div. How can I make a next button and previous button , I want scroll some elements when I click a button next , its show 5 or 6 elements next. and when I click the previous button it scroll some elements in previous session. thanks!
2 answers
solution1
0 2015-05-22 08:17:54
I am using swiper.js in my projects to achieve this.
You can get it as a standalone js version and as a JQuery plugin. It works well on mobile and touch devices. Look at the documentation or the examples to get started.
solution2
0 2015-05-22 09:14:52
You can use anchors (an <a> element with an id attribute used as a named anchor).
Browsers scroll the page to the right anchor ( <a id="myanchor"></a> ) on the URL like http://mywebsite.com/foo.html#myanchor
In the Javascript side you can jump to a specific anchor thanks to document.location.hash = "#myanchor"; ( lecture ).
So, you can add anchors to the DOM and bind actions to the buttons to compute the right anchor name. Here is 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 the 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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.