主页 / 问题 / 657952
Accepted
Игорь
Asked:2020-04-24 23:47:25 +0000 UTC2020-04-24 23:47:25 +0000 UTC

OwlCarousel 2：通过按键盘上的左/右按钮切换幻灯片

  • 772

是否可以自定义 OwlCarousel 2，使幻灯片之间的切换不仅可以通过单击标准控件，还可以通过按下键盘上的“左/右”按钮来实现？沙箱就在这里。

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots: false,
    items: 2
})
.item {
  background: #f0f0f0;
  height: 100px;
}
<link rel="stylesheet" href="https://theappsdepot.com/css/carousel.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

    <div id="first-slider" class="tab-pane fade in active">
      <div class="slider owl-carousel owl-theme">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
      </div>
    </div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://theappsdepot.com/js/carousel.js"></script>

javascript

1 个回答

  1. Best Answer

    这是可能的。您需要像这样更改 JS：

    var a = $('.owl-carousel');

a.owlCarousel({ loop:true,
    margin:10,
    nav:true,
    dots: false,
    items: 2});

var ad = a.data('owlCarousel');

$(document).on('keydown.carousel', function(e) {
    if(e.keyCode == 37) {
        ad.prev();
    };
    if(e.keyCode == 39) {
        ad.next();
    };
});

    阅读更多：https ://github.com/OwlFonk/OwlCarousel/issues/65

    此处示例：https ://codepen.io/eldinor/pen/JNRMdr?editors=1010

    • 3

相关问题