Owl Carouselのナビゲーションメニューを表示するにはどうすればよいですか？

Question

私の考えは、Owl Carouselのメニューを作ることでした。私はすべてのフォルダにOwl Carouselコードなどを入れて、LazyLoad関数は現在自分のページで実行しています。しかし、イメージ（カルーセル）の1つをクリックすると、そのイメージ（カルーセル）に接続したいhtmlページにジャンプするようにする方法を見つけることができません。ただ、imgタグの周りにアンカータグをラップ

<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

下記見つけてください詳細 のためにスニペットや、この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>