- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы
Для интернет-магазина инженерных систем
Мария Лосева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Есть слайдер, работающий на owl carousel 2. Слайдер зациклен (loop:true).
Каждый слайд представляет из себя блок с overflow:hidden, внутри которого картинка с абсолютным позиционированием.
#slider {
width: 900px;
height: 400px;
}
#slider .slide {
overflow: hidden;
margin: 0;
width: 300px;
height: 400px;
position: relative;
}
#slider .slide img {
display: block;
width: 300px;
height: auto;
border: none;
position: absolute;
top: 0;
left: 0;
}
При загрузке слайдера картинка центрального слайдера прокручивается вниз (меняем top на отрицательный со значением, равным разнице высоты картинки и высоты блока).
var owl = $("#slider");
owl.owlCarousel();
var ItemIndex = $(".owl-item.active:eq(1)").index();
owl.on('changed.owl.carousel', function(event) {
ItemIndex = event.item.index+1;
})
function ChangeSlide() {
owl.trigger('next.owl.carousel');
setTimeout(function() {
ScrollSlide();
}, 1000);
}
function ScrollSlide() {
var SlideHeight = $(".slide:eq("+ItemIndex+") img").height()-400;
$(".slide:eq("+ItemIndex+") img").animate({"top":-SlideHeight}, 1000);
setTimeout(function() {
ChangeSlide();
}, 1000);
}
ScrollSlide();
Проблема в том, что после прокрутки нескольких слайдов слайдер начинает тупить и перепрыгивать некоторые слайды. Почему так может происходить? Может я чего-то намудрил и есть более простой способ сделать подобную анимацию в слайдере?
на jsfiddle хотя бы код вставили, лень копировать.