دوره مجازی بوت استرپ (جلسه 13) : جاوااسکریپت در بوت استرپ - بخش دوم - اسلایدر ها

دسته بندی: آموزش
زمان مطالعه: 1 دقیقه
۱۲ مرداد ۱۳۹۴

در جلسه سیزدهم دوره آمورشی فریم ورک بوت استرپ و در ادامه مبحث جاوااسکریپت در بوت استرپ و تعامل این دو با یکدیگر و در بخش دوم این مبحث می پردازیم به بررسی و نحوه استفاده از یک  پلاگین بسیار کاربردی و ضروری دیگر با نام carousel (اسلایدر) و نحوه ایجاد اون رو توسط بوت استرپ بررسی خواهیم کرد

مطالب مطرح شده در این جلسه عبارتند از :

  • بررسی ساختار اسلایدر در بوت استرپ
  • نحوه ایجاد ایندیکتور نویگیشن ها
  • نحوه ایجاد دکمه های کنترل مقادیر اسلایدر
  • بررسی کلاس carousel
  • بررسی کلاس slide
  • بررسی اتریبیوت data-ride
  • بررسی اتریبیوت data-slide
  • بررسی کلاس carousel-indicators
  • بررسی کلاس carousel-inner
  • بررسی کلاس item
  • بررسی کلاس carousel-control
  • بررسی کلاس left و right
  • بررسی کلاس carousel-control
:: توجه

این مطلب یک جلسه از آموزش بوت استرپ 3 می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش بوت استرپ 3

نویسنده
علاقمند به طراحی و برنامه نویسی وب هستم و چند سالی میشه که در این زمینه فعالیت می کنم. (ایمیل من: @) وب سایت من:

جلسات دوره

نظرات کاربران

reza

سلام
از آموزش خوبتون خیلی ممنونم.
استاد عزیز من همه سوالاتمو خودم جوابشون رو پیدا کردم اما واقعا توی بخش اسلایدر درمونده شدم.
شما توی فیلم ها گفتین که برخی از دانشجوها گفتن که افکت اسلایدر(که همانند fade شدن هست) براشون عمل نکرده. دقیقا من هم همین مشکل رو دارم اما هر کاری کردم نتونستم درستش کنم. با اینکه دوره طراحی وبتون رو هم گذروندم اما نتونستم.
میشه لطفا بگین کجا رو باید درست کنیم؟
ممنون میشم جواب بدین

وحید صالحی

سلام خواهش می کنم اگر طبق آموزش پیش برید نباید مشکلی باشه

داود دلورای

سلام جناب صالحی
من هم سوال آخر زینب سادات رو داشتم
خواهشمندم در پست قرار بدهید

وحید صالحی

سلام دوست عزیز این موارد بر می گرده به تسلط شما به css و جز مبحث بوت استرپ نیست در این دوره هم عرض کردیم پیش نیاز این دوره آشنایی مناسب با css هست

داود دلورای

بله با css به راحتی میشه اینکار رو انجام داد
فکر میکردم در خود bootstrap کلاس خاصی براش تعبیه شده باشه
ممنون

زینب سادات

سلام و وقتتون بخیر
من وقتی از glyphicon ها استفاده می کنم بجای نشون دادن شکلشون، یک مربع خالی میندازه! بخاطر همین تا الان از fontawesome ها استفاده می کردم که خیلی هم خوب بودند. ولی تو درس اسلایدر، برای ایجاد اون فلش های روی اسلایدر، این آیکن ها در بالای تصویر و نه در وسط تصویر نمایش داده میشن!
سوال اول اینکه چه کنم بیان وسط؟
سوال دوم اینکه چرا glyphicon های من مربع توخالی ان؟ با چند تا مرورگر هم تست کردم.
متشکرم

وحید صالحی

سلام اگر glyphicon ها بصورت مربع نمایش داده میشن احتمالا فونت هاش رو در پروژه قرار ندادید و آدرس دهیتون هم اشتباهه
آیکون های اسلایدر رو متوجه منظورتون نشدم!

زینب سادات

ممنون از پاسخ شما
فونت ها داخل پوشه font قرار دارن. لطفا برای آدرس دهی راهنمایی بفرمایید تا اینکه بفرمایید در کدام قسمت بوده است.
***منظورم این بود که در اسلایدر وقتی در Span مربوط به فلش های روی آن، از مثلا fa-chevron-right استفاده می کنم، میوفته قسمت بالایی عکس اسلایدر و نه در وسط عکس اسلایدر.

زینب سادات

چشم ایمیل می کنم. خیلی ممنونم

وحید صالحی

خواهش می کنم اگر ساختار html و کلاس ها رو درست رعایت کرده باشید نباید چنین حالتی پیش بیاد فابل های پروژتون رو برای بند ایمیل کنید تا بررسی کنم

سید احسان عظیمی

واقعا بوت استرپ و جی کوئری در بحث شخصی سازی فریمورک بهم وابسته اند

هادی

سلام آقای صالحی ، من یک سوال اول فروردین پرسیدم ، تا امروز که 14 فروردین هست هنوز پاسخ ندادید ، اگه جواب بدید ممنون میشم.

وحید صالحی

عذر خواهی می کنم سوالتون رو ندید بودم پاسختون داده شد موفق باشید

هادی

سلام خدمت استاد صالحی ، تشکر میکنم از آموزش های خیلی خوبتون . من تا جلسه 13 ، دو تا سوال برام پیش اومده :
1- چطور میشه اسلایدر بند انگشتی با استفاده از پلاگین پیش فرض بوت استرپ ایجاد کرد ، اگر منبع یا سایتی برای آموزش این مورد سراغ دارید معرفی کنید تا از اون استفاده کنم.

2- در وبسایت 90 در پاین سایت ، یک بخشی وجود دارد که با select option ها ی مرتبط با هم ایجاد شده که با انتخاب هر گزینه از لیست مطالب مربوط به آن گزینه نمایش داده میشود ، میخواستم بدونم این select option ها هم جزء امکانات بوت استرپ است و اگر منبعی سراغ دارید برای آموزش چنین موردی لطفا معرفی کنید. ممنون

وحید صالحی

سلام برای سوالتون موارد زیادی در وب هست عبارت thumbnail slider در گوگل جستجو کنید یه نمونه :
http://flexslider.woothemes.com/thumbnail-slider.html
برای سوال دومتون هم بله select option رو می تونید با بوت استرپ ایجاد کنید اما لود لیت مطالب مربوط به گزینه رو دیگه باید بصورت داینامیک مثلا توسط php و ajax پیاده سازی کنید

Khazra

سلام. یه مشکل داخل اسلایدر بود که داخل فایرفاکس انیمیشن fade اجرا می شد اما داخل کروم نه، من کدهای CSS رو به این شکل نوشتم، مشکل کروم هم حل شد و داخل هر دو مرورگر درست انجام می شه، دوستان اگه مرورگر دیگه ای دارین تست کنید که درست کار می کنه یا نه.

این کلاس رو ” carousel-fade ” به بخش اصلی اسلایدرتون اضافه کنید.
*********************************************************************
کدهای CSS:

 /*Slider Effect*/
.carousel-fade .carousel-inner .item {
 opacity: 0;
 transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
 opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
 left: 0;
 opacity: 0;
 z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
 opacity: 1;
}
.carousel-fade .carousel-control {
 z-index: 2;
}
.slider-padding{padding:0px;}
.carousel-inner img{
 max-height: 100vh;
 width: 100%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
 .carousel-fade .carousel-inner > .item.next,
 .carousel-fade .carousel-inner > .item.active.right {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
 .carousel-fade .carousel-inner > .item.prev,
 .carousel-fade .carousel-inner > .item.active.left {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
 .carousel-fade .carousel-inner > .item.next.left,
 .carousel-fade .carousel-inner > .item.prev.right,
 .carousel-fade .carousel-inner > .item.active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
افشین زندی

سلام استاد صالحی
استاد ببخشید من تو قسمت اسلایدر یه مشکلی دارم که اسلایدر داخل کروم به خوبی نمایش داده میشه اما تو فایرفاکس و اینترنت اکسپلورر حتی نسخه 11 یه باگ داره که ارتفاع عکس ها تو عوض شدن اسلاید ها زیاد میشه
اگه وقت میکنید یه نگاهی بهش بندازید مشکلم رو بهم بگید. ممنون
http://up.ashiyane.org/images/exskpjvgxnejcezdwf5z.rar

وحید صالحی

سلام درسته برای اینک این مورد رو رفع کنی در ویدئو اشاره کردم باید ارتفاع تصاویری که انتخاب میکنی با ارتفاعی که برای اسلایدر در نظر میگیری یکی باشه که توی تصاویر شما اینطور نیست سعی می کنم یه روض مناسب برای این کار در پروژه ها معرفی کنم فعلا به همین صورت که گفتم عمل کن

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

شما هم چنان می توانید سوالات خود را در این قسمت بپرسید اما اولویت پاسخ گویی با دانشجویانی است که بازه پشتیبانی فعال دارند.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل