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



visibility  
mode_comment   ۱۸

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

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

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

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

ثبت نام در آموزش بوت استرپ حرفه ای

comment دیدگاه کاربران
افشین زندی replyپاسخ

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

وحید صالحی

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

Khazra replyپاسخ

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

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

هادی replyپاسخ

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

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

وحید صالحی

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

هادی replyپاسخ

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

وحید صالحی

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

سید احسان عظیمی replyپاسخ

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

زینب سادات replyپاسخ

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

وحید صالحی

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

زینب سادات

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

وحید صالحی

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

زینب سادات

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

داود دلورای replyپاسخ

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

وحید صالحی

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

داود دلورای

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

reza replyپاسخ

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

وحید صالحی

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.