Question

我的想法是从Owl Carousel制作菜单。我已将Owl Carousel代码等放在我的所有文件夹中，LazyLoad函数当前正在我的页面上运行。但是我无法找到如何制作它，以便当点击其中一个图像（轮播）时，它跳转到我想要连接到该图像（轮播）的html页面。这是我的一些代码：

<section id="demos">
  <div class="row">
    <div class="large-12 columns">
    <div class="owl-carousel owl-theme">
<img class="owl-lazy"  src="Images/Page1.png" alt="">
<img class="owl-lazy"  src="Images/Page2.png" alt="">
<img class="owl-lazy"  src="Images/Page3.png" alt="">
<img class="owl-lazy"  src="Images/Page4.png" alt="">
<img class="owl-lazy"  src="Images/Page5.png" alt="">
</div>

<script>
    $('.owl-carousel').owlCarousel({
    items:4,
    center:true,
    lazyLoad:true,
    loop:false,
    margin:10
});
</script>

Answer 1

只需在img标记周围包含Anchor标记，请在下面的代码段中找到更多信息或找到这个fiddle

$(document).ready(function () {
    $('.owl-carousel').owlCarousel({
    items:4,
    center:true,
    lazyLoad:true,
    loop:false,
    margin:10
});
});

<link href="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js"></script>
<section id="demos">
  <div class="row">
    <div class="large-12 columns">
    <div class="owl-carousel owl-theme">
 <a href="http://google.com"><img class="owl-lazy"  src="Images/Page1.png" alt=""></a>
<a href="http://google.com"><img class="owl-lazy"  src="Images/Page2.png" alt=""></a>
<a href="http://google.com"><img class="owl-lazy"  src="Images/Page3.png" alt=""></a>
<a href="http://google.com"><img class="owl-lazy"  src="Images/Page4.png" alt=""></a>
<a href="http://google.com"><img class="owl-lazy"  src="Images/Page5.png" alt=""></a>
</div>

如何从Owl Carousel中制作导航菜单？

1 个答案: