آموزش کار با پلاگین Carousel جهت ساخت اسلایدر
سلام. در ادامه مطالب آموزشی بوت استرپ توی این مطلب آموزش کار با پلاگین Carousel جهت ساخت اسلایدر در بوت استرپ رو خدمت دوستان ارائه می نماییم. پلاگین Carousel یک کامپوننت برای ایجاد حلقه بر روی عنصرهامی باشد، مانند یک اسلایدشو. لطفا در ادامه مطلب با ما همراه باشید…
آموزش کار با پلاگین Carousel جهت ساخت اسلایدر
پلاگین Carousel یک کامپوننت برای ایجاد یک حلقه مانند Carousel در بین عناصر است. (اسلاید شو)
نکته : پلاگین ها را میتوان به صورت جداگانه اضافه کرد. ( برای استفاده از فایل جداگانه بوت استرپ از کلاس carousel.js استفاده کنید.) و یا به صورت یکجا (از کلاس های bootstrap.min.js یا bootstrap.js استفاده نمایید.)
طریقه ساخت یک اسلایدشو با 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="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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img_chania.jpg" alt="Chania"> </div> <div class="item"> <img src="img_chania2.jpg" alt="Chania"> </div> <div class="item"> <img src="img_flower.jpg" alt="Flower"> </div> <div class="item"> <img src="img_flower2.jpg" alt="Flower"> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> |
جهت مشاهده مثال این تمرین کلیک نمایید
توضیح مثال بالا :
بیرونی ترین و خارجی ترین عنصر <div> :
برای ساخت کروسل ها نیازمند استفاده از یک Id برای کنترل درست تنظیمات هستیم ( در این مورد id=”myCarousel” )
کلاس class=”carousel” وجود یک کروسل را در عنصر <div> نشان می دهد. کلاس .slide یک انتقال CSS و افکت انیمیشنی اضافه میکند که باعث حالت اسلایدی گرفتن عکسا هنگام نشان دادن ایتم های بعدی میشود. اگر افکت اسلاید را نمیخواهید از این بخش صرف نظرکنید.
خاصیت data-ride=”carousel” باعث شروع حرکت انیمیشنی کروسل بلافاصله به هنگام لود شدن صفحه میشود.
آموزش کار با پلاگین Carousel جهت ساخت اسلایدر
بخش Indicator ها در بوت استرپ
Indicator ها همان دایره ها/نقطه های کوچک پایین صفحه هستند که نشان میدهند چند اسلاید دیگر در کروسل وجود دارد و در حال حاضر در کدام اسلاید هستیم.
Indicator ها در یک لیست منظم با کلاس carousel-indicators مشخص می شوند.
کلاس data-target به Id کروسل اشاره میکند.
کلاس data-slide-to مشخص میکند که هنگام کلیک کردن روی یک دکمه خاص به کدام اسلاید بریم.
بخش Wrapper for slides
اسلایدرها در عنصر <div> با کلاس carousel-inner مشخص میشوند.
محتوی هر اسلاید در یک عنصر <div> با کلاس .item تعریف می شود. این محتوی میتواند متن و یا تصویر باشد.
کلاس active باید به یکی از اسلاید ها اضافه شود. در غیر این صورت کروسل مرئی و قابل مشاهده نخواهد بود.
بخش Left and rigt controls
این بخش دکمه های “راست” و “چپ” را به اسلاید اضافه میکند که به کاربر اجازه میدهد به صورت دستی اسلاید ها را عقب جلو کند.
خاصیت data-slide کلمات کلیدی (keywords) مانند “next” یا “prev” را می پذیرد که موقیعت اسلاید را بسته به شرایط کنونی اش تغییر میدهد .
اضافه کردن کپشن به اسلاید ها
برای ساخت کپشن برای هراسلاید کلاس <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 46 47 48 49 50 51 52 53 54 |
<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> <li data-target="#myCarousel" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img_chania.jpg" alt="Chania"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="img_chania2.jpg" alt="Chania"> <div class="carousel-caption"> <h3>Chania</h3> <p>The atmosphere in Chania has a touch of Florence and Venice.</p> </div> </div> <div class="item"> <img src="img_flower.jpg" alt="Flower"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </div> </div> <div class="item"> <img src="img_flower2.jpg" alt="Flower"> <div class="carousel-caption"> <h3>Flowers</h3> <p>Beatiful flowers in Kolymbari, Crete.</p> </div> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> |
جهت مشاهده مثال این تمرین کلیک نمایید
برای تازه شدن دیر نیست
موفق و پیروز باشید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲ شهریور ۱۳۹۵
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- رپورتاژ
- فروشگاه
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- Go
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
سلام تو قسمت تست همین کدی که نوشتید درست کار نمیکنه و عکس هارو زیر هم نشون میده
سلام
با تشکر از آموزش های خوبتون
من کد اسلایدشو رو قرار دادم و به درستی جواب میده اما من میخوام سایز تصاویر اسلاید رو با width , height تغییر بدم ولی متاسفانه هیچ تغییری در سایز تصاویر ایجاد نمیشه و همون سایز تعریف شده قبلی نمایش داده میشه .
اگر ممکن هست راهنماییم کنید .