- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
В 2023 году 36,9% всех DDoS-атак пришлось на сферу финансов
А 24,9% – на сегмент электронной коммерции
Оксана Мамчуева
Маркетинг для шоколадной фабрики. На 34% выше средний чек
Через устранение узких мест
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Есть слайдер, работающий на 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 хотя бы код вставили, лень копировать.