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

Khazra‏ (۳۱ شهریور ۱۳۹۴)

سلام. یه مشکل داخل اسلایدر بود که داخل فایرفاکس انیمیشن 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 />