سلام وقتتون بخیر.
از اونجایی که درست کردن اسلایدر و جایگذاری اون نیازمند کار و کدنویسی زیاده، من بیس اصلی کار رو براتون آماده کردم که خودتون باید زحمت تغییرات CSS و تناسب اون رو بکشید. تنظیم اندازه اسلایدر، مکان نمایش و سایر موارد با خودتون. چیزی که در حال حاضر هست:
دانلود سورس:
این کد HTML اسلایدر:
<div class="slider-container">
<div class="main-slide">
<img id="main-image" src="آدرس عکس اسلایدر پیش فرض" alt="Main Image">
</div>
<div class="thumbnail-slide">
<img class="thumbnail" src="آدرس عکس اسلایدر پیش فرض" alt="Thumbnail 1">
<img class="thumbnail" src="آدرس عکس دوم" alt="Thumbnail 2">
<img class="thumbnail" src="آدرس عکس سوم" alt="Thumbnail 3">
</div>
</div>
کد CSS:
.slider-container {
position: relative;
width: 500px;
height: 300px;
margin-top: 10px;
}
.main-slide {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
overflow: hidden;
}
.main-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumbnail-slide {
position: absolute;
top: 0;
left: 320px;
display: flex;
flex-direction: column;
}
.thumbnail {
width: 80px;
height: 80px;
margin-bottom: 10px;
cursor: pointer;
}
کد JS:
const mainImage = document.getElementById('main-image');
const thumbnails = document.getElementsByClassName('thumbnail');
// Add click event listeners to the thumbnails
for (let i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener('click', function() {
// Get the source of the clicked thumbnail
const thumbnailSrc = this.getAttribute('src');
// Set the main image source to the clicked thumbnail source
mainImage.setAttribute('src', thumbnailSrc);
});
}