چطور یک اسلایدشو زیبا بسازیم؟ آموزش ساخت اسلایدشو 2022

اسلایدشو های زیبا طراحی کنید

رحمت ابراهیمیان قاجاری
آموزش ساخت اسلایدشو - ساخت اسلاید شو - اسلاید شو
آموزش ساخت اسلایدشو - ساخت اسلاید شو - اسلاید شو

در این مطلب با آموزش ساخت اسلایدشو آشنا خواهید شد. اسلایشو به عنوان یکی از المان های پرکاربرد و زیبای وبسایت ها، المانی است که مجموعه ای از تصاویر به همراه متنی (یا بدون متن) را نمایش می دهد. با ما همراه باشید تا با روش های ساخت اسلایدشو های زیبای جاوااسکریپتی آشنا شوید.

طرح نهایی اسلایدشو

آموزش ساخت اسلایدشو: کدهای HTML

در قدم اول و پیش از هر چیزی، نیاز داریم تا با استفاده از کدهای HTML، بدنه اسلایدشو رو تشکیل دهیم. برای این منظور به یک نگه دارنده برای کل اسلایدشو (تگ div با کلاس slideshow-container) و تعدادی نگه دارنده برای هر اسلاید (تگ div با کلاس slides) نیاز داریم.

هر اسلاید حاوی یک تصویر، یک متن به عنوان کپشن و یک شماره اسلاید است. کدهای HTML اسلاید شو ما به این صورت است:

    <!-- Slideshow container -->
    <div class="slideshow-container">

        <!-- Full-width images with number and caption text -->
        <div class="slides fade">
            <div class="numberslide">1 / 4</div>
            <img src="image/slide1.jpg">
            <p class="caption">جدیدترین خودرو بوگاتی</p>
        </div>

        <div class="slides fade">
            <div class="numberslide">2 / 4</div>
            <img src="image/slide2.jpg">
            <p class="caption">ماوس لاجیتک</p>
        </div>

        <div class="slides fade">
            <div class="numberslide">3 / 4</div>
            <img src="image/slide3.jpg">
            <p class="caption">کوه های آلپ</p>
        </div>

        <div class="slides fade">
            <div class="numberslide">4 / 4</div>
            <img src="image/slide4.jpg">
            <p class="caption">فواید نوشیدن قهوه</p>
        </div>
        <!-- Next and previous buttons -->
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br>

    <!-- The dots/circles -->
    <div class="dots">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
        <span class="dot" onclick="currentSlide(4)"></span>
    </div>

برای ساخت دکمه های قبل و بعد از دو دکمه با کلاس prev و next استفاده می کنیم.

همچنین برای نمایش اسلاید فعال، از یک سری دایره با کلاس dot استفاده خواهیم کرد.

توضیحات کد HTML:

آموزش ساخت اسلایدشو: کدهای CSS

در مرحله دوم نوبت به کدهای CSS می رسد. کدهای CSS اسلایدشو:

@font-face {
    font-family: estedad;
    src: url('fonts/Estedad-Medium.woff2');
}
* {
    box-sizing: border-box
}
body{
    font-family: estedad;
    direction: rtl;
    text-align: center;
}
/* Slideshow container */
.slideshow-container {
    width: 1000px;
    max-width: 100%;
    position: relative;
    margin: auto;
}

/* Hide the images by default */
.slides {
    display: none;
}

.dots{
    text-align: center;
}
/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    user-select: none;
}

.prev {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.next {
    left: 0;
    border-radius: 0 3px 3px 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: #5333edaa;
}

/* Caption text */
.caption {
    color: #f2f2f2;
    font-size: 1.2rem;
    padding: 1rem 2rem;
    position: absolute;
    bottom: 1.5rem;
    width: 100%;
    text-align: center;
    background-color: #5333ed99;
}

/* Number text (1/3 etc) */
.numberslide {
    color: #f2f2f2;
    font-size: 1.5rem;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    background: #5333ed55;
    margin: 20px;
    width: 100px;
    height: 50px;
    display: flex;
    border-radius: 5px;
    justify-content: center;
    align-items: center;    
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #5333ed;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
img {
    box-shadow: 5px 5px 10px #11111155;
    width: 100%;
}
.active,
.dot:hover {
    background-color: #00b051;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

توضیحات کد CSS:

آموزش ساخت اسلایدشو: کدهای جاوااسکریپت JS

در این جا نویت به کدهای جاوااسکریپت می رسد. بدون این کدها طراحی اسلایدشو غیرممکن است.

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("slides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) { slideIndex = 1 }
    if (n < 1) { slideIndex = slides.length }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}

توضیحات کدهای جاوااسکریپت:

جهت دانلود فایل نهایی پروژه بر روی دکمه زیر کلیک کنید:

دانلود فایل نهایی پروژه طراحی و ساخت یک اسلایدشو
میانگین امتیازات : 4.9/5 - تعداد امتیازات: 8 امتیاز
نوشته های مشابه
↑
خروج از نسخه موبایل