Bootstrap Caropousel Transition
Необходимо изменить скорость смены слайдов - на данный момент они перелистываются стандартно, но заказчики хотят чтобы они делали это более плавно. Iterval, естественно, не поможет, так как регулирует именно интервал, а такого решения, которое сработало бы с моей каруселью, я еще не нашла. Инспектом нашла, что этот transition регулирует выделенная строка.
@media not all, (-webkit-transform-3d) .carousel-inner>.item { -webkit-transition: -webkit-transform .6s ease-in-out; -o-transition: -o-transform .6s ease-in-out; transition: transform .6s ease-in-out; /* эта самая строка */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; Вопрос заключается в том, как обратиться к тому, к чему нужно обратиться, и как избежать проблемы с преждевременным исчезновением предыдущего слайда. (Если в инспекте изменить 0.6 секунд по умолчанию на другое значение, например, 3 секунды, то предыдущий слайд пропадает рано и без транзишена). Карусель: <div class="container cont-carousel hidden-xs hidden-sm"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000"> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/slide1.jpg" alt=""> <div class="carousel-caption"> <h2 class="h-slide">Юридическая фирма «Альтаир»</h2> <p class="p-slide">Юридическая фирма «Альтаир» ведет свою деятельность с 1996 года. Накопленный нами многолетний практический опыт позволил стать нам одной из ведущих юридических компаний Харькова и надежным партнером малого, среднего и крупного бизнеса нашего города и Харьковской области.</p> </div> </div> <div class="item"> <img src="images/slide1.jpg" alt=""> <div class="carousel-caption"> <h2 class="h-slide">Юридическая фирма «Альтаир»</h2> <p class="p-slide">Юридическая фирма «Альтаир» ведет свою деятельность с 1996 года. Накопленный нами многолетний практический опыт позволил стать нам одной из ведущих юридических компаний Харькова и надежным партнером малого, среднего и крупного бизнеса нашего города и Харьковской области.</p> </div> </div> <div class="item"> <img src="images/slide1.jpg" alt=""> <div class="carousel-caption"> <h2 class="h-slide">Юридическая фирма «Альтаир»</h2> <p class="p-slide">Юридическая фирма «Альтаир» ведет свою деятельность с 1996 года. Накопленный нами многолетний практический опыт позволил стать нам одной из ведущих юридических компаний Харькова и надежным партнером малого, среднего и крупного бизнеса нашего города и Харьковской области.</p> </div> </div> </div> </div> </div> посмотреть можно здесь |
Найдено решение
Мне просто нужно было поговорить самой с собой, но приложу вариант решения, если кому-то потребуется, реализуется через увеличение/уменьшение транзишена в вашем css-файле:
.carousel-inner>.item { -webkit-transition: -webkit-transform 2s ease-in-out; -o-transition: -o-transform 2s ease-in-out; transition: transform 2s ease-in-out; } Это решает вопрос скорости перелистывания + $(document).ready(function() { jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 2000 }); что решает проблему преждевременного исчезновения предыдущего слайда. Время транзишена должно соответствовать, в этом случае 2s in css = 2000 (2s) in js. |
Часовой пояс GMT +3, время: 03:12. |