Scribd
Upload
21 views

Slider

The document contains code for a image slider component with the following functionality: - It displays images and titles by iterating through an array of image data objects - Users can click left/right arrows to change the displayed slide - It also implements dot indicators to allow clicking a dot to change the slide - The slider automatically advances to the next slide every 7 seconds

Uploaded by

sopi.bagatrishvili.1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views

Slider

The document contains code for a image slider component with the following functionality: - It displays images and titles by iterating through an array of image data objects - Users can click left/right arrows to change the displayed slide - It also implements dot indicators to allow clicking a dot to change the slide - The slider automatically advances to the next slide every 7 seconds

Uploaded by

sopi.bagatrishvili.1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<div class="slider-wrapper">

<button class="arrow arrow-left" id="arrow-leftbutton"><</button>


<button class="arrow arrow-right" id="arrow-right-
button">></button>
<div class="slider-content" id="slider-content">

</div>

</div>
body{
display: flex;
justify-content: center;
}
.slide{
position: relative;
display: block;
width: 800px;
}
.slide img{
width: 100%;
height: 500px;
}
.slide h2{
position: absolute;
bottom: 15px;
right: 0;
left:0;
text-align: center;
}
.slider-wrapper{
position: relative;
}
.arrow{
z-index: 1;
position: absolute;
top:50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
font-size:1.2rem;
background: white;
cursor: pointer;
}
.arrow-right{
right: 0;
}
.dots{
display: flex;
justify-content: center;
position: absolute;
bottom: 10px;
left:0;
right: 0;
}
.dots .dot{
width: 20px;
height: 20px;
background: black;
margin: 0 5px;
border-radius: 15px;
cursor: pointer;
}
.dot.active{
background: green;
}
let imgData = [
{
id:1,
imgUrl:"bichebi.jpg",
title:"bichoba",
url:"google.com",
},
{
id:2,
imgUrl:"monke.jpg",
title:"monke",
url:"google.com",
},
{
id:3,
imgUrl:"praktikuli.png",
title:"prakqitukuilo",
url:"google.com",
}
]

let sliderContent = document.getElementById("slider-content");


let leftArrow = document.getElementById("arrow-left-button");
let rightArrow = document.getElementById("arrow-right-button");

let sliderIndex = 0;

let CreateSlider = () =>{


sliderContent.innerHTML = ' ';
let a = createAtag(imgData[sliderIndex]);
let img = createImgTag(imgData[sliderIndex]);
let title = createTitletag(imgData[sliderIndex]);
let dots = createDots(imgData[sliderContent]);
a.appendChild(img);
a.appendChild(title);
sliderContent.appendChild(a);
sliderContent.appendChild(dots);
activeDots();
}

// slider itemის შემქნა


let createAtag = () =>{
let a = document.createElement("a");
a.setAttribute("href","#");
a.setAttribute("class","slide");
return a;
}

let createImgTag = (item) =>{


let img = document.createElement("img");
img.setAttribute("src",item.imgUrl);
return img;
}

let createTitletag = (item)=>{


let h2 = document.createElement("h2");
h2.textContent = item.title;
return h2;
}

// წინ და უკან გადასვლის listenerები


leftArrow.addEventListener("click",()=>{
if(sliderIndex<=0){
sliderIndex = imgData.length - 1;
CreateSlider();
}
else{
sliderIndex--;
CreateSlider();
}
})
rightArrow.addEventListener("click",()=>{
movingRightAuto();
})
// ავტომატურად წინ გადასვლის ფუნქცია
let movingRightAuto = ()=>{
if(sliderIndex==imgData.length-1){
sliderIndex = 0;
CreateSlider();
}
else{
sliderIndex++;
CreateSlider();
}
}
// სლაიდერი გადავა წინ ყოველ 7 წამში
setInterval(movingRightAuto,7000);

// active მინიჭება sliderIndex ის დროს


let activeDots = ()=>{
let dots = document.querySelectorAll(".dot");
dots[sliderIndex].classList.add("active");

// წერტილების შექმნა
let createDots = ()=>{
let dotsDiv = document.createElement("div");
dotsDiv.classList.add("dots");
imgData.forEach((element)=>{
let dot = document.createElement("div");
dot.classList.add("dot");
dot.setAttribute("data-id",element.id-1);
dotsDiv.appendChild(dot);
dot.addEventListener("click",(item)=>{
sliderIndex = item.target.getAttribute("data-id");
CreateSlider();
})
})
return dotsDiv;
}
CreateSlider();

You might also like