افزونه و کلاس Carousel در بوت استرپ bootstrap

مقالات
افزونه Carousel یا چرخ دنده بوت استرپ
پلاگین چرخ دنده یک جزء برای چرخیدن از طریق عناصر، مانند یک چرخ فلک (نمایش اسلاید) است.
[highlight color=”yellow”]نکته: پلاگین ها را می توان به طور جداگانه استفاده کرد(با استفاده از فایل “carousel.js” فرد بوت استرپ) یا همه در یک چیز (با استفاده از bootstrap.js یا bootstrap.min.js).[/highlight]
[highlight color=”yellow”]توجه: چرخ فلک ها به درستی در اینترنت اکسپلورر 9 و نسخه جدید تر پشتیبانی نمی شوند (زیرا آنها برای انتقال اثر اسلاید از CSS3 استفاده می کنند و انیمیشن ها را از بین می برند ).[/highlight]
چگونه یک 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 32 33 |
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="la.jpg" alt="Los Angeles"> </div> <div class="item"> <img src="chicago.jpg" alt="Chicago"> </div> <div class="item"> <img src="ny.jpg" alt="New York"> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> |
توضیح مثال بالا
خارج از محدوده <div>:
carosel نیاز به استفاده از id(در این مورد ID = “myCarousel”) دارد برای کنترل عملکرد درست carosel ها.
class = “carousel” مشخص می کند که این <div> حاوی carosel است.
کلاس .slide یک افکت CSS transition و animation اضافه می کند که در هنگام نمایش یک آیتم جدید اسلایدها جدید ایجاد می شود یا اسلاید ورق می خورد. اگر این افکت را نمی خواهید اعمال شود، این کلاس را حذف کنید.
ویژگی data-ride = “carousel” به Bootstrap میگوید که وقتی صفحه بارگذاری می شود، انیمیشن carosel شروع به کار میکند.
بخش «indicator ها»:
indicator ها نقطه های کوچکی در پایین هر اسلاید (که نشان می دهد که چند اسلایدر در carosel وجود دارد و کدام اسلایدر کاربر در حال مشاهده است).
indicator ها در یک لیست مرتب orderded list با کلاس های.carousel-indicators مشخص می شوند.
خصیصه data-target به id چرخ فلک اشاره می کند.
خصیصه data-slide-to مشخص می کند که کدام اسلاید برای رفتن به، هنگام کلیک کردن بر روی نقطه خاص است.
بخش “بسته بندی برای اسلاید Wrapper for slides“:
اسلایدها در <div> با کلاس carousel-internal. مشخص شده است.
محتویات هر اسلاید در <div> با کلاس .item تعریف شده است. اینجا می تواند متن یا تصاویر باشد.
کلاس.active باید به یکی از اسلایدها اضافه شود. در غیر این صورت، carosel قابل مشاهده نخواهد بود.
بخش کنترل چپ و راست:
این کد اضافه می کند دکمه های “سمت چپ” و “راست” که اجازه می دهد تا کاربر به عقب و جلو بین اسلایدها دستی.
ویژگی data-slide کلمات کلیدی “prev” یا “next” را قبول می کند، که موقعیت اسلاید را نسبت به موقعیت فعلی آن تغییر می دهد.
اضافه کردن توضیحات یا کپشن به اسلاید بوت استرپ
برای ایجاد یک عنوان برای هر اسلاید، در <div class = “item”> <div class = “carousel-caption”> را وارد کنید:
مثال
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="la.jpg" alt="Chania"> <div class="carousel-caption"> <h3>Los Angeles</h3> <p>LA is always so much fun!</p> </div> </div> <div class="item"> <img src="chicago.jpg" alt="Chicago"> <div class="carousel-caption"> <h3>Chicago</h3> <p>Thank you, Chicago!</p> </div> </div> <div class="item"> <img src="ny.jpg" alt="New York"> <div class="carousel-caption"> <h3>New York</h3> <p>We love the Big Apple!</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> |
مطالب زیر را حتما مطالعه کنید
کلاس collapse در بوت استرپ bootstrap
کلاس jumbotron در بوت استرپ
فیلترهای بوت استرپ
افزونه Affix بوت استرپ
افزونه Scrollspy بوت استرپ
افزونه Popover بوت استرپ
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام به غیر از animation که کلاس slide هست animation دیگری هم داریم برای نمایش اسلاید ها؟