Today, We want to share with you next and previous buttons in javascript.In this post we will show you image gallery with next and previous buttons jquery, hear for simple image slider with next previous button we will give you demo and example for implement.In this post, we will learn about Next & Prev buttons in VUE.JS with an example.
How TO – Next and Previous Buttons with javascript?
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Tabs with Next/Previous - www.pakainfo.com</title>
<link rel="stylesheet" href="tabs.css" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.custom.min.js"></script>
<script type="text/javascript">
$(function() {
var $tabs = $('#tabs').tabs();
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
if (i != totalSize) {
next = i + 2;
$(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page »</a>");
}
if (i != 0) {
prev = i;
$(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Prev Page</a>");
}
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="tabs">
<ul>
<li><a href="#product-1">1</a></li>
<li><a href="#product-2">2</a></li>
<li><a href="#product-3">3</a></li>
<li><a href="#product-4">4</a></li>
<li><a href="#product-5">5</a></li>
<li><a href="#product-6">6</a></li>
<li><a href="#product-7">7</a></li>
<li><a href="#product-8">8</a></li>
<li><a href="#product-9">9</a></li>
<li><a href="#product-10">10</a></li>
<li><a href="#product-11">11</a></li>
<li><a href="#product-12">12</a></li>
<li><a href="#product-13">13</a></li>
<li><a href="#product-14">14</a></li>
<li><a href="#product-15">15</a></li>
</ul>
<div id="product-1" class="ui-tabs-panel">
<p>Tamilrockers is a torrent website that is immensely popular among south Indian movie fans. It is a desi version of the internationally notorious Pirate Bay from where one can download mostly South Indian movies and other content for free via a torrent client.</p>
</div>
<div id="product-2" class="ui-tabs-panel ui-tabs-hide">
<p>Tamil Rockers. From Wikipedia, the free encyclopedia. Jump to navigation Jump to search. BitTorrent website. Tamil Rockers. Tamilrockers logo.jpg. Type of site.</p>
</div>
<div id="product-3" class="ui-tabs-panel ui-tabs-hide">
<p>Tamilrockers is the most accessing Indian movies downloading website Bollywood & Tollywood mostly. Tamilrockers uploading movies instantly after it release.</p>
</div>
<div id="product-4" class="ui-tabs-panel ui-tabs-hide">
<p>Latest News on Tamilrockers. Read breaking stories and opinion articles on tamilrockers at Firstpost.</p>
</div>
<div id="product-5" class="ui-tabs-panel ui-tabs-hide">
<p>Dec 2, 2020 — Tamilrockers telugu movies available in HD quality under different categories to download at free of cost at any time.</p>
</div>
<div id="product-6" class="ui-tabs-panel ui-tabs-hide">
<p>Things you need to know about TamilRockers. It is not possible always to go to a movie theater on the weekend for watching movies.</p>
</div>
<div id="product-7" class="ui-tabs-panel ui-tabs-hide">
<p>Find Tamilrockers Latest News, Videos, Pictures on Tamilrockers and see latest updates, news, information. Explore more on Tamilrockers.</p>
</div>
<div id="product-8" class="ui-tabs-panel ui-tabs-hide">
<p>Tamilrockers 2020 is one of the favorite Tamil Indian websites which provides access to online free movies including English, Tamil, and Malayalam.</p>
</div>
<div id="product-9" class="ui-tabs-panel ui-tabs-hide">
<p>Find Tamilrockers To Download's articles, email address, contact information, Twitter and more.</p>
</div>
<div id="product-10" class="ui-tabs-panel ui-tabs-hide">
</div>
<div id="product-11" class="ui-tabs-panel ui-tabs-hide">
</div>
<div id="product-12" class="ui-tabs-panel ui-tabs-hide">
</div>
<div id="product-13" class="ui-tabs-panel ui-tabs-hide">
</div>
<div id="product-14" class="ui-tabs-panel ui-tabs-hide">
</div>
<div id="product-15" class="ui-tabs-panel ui-tabs-hide">
<p>The end.</p>
</div>
</div>
</div>
</body>
</html>
How to create previous and next button using JavaScript ?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 100px 400px;
}
.no-box {
padding-left: 30px;
font-size: 60px;
}
.btn {
background-color: rgb(179, 179, 179);
}
.btn:hover {
color: white;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="no-box">
<span class="no">1</span>
</div>
<button class="btn" onclick="prev()">
prev
</button>
<button class="btn" onclick="next()">
next
</button>
</div>
<script>
var no_box = document
.querySelector('.no-box');
var i = 1;
function prev() {
if (i == 1) {
document.getElementsByClassName(
'prev').disabled = true;
document.getElementsByClassName(
'next').disabled = false;
} else {
i--;
return setNo();
}
}
function next() {
if (i == 5) {
document.getElementsByClassName(
'next').disabled = true;
document.getElementsByClassName(
'prev').disabled = false;
} else {
i++;
return setNo();
}
}
function setNo() {
return no_box.innerHTML = i;
}
</script>
</body>
</html>
I hope you get an idea about next and prev buttons in javascript with demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.