Слайдер Owl Carousel неправильно работает в Google Chrome

540
30 декабря 2016, 12:57

На странице в самом низу используется слайдер Owl Carousel 2. Для смены слайдов используются эффекты fadeIn/fadeOut. Если пролистать слайдер и начать листать дальше (слайдер зациклен), то картинка льва появляется без анимации. Можно ли это исправить? Проблема наблюдается только в Google Chrome и подобных браузерах (например Yandex.Browser).

HTML:

<div class="equipment_slider">
                    <!-- *** -->
                    <div class="equipment_slide clearfix">
                        <img src="images/equipment__slide1__photo.jpg" alt="Витрины, лари и горки">
                        <div class="equipment_slide_content">
                            <div class="title">Витрины, лари и горки</div>
                            <p>Холодильные и морозильные витрины для магазинов используются для 
                            демонстрации и кратковременного хранения охлажденных и замороженных продуктов.<br>
                            Холодильные витрины - один из самых распространенных видов холодильного оборудования, 
                            с помощью их продают , мясо, рыбу, пресервы, молочные продукты, а также замороженные 
                            и кондитерские продукты. В них продукты сохраняют полезные свойства и отличный товарный вид.</p>
                        </div>
                    </div>
                    <!-- *** -->
                    <div class="equipment_slide clearfix">
                        <img src="images/equipment__slide2__photo.jpg" alt="Лев">
                        <div class="equipment_slide_content">
                            <div class="title">Лев</div>
                            <p>Вид хищных млекопитающих, один из четырёх представителей рода пантер (Panthera), 
                            относящегося к подсемейству больших кошек (Pantherinae) в составе семейства кошачьих (Felidae). 
                            Является наряду с тигром самой крупной из ныне живущих кошек — масса некоторых самцов может 
                            достигать 250 кг. Трудно сказать достоверно, являются ли крупнейшие подвиды льва более или менее 
                            массивными, чем крупнейшие подвиды тигров.</p>
                        </div>
                    </div>
                    <!-- *** -->
                    <div class="equipment_slide clearfix">
                        <img src="images/equipment__slide3__photo.jpg" alt="Слоны">
                        <div class="equipment_slide_content">
                            <div class="title">Слоны</div>
                            <p>Самые крупные наземные животные, обитающие на Земле. 
                            Обитают они в Юго-Восточной Азии и Африке в тропических лесах и саваннах.<br>
                            В центре стопы слона есть жировая подушка, которая каждый раз, когда слон опускает ногу, 
                            «расплющивается», увеличивая площадь опоры.</p>
                        </div>
                    </div>
                    <!-- *** -->
                </div>

CSS:

.owl-prev, 
.owl-next {
    width: 80px;
    height: 80px;
    background-image: url(../images/nav_buttons.png);
    background-size: 480px 160px;
    position: absolute;
}
/* equipment */
#equipment {
    background: #fafafa;
}
#equipment .wrapper {
    padding: 0 0 54px 0;
}
#equipment h2 {
    padding: 35px 0 0 55px;
    text-transform: none;
    font-size: 32px;
    line-height: 32px;
    position: absolute;
    top: 0;
    left: 480px;
    z-index: 100;
}
.equipment_slider {
    background: #e5e5e5;
}
.equipment_slider:before {
    display: block;
    content: "";
    width: 100px;
    height: 100px;
    background: url(../images/equipment__logo.png) center no-repeat;
    position: absolute;
    top: -50px;
    left: 50%;
    margin-left: -50px;
    z-index: 100;
}
#equipment .equipment_slider img {
    display: block;
    float: left;
    width: 480px;
    height: auto;
    border: none;   
}
.equipment_slide_content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    padding: 69px 40px 0 55px;
    width: 480px;
}
.equipment_slide_content .title {
    margin: 0 0 16px 0;
    font-family: "PantonBold";
    font-size: 36px;
    line-height: 44px;
    color: #333;
}
.equipment_slide_content p {
    font-size: 16px;
    line-height: 23px;
    color: #666;
}
#equipment .owl-prev, 
#equipment .owl-next {
    top: 50px;
}
#equipment .owl-prev {
    background-position: left top;
    left: 440px;
}
#equipment .owl-prev:hover {
    background-position: left bottom;
}
#equipment .owl-next {
    background-position: -80px top;
    right: -40px;   
}
#equipment .owl-next:hover {
    background-position: -80px bottom;
}
#equipment .order_block {
    width: 500px;
    height: 164px;
    background: #f2f2f2;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -250px;
    z-index: 100;
}
#equipment .order_block p {
    padding: 20px 0 12px 0;
    font-family: "PantonRegular";
    font-size: 20px;
    line-height: 25px;
    color: #4c4c4c;
    text-align: center;
}
#equipment .order_block span {
    font-family: "PantonBold";  
}
#equipment .order_block .button {
    margin: 0 auto;
    width: 330px;
    height: 55px;
    font-size: 20px;
    line-height: 55px;
}

JS:

$(".equipment_slider").owlCarousel({
        items: 1,
        smartSpeed: 500,
        loop: true,
        mouseDrag: false,
        touchDrag: false,
        dots: false,
        nav: true,
        navText: "",
        animateOut: "fadeOut",
        animateIn: "fadeIn",
    });
Answer 1

Нашел решение. Нужно прописать стили

.owl-carousel .owl-wrapper-outer{
   overflow: hidden;
   position: relative;
   width: 100%;
   z-index: 1;  // added this
}
.owl-item { 
  transform: translateZ(0);
 -webkit-transform: translateZ(0); 
 -ms-transform: translateZ(0); 
}
READ ALSO
Как сделать, чтобы при клике на заголовок меню развернулось/свернулось подменю?

Как сделать, чтобы при клике на заголовок меню развернулось/свернулось подменю?

Как сделать, чтобы при клике на заголовок меню развернулось подменю, и так же закрывалось при клике?

465
Функция объединения двух массивов

Функция объединения двух массивов

Подскажите есть ли функция в js/jquery для объединения двух массивов в один, следующим образом, чтобы значение первого массива было ключом, а значение...

344
Запись значений массива в атрибут val

Запись значений массива в атрибут val

Есть объектКак записать его значения в атрибут val input? Структура объекта такова:

356
Как отправить canvas на сервер javascript?

Как отправить canvas на сервер javascript?

Здравствуйте делаю ресайз в canvas, как его отправить на сервер

479