با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند. امروزه در اغلب وب سایت ها، مخصوصا فروشگاههای اینترنتی و وب سایت های خبری از یک طراحی اسلاید شو برای نمایش محصولات ، اخبار و … در ابتدای صفحه ی اصلی وب سایت، استفاده می شود. این طرح اسلاید شو که در یک سیکل زمانی تعیین شده تصاویری مشخص شده را نمایش می دهد. برای ایجاد جذابیت و طراحی کاربر پسند، بسیار مفید و کارآمد است، فریم ورک bootstrap نیز از یک پلاگین با نام carousel برای ایجاد طراحی های اسلاید شو ، استفاده می کند. در ادامه ی مباحث برای آشنایی با پلاگین carousel در bootstrap 3 با ما همراه باشید.
پلاگین carousel یک کمپوننت در فریم ورک bootstrap است. که برای ایجاد یک اسلاید شو، استفاده می شود.
نکته: پلاگین carousel در bootstrap 3 در مرورگرهای Internet Explorer 9 و قدیمی تر، پشتیبانی نمی شوند.(چون پلاگین carousel از افکت ها و انیمیشن های css3 استفاده می کند).
مثال زیر چگونگی ایجاد یک پلاگین carousel پایه را در bootstrap 3 بخوبی نشان می دهد:
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> والد:
عنصر carousel از یک id(که در این مثال: id="myCarousel"
می باشد) برای کنترل توایع استفاده می کند.
کلاس class="carousel"
مشخص می کند که عنصر <div>
شامل یک carousel است.
کلاس .slide
نیز انیمیشن ها و افکت های css را که حالت نمایش آیتم های اسلاید را کنترل می کنند، را شامل می شود.
ویژگی data-ride="carousel"
به bootstrap اعلام می کند که بلافاصله بعد از بارگزاری صفحه وب، اسلایدها را اجرا کند.
بخش “Indicators”:
indicator ها نقطه های کوچک پایین هر اسلاید هستند که تعداد اسلاید ها و اینکه کدام اسلاید اجرا شده را نشان می دهند.
indicator ها در یک لیست مرتب شده با کلاس .carousel-indicators
قرار می گیرند.
صفت data-target
به id پلاگین carousel متصل می شود.
صفت data-slide-to
زمانیکه روی نقطه های پایین اسلاید کلیک کنید، اسلاید بعدی را برای نمایش مشخص می کند.
بخش “Wrapper for slides”
اسلایدها در یک عنصر <div>
با کلاس .carousel-inner
تعریف می شوند.
محتوای هر اسلاید نیز داخل یک عنصر <div>
با کلاس .item
تعریف می شود. محتوا می تواند متن یا تصویر باشد.
کلاس .active
باید به یکی از آیتم های carousel اضافه شود، در غیر این صورت carousel نمایش داده نمی شود.
این بخش کدی را برای افزودن دو button راست و چپ به carousel اضافه می کند. برای اینکه کاربر بتواند بصورت دستی اسلایدهای قبلی و بعدی را مشاهده کند.
صفت data-slide
کلامات کلیدی "prev"
و"next"
را می پذیرد. که موقعیت اسلاید جاری را نسبت به اسلاید قبلی و بعدی مشخص می کند.
افزودن <div class="carousel-caption">
به هر کدام از کدهای <div class="item">
یک عنوان برای هر اسلاید ایجاد می کند.
مثال:
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> |
ایجاد یک اسلایدشو با پلاگین carousel در صفحه اصلی وب سایت، می تواند گزینه ی بسیار مناسبی برای نمایش و معرفی محصولات مهم و کلیدی وب سایت به همراه ویژگی های آنها، باشد. امیدواریم که مباحث آشنایی با پلاگین carousel در bootstrap 3 مورد توجه و رضایت شما قرار گرفته باشد.