Привет, я использую Owl Carousel версии 2 и не могу найти пример, чтобы разместить навигацию по сторонам карусели, как правые и левые шевроны или стрелы. Как ты делаешь это?
Сова Карусель 2 Нав.
Ответ 1
Я только что сделал это вчера :)
Сначала убедитесь, что в конфиге включена навигация
https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
$('#_samewidth_images').owlCarousel({
margin:10,
autoWidth:false,
nav:true,
items:4,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>']
})
Это введет элементы управления в DOM, см.
https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
<div class="owl-stage">
<div class="owl-item">...</div>
<div class="owl-item">...</div>
<div class="owl-item">...</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
Далее используйте CSS для позиционирования элементов управления Next и Prev, вот что я использовал:
.owl-prev {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
margin-left: -20px;
display: block !important;
border:0px solid black;
}
.owl-next {
width: 15px;
height: 100px;
position: absolute;
top: 40%;
right: -25px;
display: block !important;
border:0px solid black;
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}
Для своих иконок я использовал Font Awesome, но вы можете использовать все что угодно. Обратите внимание на navText в коде javascript, здесь вы размещаете свой собственный HTML. Я думаю, вы могли бы также использовать изображение (или поместить его на задний план div.owl-next и .owl-prev). Обратите внимание, что я использовал transform, чтобы мои стрелки были выше.
Ответ 2
Разметка HTML
<div id="slider" class="owl-carousel">
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
<div class="item">
<img src="assets/img/header-img.jpg" alt="" />
</div>
</div>
Ползунок стиля Css - это имя класса
#slider .owl-nav div.owl-prev,
#slider .owl-nav div.owl-next {
color: #fff;
font-size: 18px;
margin-top: -20px;
position: absolute;
top: 50%;
text-align: center;
line-height: 39px;
opacity: 0;
border:1px solid #fff;
width: 40px;
height: 40px;
}
#slider .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#slider .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#slider:hover .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#slider:hover .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#slider:hover .owl-nav div.owl-next:hover,
#slider:hover .owl-nav div.owl-prev:hover{
color:#fff;
background: #0C94B8;
border: 1px solid #0C94B8;
}
активация ползунка
$('#slider').owlCarousel({
loop:true,
items: 1,
margin:10,
autoplay: true,
nav:true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>']
})
Ответ 3
all-slider - это имя класса
#all-slide .owl-nav div.owl-prev,
#all-slide .owl-nav div.owl-next {
color: #fff;
font-size: 18px;
margin-top: -20px;
position: absolute;
top: 50%;
text-align: center;
line-height: 39px;
opacity: 0;
border:1px solid #fff;
width: 40px;
height: 40px;
}
#all-slide .owl-nav div.owl-prev{
left: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#all-slide .owl-nav div.owl-next {
right: 10%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
}
#all-slide:hover .owl-nav div.owl-next{
right: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#all-slide:hover .owl-nav div.owl-prev{
left: 2%;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.4s;
opacity: 1;
}
#all-slide:hover .owl-nav div.owl-next:hover,
#all-slide:hover .owl-nav div.owl-prev:hover{
color:#fff;
background: #0C94B8;
border: 1px solid #0C94B8;
}'enter code here'
Ответ 4
Немного улучшений от ответа @KevinSol выше.
Это мой код JS:
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
});
и мой код CSS:
.owl-prev, .owl-next {
width: 15px;
height: 100px;
position: absolute;
top: 50%;
transform: translateY(-50%);
display: block !important;
border:0px solid black;
}
.owl-prev { left: -20px; }
.owl-next { right: -20px; }
.owl-prev i, .owl-next i {transform : scale(2,5); color: #ccc;}