آموزش ساخت ۷ اسلایدر جذاب با HTML و CSS و JS

اسلایدرها یکی از محبوب‌ترین و زیباترین عناصر در طراحی وب هستند. از نمایش تصاویر گرفته تا انتقال متن‌های تبلیغاتی، این ابزارها نقش مهمی در افزایش تعامل کاربران با وب‌سایت ایفا می‌کنند. در این مقاله، ۷ نوع اسلایدر را آموزش می‌دهیم که می‌توانید به‌راحتی از آن‌ها در پروژه‌های خود استفاده کنید.

۱. اسلایدر ساده با CSS

این اسلایدر تنها با HTML و CSS ساخته می‌شود و برای نمایش تصاویر یا متن‌های ساده بسیار مناسب است.

کد HTML:


<div id="slider">
    <figure>
	<img src="">
	<img src="">
	<img src="">
    </figure>
</div>

کد CSS:


#slider {
	overflow: hidden;
}

@keyframes slider {
	0% { left: 0; }
	30% { left: 0; }
	33% { left: -100%; }
	63% { left: -100%; }
	66% { left: -200%; }
	95% { left: -200%; }
	100% { left: 0; }
}
#slider figure {
	width:300%;
	position: relative;
	animation: 9s slider infinite;
}

#slider figure:hover {
	/*animation-play-state: paused; enable for pause on hover*/
}
#slider figure img {
	width: 33.333333333%;
	height : 100%;
	float: left;
}

۲. اسلایدر واکنش‌گرا با جاوااسکریپت

این نوع اسلایدر با جاوااسکریپت ساخته می‌شود و امکان نمایش خودکار تصاویر را فراهم می‌کند.

کد HTML:


<div class="slider">
   <div class="slides">
      <img src="image1.jpg" alt="تصویر ۱">
      <img src="image2.jpg" alt="تصویر ۲">
      <img src="image3.jpg" alt="تصویر ۳">
   </div>
</div>

کد CSS:


.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 400px;
}
.slides img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

کد JavaScript:


const slides = document.querySelectorAll('.slides img');
let index = 0;

setInterval(() => {
    slides[index].style.display = 'none';
    index = (index + 1) % slides.length;
    slides[index].style.display = 'block';
}, 3000);

۳. اسلایدر کاروسل با دکمه

این اسلایدر به کاربران اجازه می‌دهد که با دکمه‌های «بعدی» و «قبلی» بین تصاویر حرکت کنند.

کد HTML:


<div class="carousel">
   <button id="prev">قبلی</button>
       <div class="slides">
       <img src="image1.jpg" alt="تصویر ۱">
       <img src="image2.jpg" alt="تصویر ۲">
       <img src="image3.jpg" alt="تصویر ۳">
   </div>
   <button id="next">بعدی</button>
</div>

کد CSS:


.carousel {
    position: relative;
    width: 100%;
    height: 400px;
}
.carousel button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}
#prev {
    left: 10px;
}
#next {
    right: 10px;
}

کد JavaScript:


const prev = document.getElementById('prev');
const next = document.getElementById('next');
const slides = document.querySelectorAll('.slides img');
let index = 0;

function showSlide(i) {
    slides.forEach((slide, idx) => {
        slide.style.display = idx === i ? 'block' : 'none';
    });
}

prev.addEventListener('click', () => {
    index = (index - 1 + slides.length) % slides.length;
    showSlide(index);
});

next.addEventListener('click', () => {
    index = (index + 1) % slides.length;
    showSlide(index);
});

showSlide(index);

۴. اسلایدر با افکت محو شدن

این اسلایدر با استفاده از جاوااسکریپت افکت محو شدن تصاویر را هنگام جابه‌جایی اعمال می‌کند.

کد HTML:


<div class="fade-slider">
    <div class="slides">
        <img src="image1.jpg" alt="تصویر ۱">
        <img src="image2.jpg" alt="تصویر ۲">
        <img src="image3.jpg" alt="تصویر ۳">
    </div>
</div>

کد CSS:


.fade-slider {
    overflow: hidden;
    width: 100%;
    height: 400px;
    position: relative;
}
.fade-slider .slides img {
    position: absolute;
    width: 100%;
    height: 400px;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

کد JavaScript:


const images = document.querySelectorAll('.fade-slider .slides img');
let index = 0;

function changeImage() {
    images.forEach(img => img.style.opacity = 0);
    images[index].style.opacity = 1;
    index = (index + 1) % images.length;
}

setInterval(changeImage, 3000);

۵. اسلایدر چندگانه

این اسلایدر امکان نمایش همزمان چندین تصویر را به شما می‌دهد و برای گالری‌های تصویری مناسب است.

کد HTML:


<div class="multi-slider">
    <div class="slides">
        <img src="image1.jpg" alt="تصویر ۱">
        <img src="image2.jpg" alt="تصویر ۲">
        <img src="image3.jpg" alt="تصویر ۳">
    </div>
</div>

کد CSS:


.multi-slider {
    overflow: hidden;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
}
.multi-slider .slides img {
    width: 32%;
    height: 100%;
    object-fit: cover;
}

کد JavaScript:


const slides = document.querySelector('.multi-slider .slides');
let index = 0;

function moveSlides() {
    index = (index + 1) % 3;
    slides.style.transform = `translateX(-${index * 100}%)`;
}

setInterval(moveSlides, 3000);

۶. اسلایدر تایپ‌شونده

در این اسلایدر متن‌ها به‌صورت انیمیشنی تایپ و نمایش داده می‌شوند.

کد HTML:


<div class="typing-slider">
    <p class="typing-text">تایپ‌شده اول</p>
    <p class="typing-text">تایپ‌شده دوم</p>
    <p class="typing-text">تایپ‌شده سوم</p>
</div>

کد CSS:


.typing-slider {
    width: 100%;
    height: 100px;
    overflow: hidden;
}
.typing-slider .typing-text {
    display: none;
    font-size: 24px;
    color: #333;
    font-family: "Courier New", monospace;
    white-space: nowrap;
}

کد JavaScript:


const texts = document.querySelectorAll('.typing-slider .typing-text');
let index = 0;

function showText() {
    texts.forEach(text => text.style.display = 'none');
    texts[index].style.display = 'block';
    index = (index + 1) % texts.length;
}

setInterval(showText, 3000);

۷. اسلایدر تمام‌صفحه

این اسلایدر صفحه را به‌طور کامل پوشش می‌دهد و مناسب برای وب‌سایت‌های با طراحی مینیمال است.

کد HTML:


<div class="full-screen-slider">
    <div class="slides">
        <img src="image1.jpg" alt="تصویر ۱">
        <img src="image2.jpg" alt="تصویر ۲">
        <img src="image3.jpg" alt="تصویر ۳">
    </div>
</div>

کد CSS:


.full-screen-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.full-screen-slider .slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

کد JavaScript:


const fullScreenSlides = document.querySelectorAll('.full-screen-slider .slides img');
let index = 0;

function changeSlide() {
    fullScreenSlides.forEach(slide => slide.style.display = 'none');
    fullScreenSlides[index].style.display = 'block';
    index = (index + 1) % fullScreenSlides.length;
}

setInterval(changeSlide, 3000);