如何用猫头鹰旋转木马制作导航菜单

Question

我的想法是用猫头鹰旋转木马制作菜单。我已经将 Owl 旋转木马代码等放在我的所有文件夹中，并且 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 标签周围，请在下面的代码段中找到更多信息或者找到这个小提琴

$(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>