На странице в самом низу используется слайдер 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",
});
Нашел решение. Нужно прописать стили
.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);
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как сделать, чтобы при клике на заголовок меню развернулось подменю, и так же закрывалось при клике?
Подскажите есть ли функция в js/jquery для объединения двух массивов в один, следующим образом, чтобы значение первого массива было ключом, а значение...
Есть объектКак записать его значения в атрибут val input? Структура объекта такова:
Здравствуйте делаю ресайз в canvas, как его отправить на сервер