Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.05.2018, 14:13
Новичок на форуме
Отправить личное сообщение для antegria Посмотреть профиль Найти все сообщения от antegria
 
Регистрация: 05.05.2018
Сообщений: 9

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>


посмотреть можно здесь
Ответить с цитированием
  #2 (permalink)  
Старый 25.05.2018, 14:39
Новичок на форуме
Отправить личное сообщение для antegria Посмотреть профиль Найти все сообщения от antegria
 
Регистрация: 05.05.2018
Сообщений: 9

Найдено решение
Мне просто нужно было поговорить самой с собой, но приложу вариант решения, если кому-то потребуется, реализуется через увеличение/уменьшение транзишена в вашем 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.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в меню аккордеона на bootstrap сделать раскрытие списка не снизу а сбоку? ligisayan jQuery 0 01.02.2017 13:10
typeahead bootstrap 3 + bootstrap модальное окно velllum Ваши сайты и скрипты 2 19.10.2015 19:34
закрыть окно js Artem215 Элементы интерфейса 10 22.04.2015 15:34
CSS3 анимация (transition) Magneto Events/DOM/Window 4 19.12.2014 11:39
AngularJS Bootstrap динамический контент - проблемы с виджетами и связыванием vsimashko Angular.js 2 30.07.2014 19:04