Подскажите примеры, как реализовать слайдер на owlСarousel 2, а к нему миниатюры карусели owlСarousel 2
Можно сделать примерно вот так
$(document).ready(function() {
dotcount = 1;
$(".owl-carousel").owlCarousel({
items: 1,
margin: 10,
nav: false,
autoHeight: true
});
$('.owl-dot').each(function() {
$(this).addClass('dotnumber' + dotcount);
$(this).attr('data-info', dotcount);
dotcount = dotcount + 1;
});
slidecount = 1;
$('.owl-item').not('.cloned').each(function() {
$(this).addClass('slidenumber' + slidecount);
slidecount = slidecount + 1;
});
$('.owl-dot').each(function() {
grab = $(this).data('info');
slidegrab = $('.slidenumber' + grab + ' img').attr('src');
var slide = '<img src="' + slidegrab + '">';
$(this).append(slide)
});
amount = jQuery('.owl-dot').length;
gotowidth = 100 / amount;
$('.owl-dot').css("width", gotowidth + "%");
newwidth = $('.owl-dot').width();
$('.owl-dot').css("height", newwidth + "px");
});
.owl-carousel {
width: 100%;
}
img {
width: 100%;
}
.owl-stage-outer {
border: 5px solid;
}
.owl-dots {
display: flex;
}
.owl-dot {
padding: 0 10px;
margin: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<div class="owl-carousel">
<div class="item"><img src="https://www.floridagulfbeachrealty.com/wp-content/uploads/2017/11/cropped-Tom-Slaughter-Header-Media-Image-.jpeg"></div>
<div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZvHgi67sLw1WfE7vNMx7JF1sr50bfU4mHTFG8nyPy1b3zXYec"></div>
<div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSAkXIOqHoHPOattE5Taft-Sr7McgV9jLE-n-Jx_Mv3OtyHidsD"></div>
<div class="item"><img src="http://cdn.newsapi.com.au/image/v1/06e4a0f5221e045e88ba3c707e1e7949"></div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Здравствуйте, я по инструкции собрал Ajax форму которая обрабатывает данные в БД (удаляет редактирует и тд), после того как я собрал эту форму...
Почему скрипт выдает не ту ширину браузера что нужно? Добавляю к классу body значение max-width соответствующее ширине окна браузера, но выдается...
У меня имеется indexphp, а в нём php+html код
Нужно реализовать загрузку фотоальбома на сервер через формуПроблема возникла тогда, когда встал вопрос о том, как реализовать загрузку...