上一个和下一个导航在猫头鹰轮播中不起作用

Question

你好，我一直在尝试添加猫头鹰轮播滑块，但它的上一个和下一个都不起作用

我的代码是这样的

<div class="magazine-carousel owl-theme">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="navigation">
    <div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
    <div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
  </div>

现在猫头鹰轮播脚本是这样的

 $('.magazine-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:false,
loop:true,
nav:true,
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:6
    },
    1600:{
        items:8
    },
    1900:{
        items:10
    }

  }
  })

Answer 1

请查看Link

$(document).ready(function () {
  $('.magazine-carousel').owlCarousel({
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
loop:true,
nav:true,
navigation:true,
      navigationText: [
        "<i class='icon-chevron-left icon-white'><</i>",
        "<i class='icon-chevron-right icon-white'>></i>"
      ],
navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive:{
    0:{
        items:1
    },
    600:{
        items:3
    },
    1000:{
        items:6
    },
    1600:{
        items:8
    },
    1900:{
        items:10
    }

  }
  });
   $('.magazine-carousel').trigger('owl.play',2000);
});

Answer 2

您需要在模板文件中添加 Carousel Js 和 Css 文件。

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

经验：

$('.owl-theme').owlCarousel({
     autoplay:true,
     autoplayTimeout:1000,
     autoplayHoverPause:false,
     items:1,
     loop:true,
     navText:['<i aria-hidden="true" class="fa fa-caret-left"></i>','<i aria-hidden="true" class="fa fa-caret-right"></i>'],
     responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:6
                },
                1600:{
                    items:8
                },
                1900:{
                    items:10
                }

             }

})

.prev,
.next{
font-size:100px;
}

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

<div class="magazine-carousel owl-theme" id="slider">
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
            <div class="item"><img src="https://wallpaperbrowse.com/media/images/bad-branch-nature-preserve-3.jpg" width="550px" height="280px"></div>
        </div>
        <div class="navigation">
            <div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
            <div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
        </div>