Scribd
Upload
24 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 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
We take content rights seriously. If you suspect this is your content, claim it here.
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