چطور یک اسلایدشو زیبا بسازیم؟ آموزش ساخت اسلایدشو 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:

• کد اسلایدشو درون یک نگهدارنده با کلاس slideshow-container قرار دارد.
• در مجموع 4 اسلاید داریم. برای هر اسلاید، یک نگهدارنده با کلاس slides داریم.
• در هر اسلاید، یک تصویر، یک متن به عنوان کپشن (تگ p با کلاس caption) و یک شمارنده (تگ div با کلاس numberslide) برای شماره اسلاید قرار می گیرد.
• کلاس fade برای اعمال جلوه انیمیشنی fade (حالت محو) به اسلاید ها به هنگام تغییر از یک اسلاید به اسلاید دیگر در نظر گرفته شده است.
• تگ های a با کلاس next و prev به عنوان دکمه های قبل و بعد (برای رفتن به اسلایدهای قبلی و بعدی) در نظر گرفته شده اند. به هنگام کلیک بر روی هر کدام، تابع جاواسکریپتی plusSlides اجرا می شود. این تابع بر اساس مقداری که دریافت می کند (1 یا -1) به صورت تغییردهنده اسلاید (به قبل یا بعد) عمل می کند.
• در انتها تعدادی دایره با کلاس dot درون یک نگهدارنده با کلاس dots قرار دارند. این دکمه ها به محض تغییر اسلاید، متناسب با شماره اسلاید، تغییر استایل پیدا می کنند و نشان دهنده شماره اسلاید فعال می باشند. با کلیک بر روی هر دایره می توان به اسلاید مربوطه سوئیچ کرد. با کلیک بر روی هر نقطه، تابع currentSlide اجرا می شود که با توجه به مقدار دریافتی در آرگومان این تابع (از 1 تا 4)، اسلاید مربوطه نمایان می شود.

آموزش ساخت اسلایدشو: کدهای 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:

• در اولین قسمت، با استفاده از قانون font-face، فونت استعداد را لود کردیم. جهت دانلود فونت استعداد کلیک کنید.
• در خط پنجم، با استفاده از ویژگی box-sizing، برای تمام المان ها (سلکتور ستاره تمام المان های HTML را انتخاب می کند) مقدار border-box را تنظیم می کنیم. با این کار، وقتی به المانی width می دهید، این width شامل عرض ناحیه محتوا، ناحیه border و ناحیه padding می شود و طرح بندی ما با افزودن حاشیه و پدینگ به هم نمی ریزد.
• در خط 8، به تگ body فونت اعمال می کنیم. با این کار به تمام المان های صفحه این فونت به ارث می رسد. همچنین چون در حال طراحی یک صفحه فارسی هستیم، با ویژگی ها direction:rtl چینش المان های صفحه را از راست به چپ (فارسی نویس) مرتب می کنیم. همچنین تمام متن ها را با کمک text-align:center وسط چین می کنیم.
• نوبت به نگه دارنده اسلایدشو می رسد. در خط 14، به کلاس نگه دارنده اسلایدشو، عرض 1000 پیکسل و حداکثر عرض 100% می دهیم. با این کار در صورتی که ابعاد صفحه نمایش کاربر بیش از 1000 باشد، عرض اسلایدشو 1000 پیکسل خواهد بود. در صورتی که عرض صفحه نمایش کاربر کمتر از 1000 باشد، تمام عرض صفحه را اشغال خواهد کرد (100 درصد خواهد بود). با این تکنیک، طراحی ما واکنشگرا خواهد بود.
• همچنین با استفاده از ویژگی margin:auto اسلایدشو در وسط صفحه قرار خواهد گرفت.
• ویژگی position:relative به این منظور به این المان داده شده است که چون بعدا می خواهیم به المان های شمارنده صفحه و دکمه های قبل و بعد position:absolute بدهیم و جاگیری آن المان ها را نسبت به نگهدارنده اسلایدشو تعیین کنیم، می بایست به نگهدارنده اسلایدشو، ویژگی position:relative بدهیم.
• در خط 22 نوبت به المان نگهدارنده هر اسلاید با کلاس slides می رسد. در حالت عادی، اسلاید ها باید display:none داشته باشند. یعنی اسلاید ها ناپدید باشند. به جز یک اسلاید در هر لحظه که توسط جاوااسکریپت، به آن اسلاید، display:block داده خواهد شد.
• در خط 26، به نگهدارنده دایره های نشان دهنده اسلایدها (در پائین اسلایدشو) تراز متن وسط چین می دهیم تا دایره ها در وسط تراز شوند.
• در خط 30 کلاس های prev و next مربوط به دکمه ها (پیکان های) قبل و بعد هستند. این دکمه ها دارای position:absolute هستند و از بالا 50% فاصله دارند. همچنین وقتی ماوس روی این دکمه ها برود به شکل علامت اشاره گر خواهد بود (cursor:pointer)
• عرض این المان ها width:auto بوده و از پائین 22 پیکسل فاصله خواهند داشت تا دقیقا در وسط تراز شوند. به هر کدام 16px پدینگ، رنگ متن سفید، وزن فونت بولد و اندازه فونت 18 پیکسل دادیم. همچنین از transition استفاده می کنیم تا به هنگام هاور کردن روی این دکمه ها رنگ پس زمینه آن ها را آرامی تغییر کد. ویژگی user-select:none شرایطی را فراهم می کنم تا کاربر نتواند متن موجود (همان آیکن) در این دکمه ها را انتخاب کند.
• در خط 45 دکمه قبل را در سمت راست تراز کرده و گوشه های سمت بالا و پائین چپ را 3 پیکسل گرد می کنیم.
• در خط 49 دکمه بعد را در سمت چپ تراز کرده و گوشه های سمت بالا و پائین راست را 3 پیکسل گرد می کنیم.
• در خط 55 هر دو دکمه به هنگام هاور کردن، یک پس زمینه بنفش رنگ شفاف می گیرند تا زیبایی آن ها بیشتر شود.
• در خط 61 به متن کپشن، استایل می دهیم. این متن یک متن تقریبا سفید رنگ، با اندازه فونت 1.2rem، پدینگ 1rem از بالا و 2rem از پائین، پوزیشن absolute با 1.5rem فاصله از پائین، متن تراز وسط و پس زمینه بنفش شفاف است. همچنین به خاطر ویژگی position:absolute باید برای تمام عرض شدن المان به آن عرض 100% بدهیم. وقتی یک المان این ویژگی را بگیرد شبیه به یک المان inline-block می شود و برای تمام عرض شدن آن باید به آن عرض 100 درصد بدهید.
• در خط 73 نوبت به شماره اسلاید ها می رسد. ای المان ها هم position:absolute دارند و از در بالا (top:0) و راست (پیش فرض با توجه به direction) قرار می گیرند.
• برای وسط در وسط شدن متن آن (در راستای افق و عمود)، به آن ویژگی display:flex دادیم. با justify-content:center در راستای افقی وسط و با ویژگی align-items:center در راستای عمود در وسط قرار میگیرد. آموزش flexbox را اینجا بخوانید.
• در خط 90 نوبت به دایره های نشانگر اسلاید ها (با کلاس dot) می رسد. برای ایجاد دایره به هرکدام عرض و ارتفاع 15 پیکسل داده شده و با border-radius:50% کاملا دایره می شوند. پس زمینه آن ها بنفش کم رنگ بوده و یک transition برای حالت هاور به آن ها داده شده است.
• در خط 100 به تصاویر عرض 100 درصد دادیم . کمی سایه (box-shadow) اضافه کردیم.
• در خط 104 به دایره ها در حالی که هاور شوند پس زمینه سبز دادیم. همچنین وقتی اسلایدی فعال باشد، دایره مربوط به آن کلاس active خواهد گرفت (توسط کد جاوااسکریپت). در حالت active هم پس زمینه این دایره فعال، سبز خواهد بود.
• در خط 100 کلاس fade را داریم. این کلاس به هر المانی که دارای کلاس fade باشد یک انیمیشن (انیمیشن fade) اعمال می کنید. در اینجا با animation-name:fade انیمیشن مورد نظر را معرفی کردیم. این انیمیشن توسط قانون keyframes (در خط 115) معرفی شده است.همچنین مدت اجرای انیمیشن 1.5 ثانیه در نظر گرفته شده است.
• وقتی اسلاید را عوض می کنید، با این انیمیشن fade اسلاید قبلی ناپدید و اسلاید جدید نمایان می شود.
• در خط 15 انیمیشن fade تعریف شده است. برای تعریف آن دو فریم ابتدایی (from) و انتهایی (to) تعیین کردیم. در ابتدا opacity:0.4 است (یعنی المان محو است) و در انتها کاملا کدر و غیرشفاف خواهد شد (opacity:1).

آموزش ساخت اسلایدشو: کدهای جاوااسکریپت 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";
}

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

• در خط اول با دستور let یک متغیر به نام slideIndex معرفی و مقدار اولیه آن را 1 قرار دادیم. این متغیر برای تعیین شماره اسلاید فعال کاربرد دارد. به صورت پیش فرض اولین اسلاید فعال است.
• در خط دوم، این مقدار به تابع showSlides داده می شود. این تابع را در کدهای پائین تر تعریف کردیم.
• در خط 5 تابعی برای کنترل دکمه های قبل و بعد ساختیم. این تابع با نام plusSlides با هربار کلیک دکمه های قبل و بعد یک مقدار می گیرد. این مقدار برای دکمه قبل -1 و برای دکمه بعد 1 است و یک شماره به شماره اسلاید فعال اضافه/کم می کند. برای ثمال اگر شماره اسلاید فعال 1 باشد، با کلیک بر روی دکمه بعد، یک واحد به شماره اسلاید فعال اضافه می شود (می شود 2) و اسلاید شماره 2 فعال خواهد شد. به خط 6 نگاه کنید.
• در خط 10 تابعی با نام currentSlide ساختیم. این تابع با کلیک بر روی دایره ها (dot) فراخوانی می شود. با هربار فراخوانی این تابع (کلیک روی dot)، یک عدد متناسب با شماره دایره (که متناسب با شماره اسلاید است) به این تابع داده می شود. این مقدار به تابع showSlides داده می شود. به خط 11 نگاه کنید.
• در خط 14 تابع showSlides تعریف شده است. این تابع همواره مقداری (n) دریافت می کند که نمایانگر شماره اسلایدی است که باید نمایش داده شود.
• در خط 15 متغیر شمارنده i را تعریف کردیم. این متغیر شمارنده تعداد اسلایدهاست.
• در خط 16 تمام المان های دارای کلاس slides را توسط دستور document.getElementsByClassName دریافت و در متغیر slides به صورت یک آرایه ذخیره کردیم.
• همچنین در خط 17 تمام المان های دارای کلاس dot را توسط دستور document.getElementsByClassName دریافت و در متغیر dots به صورت یک آرایه ذخیره کردیم.
• در خط 18 یک دستور if داریم. این دستور بررسی می کند که آیا شماره اسلاید از مجموع تعداد کل اسلاید ها بیشتر است یا خیر. اگر شماره اسلاید از (در اینجا) 4 بیشتر بود، شماره اسلاید فعال را 1 تنظیم می کند. چون 4 تا اسلاید داریم. وقتی n=5 بشود، باید دوباره اسلاید اول فعال شود. چون با هربار کلیک بر روی دکمه nex یک واحد به این مقدار اضافه می شود.
• در خط 19 مجددا دستور if داریم. با هربار کلیک بر روی دکمه prev، مقدار شماره اسلاید (در اینجا n) یک واحد کم می شود. چون مقدار n نمی تواند صفر یا منفی باشد، به محض اینکه مقدار n به کمتر از 1 برسد (n<1)،باید مقدار n برابر آخرین اسلاید بشود. دستور slideIndex = slides.length مقدار آخرین آرایه اسلایدها را بر میگرداند.
• در خط 20 یک حلقه در آرایه اسلایدها زدیم. در هر تکرار، یک اسلاید (با کلاس slides) انتخاب و مقدار ویژگی display در آن برابر none می شود. فرض کنید n=2 است. در این حالت تمام اسلاید ها ناپدید می شوند. بعدا به اسلاید فعال display:block خواهیم داد.
• در خط 23 حلقه ای در آرایه dot زدیم و به هر اسلاید که دارای کلاس active باشد، این کلاس با یک مقدار خالی تعویض می شود. به نوعی مقدار Active را از تمام dot ها خواهیم برداشت.
• پس تا اینجا تمام اسلایدها ناپدید بوده و تمام dot ها هم غیرفعال هستند.
• در خط 26 مقدار slideIndex استفاده خواهد شد. این مقدار یا برابر n است، یا برابر 1 و یا 4 (البته در این مثال برابر 4 است). در خط 18 و 19 مقدار slideIndex کنترل شده است. اگر n<1 باشد، مقدار slideIndex=1 و اگر n بزرگتر از آخری اسلاید باشد slideIndex=4 می شود.
• از آنجایی که جاواسکریپت zero index است (یعنی آرایه ها از صفر شماره می گیرند)، لذا شماره واقعی اسلاید فعال یک عدد بیشتر از شاخص آن است. یعنی اسلاید اول دارای شاخص صفر، اسلاید دوم شاخص 1 و …
• پس برای تعیین اسلاید فعال، مقدار slideIndex باید یک واحد کم شود و به تابع slides داده شود. در خط 26 اگر slideIndex=2 باشد (یعنی اسلاید 2 فعال باشد)، پس این اسلاید در آرایه slides دارای ایندکس 1 است (slideIndex – 1). این المان در خط 26 دارای display:block خواهد شد و لذا نمایان می شود.
• همین اتفاق برای dot فعال در خط 27 می افتد. یعنی وقتی slideIndex =2 باشد، dot فعال در آرایه dots دارای ایندکس 1 است که به لیست کلاس های آن کلاس active افزوده شده و این dot دارای استایل Active می شود.

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