我已使用URLhashListener
事件创建水平页面滑动。
Page 1单击Page 3按钮时,幻灯片应直接滚动到Page 3。现在它滑过了页面2。 当我从页1
查看我的代码:
$('.owl-carousel').owlCarousel({ items: 1, autoplay: false, loop: false, nav: false, dots: false, center: true, mouseDrag: false, touchDrag: false, autoHeight: true, margin: 10, smartSpeed: 500, URLhashListener: true, autoplayHoverPause: true, startPosition: 'URLHash' });
.owl-carousel { position: relative; } .page { height: 10rem; padding: 1rem; height: 200px; } .one { background: #bec4bd; } .two { background: green; } .three { background: #41253c; } .linkA { position: absolute; bottom: 10px; left: 10px; text-decoration: none; background: red; color: #fff; padding: 5px 15px; margin-right: 5px; font-family: sans-serif; font-size: 14px; } .linkB { position: absolute; bottom: 10px; right: 10px; text-decoration: none; background: red; color: #fff; padding: 5px 15px; margin-right: 5px; font-family: sans-serif; font-size: 14px; }
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> <link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" /> <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script> <script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script> <div class="owl-carousel owl-theme"> <div class="page one" data-hash="page1"> Button at the bottom! <a href="#page2" class="linkA">Page 2</a> <a href="#page3" class="linkB">Page 3</a> </div> <div class="page two" data-hash="page2"> Button at the bottom! <a href="#page1" class="linkA">Page 1</a> <a href="#page3" class="linkB">Page 3</a> </div> <div class="page three" data-hash="page3" style="color:#fff;"> Button at the bottom! <a href="#page2" class="linkA">Page 2</a> </div> </div>
我已使用URLhashListener事件创建水平页面滑动。当我们单击页面1的页面3按钮时,幻灯片应直接滚动到页面3。现在它滑过页面2。如何...
我设法通过以下方式删除了该项目: