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

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

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

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

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

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

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

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

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

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

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

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