Witam,
próbowałem zrobić slider z 4 obrazkami i 4 kropkami na dole (bez żadnych poradników), jestem bardzo początkujący w JS, dlatego próbowałem to robić z wiedzą, która posiadam. Co prawda kropki działają (prócz ostatniej nie wiem czemu) i zdjęcia się przełączają tak jak ma być, ale nie potrafię zrobić, żeby obrazki się same zmieniały i strzałki, które chciałbym mieć po boku (next-slide, prev-slide).
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Slider</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="slider-box">
<div class="slider-content">
<div class="slider-img1"><img src="img/bear.jpg" alt=""></div>
<div class="slider-img2"><img src="img/cat.jpg" alt=""></div>
<div class="slider-img3"><img src="img/dog.jpg" alt=""></div>
<div class="slider-img4"><img src="img/ladybird.jpg" alt=""></div>
</div>
<div class="slider-panel-control">
<div class="control-dots" id = "dot1"></div>
<div class="control-dots" id = "dot2"></div>
<div class="control-dots" id = "dot3"></div>
<div class="control-dots" id = "dot4"></div>
</div>
</div>
<script src="slider.js"></script>
</body>
</html>
*
{
box-sizing: border-box;
}
body
{
margin: 0;
padding: 0;
}
.slider-box
{
width: 800px;
height: 450px;
display: block;
margin: 300px auto;
position: relative;
border: 1px solid black;
display: flex;
.slider-content
{
img
{
display: none;
width: 798px;
height: 448px;
transition: 1s linear;
}
}
.slider-panel-control
{
width: 300px;
position: absolute;
bottom: 30px;
left: 280px;
display: flex;
.control-dots
{
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid black;
margin: 20px;
cursor: pointer;
flex-direction: row;
transition: 0.75s linear;
}
}
}
.active-dots
{
background: orange;
}
* {
box-sizing: border-box; }
body {
margin: 0;
padding: 0; }
.slider-box {
width: 800px;
height: 450px;
display: block;
margin: 300px auto;
position: relative;
border: 1px solid black;
display: flex; }
.slider-box .slider-content img {
display: none;
width: 798px;
height: 448px;
transition: 1s linear; }
.slider-box .slider-panel-control {
width: 300px;
position: absolute;
bottom: 30px;
left: 280px;
display: flex; }
.slider-box .slider-panel-control .control-dots {
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid black;
margin: 20px;
cursor: pointer;
flex-direction: row;
transition: 0.75s linear; }
.active-dots {
background: orange; }
const firstImg = document.querySelector(".slider-img1 img");
const secondImg = document.querySelector(".slider-img2 img");
const thirdImg = document.querySelector(".slider-img3 img");
const fourthImg = document.querySelector(".slider-img4 img");
const firstDot = document.querySelector("#dot1");
const secondDot = document.querySelector("#dot2");
const thirdDot = document.querySelector("#dot3");
const fourthDot = document.querySelector("#dot4");
document.addEventListener("DOMContentLoaded", function()
{
firstDot.addEventListener("click", function()
{
this.classList.add("active-dots");
secondDot.classList.remove("active-dots");
thirdDot.classList.remove("active-dots");
fourthDot.classList.remove("acitve-dots");
firstImg.style.display = "block";
secondImg.style.display ="none";
thirdImg.style.display = "none";
fourthImg.style.display = "none";
});
secondDot.addEventListener("click", function()
{
this.classList.add("active-dots");
firstDot.classList.remove("active-dots");
thirdDot.classList.remove("active-dots");
fourthDot.classList.remove("acitve-dots");
firstImg.style.display = "none";
secondImg.style.display ="block";
thirdImg.style.display = "none";
fourthImg.style.display = "none";
});
thirdDot.addEventListener("click", function()
{
this.classList.add("active-dots");
firstDot.classList.remove("active-dots");
secondDot.classList.remove("active-dots");
fourthDot.classList.remove("acitve-dots");
firstImg.style.display = "none";
secondImg.style.display ="none";
thirdImg.style.display = "block";
fourthImg.style.display = "none";
});
fourthDot.addEventListener("click", function()
{
this.classList.add("active-dots");
firstDot.classList.remove("active-dots");
thirdDot.classList.remove("active-dots");
secondDot.classList.remove("acitve-dots");
firstImg.style.display = "none";
secondImg.style.display ="none";
thirdImg.style.display = "none";
fourthImg.style.display = "block";
});
});
Z góry dziękuję za pomoc.