سلام. در ادامه مطالب آموزشی بوت استرپ توی این مطلب آموزش کار با پلاگین Carousel جهت ساخت اسلایدر در بوت استرپ رو خدمت دوستان ارائه می نماییم. پلاگین Carousel یک کامپوننت برای ایجاد حلقه بر روی عنصرهامی باشد، مانند یک اسلایدشو. لطفا در ادامه مطلب با ما همراه باشید…
آموزش کار با پلاگین Carousel جهت ساخت اسلایدر
پلاگین Carousel یک کامپوننت برای ایجاد یک حلقه مانند Carousel در بین عناصر است. (اسلاید شو)
نکته : پلاگین ها را میتوان به صورت جداگانه اضافه کرد. ( برای استفاده از فایل جداگانه بوت استرپ از کلاس carousel.js استفاده کنید.) و یا به صورت یکجا (از کلاس های bootstrap.min.js یا bootstrap.js استفاده نمایید.)
طریقه ساخت یک اسلایدشو با Carousel
مثال زیر نحوه ساخت یک Carousel را به شما نشان میدهد :
<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”> اضافه کنید.
<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>
جهت مشاهده مثال این تمرین کلیک نمایید
برای تازه شدن دیر نیست
موفق و پیروز باشید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲ شهریور ۱۳۹۵
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
سلام تو قسمت تست همین کدی که نوشتید درست کار نمیکنه و عکس هارو زیر هم نشون میده
سلام
با تشکر از آموزش های خوبتون
من کد اسلایدشو رو قرار دادم و به درستی جواب میده اما من میخوام سایز تصاویر اسلاید رو با width , height تغییر بدم ولی متاسفانه هیچ تغییری در سایز تصاویر ایجاد نمیشه و همون سایز تعریف شده قبلی نمایش داده میشه .
اگر ممکن هست راهنماییم کنید .