Javascript.RU

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

Bootstrap Carousel IE11
Карусель работает прекрасно во всех других браузерах. Работала и в IE до того, как была изменена длительность транзишена, однако теперь, при удалении всех добавленных к исходному коду строк, ситуация не меняется и карусель не работает.

Сама карусель
<div class="container cont-carousel hidden-xs hidden-sm">
            <div id="main" class="carousel slide" data-ride="carousel" data-interval="5000">
                <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>
                <a class="left carousel-control" href="#main" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
                <a class="right carousel-control" href="#main" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
            </div>
        </div>


Заказчики хотели видеть более плавное перелистывание слайдов, поэтому я повысила время транзишена с .6 до 1.5 секунд

.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.5s ease-in-out;
    -o-transition: -o-transform 1.5s ease-in-out;
    transition: transform 1.5s ease-in-out;
}


Для того, чтобы исправить проблему с преждевременно исчезающим предшествующим слайдом, добавила
$(document).ready(function() {
                jQuery.fn.carousel.Constructor.TRANSITION_DURATION = 1500
            });


Конечно, эти шаги решили все для Chrome, Firefox и Opera.
Очень прошу о помощи, так как редко сталкиваюсь с проблемами, связанными с кроссбраузерностью и не могу самостоятельно понять, как исправить эту ошибку.
Увидеть слайдер можно здесь
Ответить с цитированием
  #2 (permalink)  
Старый 25.05.2018, 19:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,878

antegria,
попробуйте вот такой танец с бубнами
.carousel-inner>.item {
    -webkit-transition: -webkit-transform 1.5s ease-in-out;
    -o-transition: -o-transform 1.5s ease-in-out;
    transition: transform 1.5s ease-in-out;
  *!*
    -ms-transition: left 1.4s ease-in-out;
*/!*
}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Верстальщик Bootstrap (Удаленно) kirdk Работа 1 19.04.2016 00:31
typeahead bootstrap 3 + bootstrap модальное окно velllum Ваши сайты и скрипты 2 19.10.2015 19:34
Динамическая пагинация в Bootstrap Poznakomlus Ваши сайты и скрипты 0 24.09.2015 19:40
AngularJS Bootstrap динамический контент - проблемы с виджетами и связыванием vsimashko Angular.js 2 30.07.2014 18:04
Подключение Bootstrap Markdown Vorobey Библиотеки/Тулкиты/Фреймворки 1 08.05.2013 10:40