យើងរៀនធ្វើ slider និង pagination សម្រាប់វែបសាយដោយយើងប្រើ html, css និង jquery សម្រាប់ឲ្យវាដើរស្វ័យប្រវត្តិ
CSS
/* MARK: Slider image */
.slide-bar{
margin-top: 15px;
height: 450px;
}
.slide-bar .box{
height: 100%;
width: 100%;
background-color: yellowgreen;
position: relative;
}
.btnSlide{
position: absolute;
padding: 10px;
background-color: rgba(255, 127, 80, 0.593);
color: white;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 2;
}
.backBtn{
left: 0;
}
.nextBtn{
right: 0;
}
.slide-bar .box .slider{
width: 100%;
height: 100%;
background-color: beige;
float: left;
position: relative;
}
.slide-bar .box .slider img{
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-bar .box .slider h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.225);
color: white;
font-size: 18px;
padding: 10px;
}
.slide-bar .box .pagenetion{
position: absolute;
background-color: coral;
bottom: 0%;
left: 50%;
transform: translate(-50%);
padding: 5px;
border-radius: 5px 5px 0px 0px;
z-index: 1;
}
.slide-bar .box .pagenetion ul li{
float: left;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.627);
color: white;
justify-content: center;
align-items: center;
font-size: 10px;
margin: 3px;
display: flex;
cursor: pointer;
}
.slide-bar .box .pagenetion ul li.active{
background-color: black;
}
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<title>sliderPagenetion</title>
</head>
<body>
<!--MARK: Slider -->
<div class="col-xl-9 main-article slide-bar">
<div class="box">
<!-- <div class="slider">
<img src="../../img/cat.webp" alt="">
<h1>Cat 1</h1>
</div> -->
<div class="btnSlide nextBtn">
Next
</div>
<div class="btnSlide backBtn">
Back
</div>
<div class="pagenetion">
<!-- Number of pagenetion -->
</div>
</div>
</div>
</div>
</div>
</body>
<script src="javaScript.js" ></script>
</html>
Jquery
var animal = [{"NAME":"Cat 1","IMAGE":"cat.webp"},
{"NAME":"Cat 2","IMAGE":"cat3.jpg"},
{"NAME":"Dog 3","IMAGE":"dog3.jpeg"},
{"NAME":"Dog 1","IMAGE":"Dog1.webp"},
{"NAME":"Dog 6","IMAGE":"Dog6.jpeg"},
]
$(document).ready(function(){
let txt = ""
let txtl = ""
let page = 0
animal.map((i) => {
page++;
txt +=`<div class="slider">
<img src="../img/${i.IMAGE}" alt="">
<h1>${i.NAME}</h1>
</div>`;
txtl +=`<li>${page}</li>`
})
$(".slide-bar").find('.box').append(txt)
$(".pagenetion").html(`<ul>${txtl}</ul>`)
var slise = $(".slider")
var num = 0
var slideLength = slise.length
$(".pagenetion ul li").eq(num).addClass('active')
slise.hide()
slise.eq(num).show()
$(".nextBtn").click(function(){
nextBTN()
})
function nextBTN(){
slise.eq(num).hide()//0
num++ //0->1->2->3
if(num === slideLength){// 0 == 3?
num = 0
}
slise.eq(num).show()//1
/* Pagenetion */
$(".pagenetion ul li").removeClass('active')
$(".pagenetion ul li").eq(num).addClass('active')
}
$(".backBtn").click(function(){
slise.eq(num).hide()
num--
if(num<0){
num = slideLength-1 // 3-1 = 2 (2 is index 3th)
}
slise.eq(num).show()
/* Pagenetion */
$(".pagenetion ul li").removeClass('active')
$(".pagenetion ul li").eq(num).addClass('active')
})
$(".pagenetion").on("click", 'ul li', function(){
slise.eq(num).hide()
//Remove class active from list non active
$(this).parent().find('li').eq(num).removeClass('active')
num = $(this).index()
slise.eq(num).show()
// $(".pagenetion ul li").removeClass('active')
//Add class active list on click
$(this).addClass('active')
/* NOTE: this is (ul li) */
})
/* SetInterval of image */
var setTime = setInterval(()=>{
nextBTN()
},4000)
$(".slide-bar").mouseover(()=>{
clearInterval(setTime)
})
$(".slide-bar").mouseleave(()=>{
setTime = setInterval(()=>{
nextBTN()
},4000)
})
})
0 Comments