Question

我正在使用owl-carousel插件创建carousal基本上我通过刷卡而不是点击（因为它也将在平板电脑中运行）发生。我已创建，但我的图像没有显示。另请通过刷卡告诉更好的插件用于carousal。它必须运行桌面设备，移动设备和平板电脑。

此外，有关jquery代码的任何评论也表示赞赏。

HTML

<!DOCTYPE html>
<html>
<head>
    <title>test page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 799px)" href="mobile-tablet.css" />-->


    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>


    <!-- Important Owl stylesheet -->
<link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css">

<!-- Default Theme -->
<link rel="stylesheet" href="plugins/owl-carousel/owl.theme.css">

<!-- Include js plugin -->
<script src="plugins/owl-carousel/owl.carousel.js"></script>



    <style>
    #owl-demo .item img{
    display: block;
    max-width: 100%;
    height: auto;
}
    </style>
</head>
<body id="mainbody">
    <div data-role="page" id="mainpage">


              <div id="content1" class="ui-grid-b ui-responsive">
            <section id="slider">

      <!--     <img class="carousalimg" src="images/banner1.png" alt="" />-->




<div id="owl-demo" class="owl-carousel">

  <div class="item"><img src="images/banner1.png" alt="The Last of us"></div>
  <div class="item"><img src="images/banner1.png" alt="GTA V"></div>
  <div class="item"><img src="images/banner1.png" alt="Mirror Edge"></div>

</div>


            </section>
        </div><!-- /content -->



    </div><!-- /page -->
    <script type="text/javascript">

    $(document).ready(function() {

  $("#owl-demo").owlCarousel({

      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      singleItem:true

      // "singleItem:true" is a shortcut for:
      // items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false

  });

});
    </script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

ui-page.ui-body-c {
    background:url(../images/bluebg.jpg) !important;;
    background-repeat:repeat-y;
    background-position:center center;
    background-size:cover;  
}

#mainpage{
    position:relative;
}
#content1{
    position:absolute;
    left: 17%;
    top: 20%;
}
#slider{
    width: 100%;

    /*background-color: #fbfbfb;
    border: 1px solid #b8b8b8;*/
}
/*#slider .carousalimg{
    max-width:100%;

}*/

滑动旋转木马不在Jquery移动设备中工作

0 个答案: