نتیجه نهایی که بدست می آورید:
js
<script>
const items = document.querySelectorAll(".slide-item");
const bg = document.getElementById("bg");
const title = document.getElementById("title");
const desc = document.getElementById("desc");
// set background images on boxes
items.forEach(i => {
i.style.backgroundImage = `url('${i.dataset.bg}')`;
});
// default active center (slide 2)
let activeIndex = 1;
items[activeIndex].classList.add("active");
bg.style.backgroundImage = `url('${items[activeIndex].dataset.bg}')`;
title.textContent = items[activeIndex].dataset.title;
desc.innerHTML = items[activeIndex].dataset.desc; // <-- اینجا innerHTML
items.forEach((item, idx) => {
item.addEventListener("click", () => {
// remove old active
items.forEach(i => i.classList.remove("active"));
// make this one active
activeIndex = idx;
item.classList.add("active");
// update text + bg
bg.style.backgroundImage = `url('${item.dataset.bg}')`;
title.textContent = item.dataset.title;
desc.innerHTML = item.dataset.desc; // <-- اینجا innerHTML
});
});
</script>
css
<style>
.custom-slider {
width: 100%;
height: 45vh;
position: relative;
/*overflow: hidden;*/
direction: rtl;
}
/* background */
.slider-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(30px);
transform: scale(1.2);
z-index: 1;
}
.slider-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent, rgba(0,0,0,0.7));
opacity: .5;
z-index: 2;
border: solid 2px #ffffff;
border-radius: 15px;
}
/* track */
.slider-track {
position: absolute;
bottom: 160px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 40px;
z-index: 5;
}
/* slide items */
.slide-item {
width: 220px;
height: 220px;
border-radius: 25px;
background-size: cover !important;
background-position: center !important;
background-color: #ffffff25;
backdrop-filter: blur(6px);
cursor: pointer;
transition: .35s;
flex-shrink: 0;
z-index: 9;
}
.slide-item.active {
transform: scale(1.2);
border: solid 2px #ffffff;
}
.slide-item:not(.active) {
filter: brightness(0.6); /* 0.6 یعنی کمی تاریکتر */
}
/* text */
.slider-text {
position: absolute;
bottom: 40px;
right: 50%;
transform: translateX(50%);
color: #fff;
text-align: center;
z-index: 8;
font-family: 'peyda', sans-serif;
}
.slider-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 10px;
}
.slider-desc a {
margin-top: 20px;
font-size: 16px;
font-weight: 400;
color: #ffffff; /* <-- اینجا رنگ لینک */
opacity: .9;
border: solid 1px #ffffff;
border-radius: 50px;
padding: 7px 30px;
background-color: #ffffff25;
backdrop-filter: blur(6px);
transition: all 0.5s;
}
.slider-desc a:hover {
background-color: #ffffff50;
backdrop-filter: blur(6px);
}
/* CSS موبایل 2x2 */
@media (max-width: 480px) {
.slide-item {
width: 60%;
height: 12vh;
border-radius: 10px;
}
.slider-track{
display: flex;
justify-content: center;
gap: 30px;
}
</style>
html
<div class="custom-slider">
<div class="slider-bg" id="bg"></div>
<div class="slider-overlay"></div>
<div class="slider-track" id="track">
<div class="slide-item" data-bg="https://team.barangads.com/wp-content/uploads/2025/11/29210333_22-scaled.jpg" data-title="طراحی سایت" data-desc='<a href="https://example.com" class="see-all-btn">دیدن همه</a>'></div>
<div class="slide-item" data-bg="https://team.barangads.com/wp-content/uploads/2025/11/416782456_11662489-scaled.jpg" data-title="هویت بصری" data-desc='<a href="https://example.com" class="see-all-btn">دیدن همه</a>'></div>
<div class="slide-item" data-bg="https://team.barangads.com/wp-content/uploads/2025/11/2148779712.jpg" data-title="آموزش" data-desc='<a href="https://example.com" class="see-all-btn">دیدن همه</a>'></div>
<div class="slide-item" data-bg="https://team.barangads.com/wp-content/uploads/2025/11/2150499235.jpg" data-title="مشاوره" data-desc='<a href="https://example.com" class="see-all-btn">دیدن همه</a>'>
</div>
</div>
<div class="slider-text">
<div id="title" class="slider-title">محصول ۱</div>
<div id="desc" class="slider-desc">توضیح محصول شماره ۱</div>
</div>
</div>
