Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت بیست و پنجم آموزش بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

26 , شهریور , 1399

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

ساخت اسلایدر ، اسلایدشو یا Carousel در بخش های مختلف ساید اهمیت بالایی دارد ، تصاویری که در یک چرخه درحال چرخیدن هستن و به صورت منظم یا تصادفی برای کاربران به نمایش داده میشوند ، در صفحه اصلی ، در صفحات محصولات و …. میتوانند کاربرد بالایی داشته باشند.

در قسمت های پیشین دوره رایگان بوت استرپ ۴ در رابطه با موضوعات مختلفی صحبت کردیم که پیشنهاد میشود قبل از ورود به این آموزش حتما قسمت های پیشین دوره رایگان بوت استرپ ۴ را مطالعه فرمایید.

چگونه اسلایدر بسازیم ؟

در مثال زیر یک اسلایدر با کنترل کننده ساخته شده است که امکان تغییر عکس ها را به ما میدهد:

توضیحات قسمت های مختلف اسلایدر

کلاستوضیحات
.carouselبرای ساخت اسلایدر استفاده میشود.
.carousel-indicatorsبرای اضافه کردن نقاط کوچک در زیر عکس برای نمایش تعداد عکسها و هدایت کردن آنها استفاده میشود.
.carousel-innerاسلایدها را به اسلایدر اضافه میکند.
.carousel-itemبرای افزودن محتوای هر اسلاید به صورت اختصاصی استفاده میشود.
.carousel-control-prevبرای افزودن فلش هدایت به عقب یا برگشت به عقب از این کلاس استفاده میشود.
.carousel-control-nextبرای افزودن فلش هدایت به جلو یا رفتن به جلو از این کلاس استفاده میشود.
.carousel-control-prev-iconبا استفاده از کلاس .carousel-control-prev استفاده میشود تا به صورت دقیق دکمه ایجاد شود.
.carousel-control-next-iconبا استفاده از کلاس .carousel-control-next استفاده میشود تا به صورت دقیق دکمه ایجاد شود.
.slideهنگام کشیدن از یک مورد به مورد دیگر ، انتقال CSS و جلوه انیمیشن را اضافه می کند. اگر این افکت را نمی خواهید این کلاس را حذف کنید

افزودن توضیحات به اسلایدر

برای افزودن توضیحات کافی است تگ <div class=”carousel-caption”> را در زیر بخش <div class=”carousel-item”> اضافه کنید تا توضیحات به اسلایدر شما اضافه شود.

برای درک بهتر این موضوع به مثال زیر توجه کنید :

پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

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

مرتضی افضلی

مرتضی افضلی

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

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

2 پاسخ به "قسمت بیست و پنجم bootstrap : نحوه ی ساخت اسلایدر در بوت استرپ ۴"

  1. سلام الان میشه بگید لینک دانلود تمام قسمت ها در کجاست من فقط قسمت ۲۳و۲۴و۲۵رو میتونم ببینم

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *