ساخت اسلایدر ، اسلایدشو یا Carousel در بخش های مختلف ساید اهمیت بالایی دارد ، تصاویری که در یک چرخه درحال چرخیدن هستن و به صورت منظم یا تصادفی برای کاربران به نمایش داده میشوند ، در صفحه اصلی ، در صفحات محصولات و …. میتوانند کاربرد بالایی داشته باشند.
در قسمت های پیشین دوره رایگان بوت استرپ 4 در رابطه با موضوعات مختلفی صحبت کردیم که پیشنهاد میشود قبل از ورود به این آموزش حتما قسمت های پیشین دوره رایگان بوت استرپ 4 را مطالعه فرمایید.
چگونه اسلایدر بسازیم ؟
در مثال زیر یک اسلایدر با کنترل کننده ساخته شده است که امکان تغییر عکس ها را به ما میدهد:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div id="demo" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="la.jpg" alt="Los Angeles"> </div> <div class="carousel-item"> <img src="chicago.jpg" alt="Chicago"> </div> <div class="carousel-item"> <img src="ny.jpg" alt="New York"> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> |
توضیحات قسمت های مختلف اسلایدر
| کلاس | توضیحات |
| .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”> اضافه کنید تا توضیحات به اسلایدر شما اضافه شود.
برای درک بهتر این موضوع به مثال زیر توجه کنید :
|
1 2 3 4 5 6 7 |
<div class="carousel-item"> <img src="la.jpg" alt="Los Angeles"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>We had such a great time in LA!</p> </div> </div> |
پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
درصورت داشتن هرگونه سوال میتوانید از بخش کامنت ها با ما در ارتباط باشید.
2 Comments
Join the discussion and tell us your opinion.
سلام الان میشه بگید لینک دانلود تمام قسمت ها در کجاست من فقط قسمت 23و24و25رو میتونم ببینم
درود فراوان لینک دانلودی برای آموزش ها وجود نداره ، دسترسی به تک تک قسمت های دوره روی سرفصل ها وجود داره