Scribd
Upload
21 views

day-32, Pagination with JavaScript

The document is an HTML page that implements a gallery with pagination using JavaScript and CSS. It features a collection of images displayed in a grid format, with navigation buttons to cycle through pages of images. The CSS styles enhance the visual presentation, while the JavaScript handles the pagination logic and item visibility.

Uploaded by

Diya Solanki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

day-32, Pagination with JavaScript

The document is an HTML page that implements a gallery with pagination using JavaScript and CSS. It features a collection of images displayed in a grid format, with navigation buttons to cycle through pages of images. The CSS styles enhance the visual presentation, while the JavaScript handles the pagination logic and item visibility.

Uploaded by

Diya Solanki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Pagination in Js</title>
<link rel="stylesheet"
href="./assest/css/style.css">
</head>
<body>
<section class="gallery">
<div class="container">
<div class="title">
<h1>Gallery</h1>
</div>
<div class="gallery-items">
<div class="item">
<div class="img">
<img
src="./assest/img/1.jpg" alt="">
</div>
<div class="caption">
<h3>Image 1</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/2.jpg" alt="">
</div>
<div class="caption">
<h3>Image 2</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/3.jpg" alt="">
</div>
<div class="caption">
<h3>Image 3</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/4.jpg" alt="">
</div>
<div class="caption">
<h3>Image 4</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/5.jpg" alt="">
</div>
<div class="caption">
<h3>Image 5</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/6.jpeg" alt="">
</div>
<div class="caption">
<h3>Image 6</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/7.jpg" alt="">
</div>
<div class="caption">
<h3>Image 7</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/8.jpeg" alt="">
</div>
<div class="caption">
<h3>Image 8</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
<div class="item">
<div class="img">
<img
src="./assest/img/9.jpg" alt="">
</div>
<div class="caption">
<h3>Image 9</h3>
<p>Lorem ipsum dolor sit
amet consectetur adipisicing elit. Provident cum
labore iusto tempore totam illum.</p>
</div>
</div>
</div>
<div class="pagination">
<div class="prev ">Prev</div>
<div class="page">Page <span
class="page-no"></span></div>
<div class="next">Next</div>
</div>
</div>
</section>
<script
src="/assest/js/myscript.js"></script>
</body>
</html>

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
max-width: 1140px;
margin: auto;
}
.gallery .title h1{
margin: 40px 0px;
text-align: center;
font-size: 40px;
}
.gallery .gallery-items{
display: flex;
flex-wrap: wrap;
justify-content:center;
}
.gallery .gallery-items .item{
width: 340px;
height: auto;
margin: 10px;
border-radius: 20px;
background-color: #cce1f7;
}
.gallery .gallery-items .item.hide{
display: none;
}
.gallery .gallery-items .item.show{
display: block;
animation: show .5s ease;
}
@keyframes show {
0%{
opacity: 0;
transform: scale(0.9);
}
100%{
opacity: 1;
transform: scale((1));
}
}
.gallery .gallery-items .item .img{
height: 230px;
width: 340px;
overflow: hidden;
}
.gallery .gallery-items .item img{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px ;
transition: all 0.5s;
}
.gallery .gallery-items .item:hover img{
transform: rotate(-15deg) scale(1.2);
}
.gallery .gallery-items .item .caption{
padding: 40px 20px;
font-family: Cambria, Cochin, Georgia,
Times, 'Times New Roman', serif;

}
.gallery .gallery-items .item .caption h3{
font-size: 25px;
font-weight: 500;
margin-bottom: 10px;
}
.gallery .gallery-items .item .caption p{
font-size: 17px;
word-break: break-all;
}
.pagination{
width: 100%;
margin: 20px auto;
text-align: center;
}
.pagination div{
display: inline-block;
color: gray;
margin: 0px 10px;
}
.pagination .prev, .pagination .next{
color: black;
border: 1px solid black;
font-size:20px;
padding: 8px 20px;
transition: all 0.4s;
cursor: pointer;
}
.pagination .prev.disabled, .pagination
.next.disabled{
border-color: gray;
color: gray;
pointer-events: none;
}

const galleryItems =
document.querySelector('.gallery-items').children
;
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const page = document.querySelector('.page-no');
const maxItem = 3;
let index = 1;
const pagination = galleryItems.length / maxItem;

prev.addEventListener('click', () => {
index--;
disabled();
showItems();
})
next.addEventListener('click', () => {
index++;
disabled();
showItems();
})
function disabled()
{
if (index == 1) {
prev.classList.add('disabled')
}
else {
prev.classList.remove('disabled')
}
if (index == pagination) {
next.classList.add('disabled')
}
else {
next.classList.remove('disabled')
}
}
function showItems() {
for (let i = 0; i < galleryItems.length; i++)
{
galleryItems[i].classList.remove("show");
galleryItems[i].classList.add("hide");
if (i >= (index * maxItem) - maxItem && i
< index * maxItem) {

galleryItems[i].classList.remove("hide");

galleryItems[i].classList.add("show");
}
page.innerHTML = index;
}
}
// window.onload = showItems();
window.onload = () => {
showItems();
disabled();
}

You might also like