1

На странице в самом низу используется слайдер 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",
    });

2 ответа 2

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); 
}
0

Еще нужно добавить клас для враппера class="owl-carousel owl-theme" и подключить файлы стилей owl.theme.default.min.css и owl.carousel.min.css

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.