부트 스트랩 4와 올빼미 캐 러셀 2를 사용하는 사이트에 슬라이드를 만들고 있습니다. 슬라이드에 내비게이션을 추가해야합니까? 어떻게해야합니까? 아래 코드를 참조하십시오.
참고 : 창 너비의 100 %를 차지하지 않도록 컨테이너 내에서 탐색을 만들어야합니다.
HTML
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="container">
<div class="nav-container"></div>
</div>
</section>
JS
$('.owl-carousel').owlCarousel({
loop:true,
items:1,
autoplay:true,
autoplayHoverPause:true,
nav:true,
navText:['<div class="nav-slide"><i class="flaticon-arrows-1"></i></div>', '<div class="nav-slide"><i class="flaticon-arrows"></i></div>'],
navContainer:'.nav-container'
})
<section class="slide">
<div class="owl-carousel">
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
<div class="item"><img src="/img/laminas/lamina-01.jpg"></div>
</div>
<div class="slide-content">
<div class="container">
<div class="nav-container"></div>
</div>
</div>
</section>
.slide {
position: relative;
}
.slide .slide-content {
position: absolute;
top: 50%;
transform: translate(0, -50%);
left: 0;
right: 0;
z-index: 9999;
}
그러면 슬라이드 중앙에 내비게이션이 배치됩니다. 하단에 원하는 경우에 맞게 조정
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다