با عرض سلام و خدا قوت بابت آموزش های عالی و بسیار مفید شما
بنده یک کد نوشتم برای تغییر در آدرس عکس ها ولی متاسفانه به طور کامل اجرا نمیشه و خیلی سریع به حالت قبل خودش بر می گرده.
ممنون میشم اگر بتونید من رو راهنمایی کنید
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<title>Document</title>
</head>
<body>
<div class="slider">
<div class="slider__container">
<a href="" class="slider__next slider__btn" onclick="nextSlide();click()">&#8249;</a>
<nav class="slider__nav fade">
<img src="Pic/necklace.png" alt="" class="slider__img img1">
<img src="Pic/ring-gold.png" alt="" class="slider__img img2">
<img src="Pic/Set.png" alt="" class="slider__img img3">
<img src="Pic/Vintage.jpg" alt="" class="slider__img img4">
<img src="Pic/image3.png" alt="" class="slider__img img5">
</nav>
<a href="" class="slider__previous slider__btn">&#8250;</a>
</div>
<div class="slider__text__container">
<p class="slider__text1">وزن : 1.330 g</p>
<p class="slider__text2">قیمت : 1,550,000 تومان</p>
</div>
</div>
<script src="test.js"></script>
<!-- <script src="test2.js"></script> -->
</body>
</html>
const src1 = "Pic/necklace.png";
const src2 = "Pic/ring-gold.png";
const src3 = "Pic/Set.png";
const src4 = "Pic/Vintage.jpg";
const src5 = "Pic/image3.png";
let img1 = document.getElementsByClassName("img1")[0];
let img2 = document.getElementsByClassName("img2")[0];
let img3 = document.getElementsByClassName("img3")[0];
let img4 = document.getElementsByClassName("img4")[0];
let img5 = document.getElementsByClassName("img5")[0];
let next = document.getElementsByClassName("slider__next")[0];
function nextSlide() {
var i = 0;
i++;
if (i == 1) {
img1.src = src2;
img2.src = src3;
img3.src = src4;
img4.src = src5;
img5.src = src1;
}
else if(i == 2){
img1.src = src3;
img2.src = src4;
img3.src = src5;
img4.src = src1;
img5.src = src2;
}
else if(i == 3){
img1.src = src4;
img2.src = src5;
img3.src = src1;
img4.src = src2;
img5.src = src3;
}
else if (i == 4){
img1.src = src5;
img2.src = src1;
img3.src = src2;
img4.src = src3;
img5.src = src4;
}
else if (i == 5){
img1.src = src1;
img2.src = src2;
img3.src = src3;
img4.src = src4;
img5.src = src5;
}
else if (i>6){
i = 1;
return i;
}
}
.slider__container{
display: flex;
align-items: center;
width: 100%;
padding: 0 1rem;
}
.slider__btn{
width: 25px;
font-size: 3rem;
color: var(--white--color);
text-align: center;
background-color: #dbdbdb;
outline: none;
border-radius: 5px;
}
.slider__nav{
margin-top: 2rem;
display: flex;
justify-content: center;
gap: 2rem;
width: 100%;
}
.slider__img{
border-radius: 20px;
outline: none;
}
.img1{
order: 1;
}
.img2{
order: 2;
}
.actice , .img3{
order: 3;
}
.img4{
order: 4;
}
.img5{
order: 5;
}
.img1 , .img5{
width: 8%;
height: 8%;
}
.img2 , .img4{
width: 14%;
height: 14%;
}
.img3{
width: 30%;
height: 30%;
}
.slider__text__container{
background-color: #dbdbdb;
border-radius: 10px;
margin: 2rem;
outline: none;
overflow: hidden;
}
.slider__text1{
padding: 1rem;
text-align: center;
border-bottom: 2px solid var(--white--color);
overflow: hidden;
/* border-radius: 10px; */
outline: none;
}
.slider__text2{
border-top: 2px solid var(--white--color);
padding: 1rem;
text-align: center;;
}
سلام ..
متغیری به نام i رو داخل فانکشن nextSlide تعریف کردید .
باید بیرون از فانکشن این متغیر رو تعریف کنید و داخل فانکشن فقط مقدارشو تغیر بدید .
موفق باشید.
سلام دوست من وقتتون بخیر
ممنون از پاسخ صحیح شما