مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 4 ، را دنبال می کنند. در اغلب قالب های وب سایت از یک ویژگی slideshow برای نمایش محصولات و امکانات وب سایت ها استفاده می کنند.که با نام Carousel شناخته می شود، که بسیار جلب توجه می کند. در Bootstrap 4 نیز این قابلیت طراحی شده و به راحتی قابل پیاده سازی است.برای آشنایی با قابلیت Carousel در Bootstrap 4 ادامه ی این مباحث را دنبال کنید.
قابلیت Carousel در Bootstrap 4
Carousel یک نمایشگر اسلایدی، برای نمایش عناصر html در یک سیکل چرخشی است.
قابلیت Carousel در Bootstrap 4
چگونگی ایجاد قابلیت Carousel
مثال زیر چگونگی ایجاد یک قابلیت Carousel پایه را بخوبی نشان می دهد:
مثال :
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> |
تشریح کلاس های بکار رفته در مثال فوق:
| Class | Description |
|---|
.carousel | یک carousel ایجاد می کند |
.carousel-indicators | یک شاخص برای carousel اضافه می کند. این نقاط کوچک در پایین هر اسلاید است. (که نشان می دهد که چه تعداد اسلاید، در carousel وجود دارد و کاربر در حال مشاهده کدام اسلاید است.) |
.carousel-inner | اسلایدها را به carousel اضافه می کند. |
.carousel-item | محتوای هر اسلاید را مشخص می کند. |
.carousel-control-prev | یک button سمت چپ (قبلی) را به carousel اضافه می کند، که به کاربر اجازه می دهد، اسلایدهای قبلی را دوباره بررسی کند. |
.carousel-control-next | یک button سمت راست (بعدی) را به carousel اضافه می کند، که به کاربر امکان می دهد، اسلایدهای بعدی را مشاهده کند. |
.carousel-control-prev-icon | این کلاس، با کلاس button “قبلی” مورد استفاده قرار می گیرد. |
.carousel-control-next-icon | این کلاس، با کلاس button “بعدی” مورد استفاده قرار می گیرد. |
.slide | افکت و انیمیشن کششی CSS را هنگام کشیدن از یک مورد به بعدی اضافه می کند. |
افزودن عنوان به اسلایدها
افزودن عنوان به اسلایدها
با افزودن عنصر <div class="carousel-caption"> به هر کدام از عناصر <div class="carousel-item"> به هر اسلایدی عنوان اضافه کنید:
مثال:
مثال :
| <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> |
کلام آخر
در این آموزش شما را با یکی از افکت های اسلاید شوی پر کاربرد در دنیای وب آشنا کردیم. با استفاده از قابلیت Carousel محصولات وب سایت خود را بصورت اسلایدشو و جذاب نمایش دهید. امیدواریم که از مباحث آشنایی با قابلیت Carousel در Bootstrap 4 ، بخوبی استفاده کرده باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
