2015-11-06 74 views
0

我使用此plugin創建3D滑塊。它在瀏覽器上都可以正常工作。當你點擊一張圖片時,它會變成一個活動的幻燈片並居中。 iPad上的相同行爲(點擊圖片)不起作用。我如何在iPad上解決這個問題?Carrousel敲擊事件不起作用

插件HTML結構:

<link rel="stylesheet" href="css/carrousel.css"/> 
<!-- ... --> 
<div class="banner"> 
    <section id="dg-container" class="dg-container"> 
     <div class="dg-wrapper"> 
      <a href="#" link="http://www.anotherhome.net"> 
       <img src="images/1.jpg"> 
      </a> 
      <a href="#" link="http://www.anotherhome.net"> 
       <img src="images/2.jpg"> 
      </a> 
      <!-- ... --> 
     </div> 
     <ol class="button" id="lightButton"> 
      <li index="0"> 
      <li index="1"> 
      <!-- ... --> 
     </ol> 
     <nav> 
      <span class="dg-prev"></span> 
      <span class="dg-next"></span> 
     </nav> 
    </section> 
</div> 
<!-- ... --> 
<script src="js/jquery.js"></script> 
<script src="js/carrousel.js"></script> 

這是你如何實例化插件:

$('#dg-container').carrousel({ 
    current: 0, 
    autoplay: true, 
    interval: 3000 
}); 

回答

0

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>jCarrousel Demo</title> 
 
    <link rel="stylesheet" href="https://www.anotherhome.net/file/jCarrousel/css/carrousel.css" /> 
 
</head> 
 

 
<body> 
 
    <div class="banner"> 
 
    <section id="dg-container" class="dg-container"> 
 
     <div class="dg-wrapper"> 
 
     <a href="#" link="http://www.anotherhome.net"> 
 
      <img src="https://www.anotherhome.net/file/jCarrousel/images/1.jpg"> 
 
     </a> 
 
     <a href="#" link="http://www.anotherhome.net"> 
 
      <img src="https://www.anotherhome.net/file/jCarrousel/images/2.jpg"> 
 
     </a> 
 
     <a href="#" link="http://www.anotherhome.net"> 
 
      <img src="https://www.anotherhome.net/file/jCarrousel/images/3.jpg"> 
 
     </a> 
 
     <a href="#" link="http://www.anotherhome.net"> 
 
      <img src="https://www.anotherhome.net/file/jCarrousel/images/4.jpg"> 
 
     </a> 
 
     <a href="#" link="http://www.anotherhome.net"> 
 
      <img src="https://www.anotherhome.net/file/jCarrousel/images/5.jpg"> 
 
     </a> 
 
     </div> 
 
     <ol class="button" id="lightButton"> 
 
     <li index="0"> 
 
      <li index="1"> 
 
      <li index="2"> 
 
       <li index="3"> 
 
       <li index="4"> 
 
     </ol> 
 
     <nav> 
 
     <span class="dg-prev"></span> 
 
     <span class="dg-next"></span> 
 
     </nav> 
 
    </section> 
 
    </div> 
 
    <script src="https://www.anotherhome.net/file/jCarrousel/js/jquery.min.js"></script> 
 
    <script src="https://www.anotherhome.net/file/jCarrousel/js/carrousel.js"></script> 
 
    <script> 
 
    $(function() { 
 
     $('#dg-container').carrousel({ 
 
     current: 0, 
 
     autoplay: true, 
 
     interval: 3000 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

這是從網站的示例代碼。
我添加了完整的鏈接,以便您可以直接複製並粘貼到HTML文檔中,而無需下載任何內容。我會建議你複製&粘貼這個,然後只改變圖像,因爲測試網站似乎工作時,我試了我的平板電腦。
希望這有助於!