在Jquery mobile中滑动carousal不工作_Jquery_Html_Css_Jquery Mobile_Jquery Plugins

在Jquery mobile中滑动carousal不工作

jquery html css jquery-mobile jquery-plugins

在Jquery mobile中滑动carousal不工作,jquery,html,css,jquery-mobile,jquery-plugins,Jquery,Html,Css,Jquery Mobile,Jquery Plugins,我使用猫头鹰旋转木马插件创建旋转木马，基本上我是通过滑动而不是点击来实现旋转木马（因为它也会在平板电脑中运行）。我已经创建了，但是我的图像没有显示出来。另外，请告诉更好的插件为carousal刷。它必须运行桌面、手机和平板电脑另外，如果您对jquery代码有任何评论，我们也将不胜感激 HTML <!DOCTYPE html> <html> <head> <title>test page</title> <met

我使用猫头鹰旋转木马插件创建旋转木马，基本上我是通过滑动而不是点击来实现旋转木马（因为它也会在平板电脑中运行）。我已经创建了，但是我的图像没有显示出来。另外，请告诉更好的插件为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>

代替

$（文档）。就绪（function（）{

使用

$（文档）。在（“pageshow”、“#mainpage”上，function（）{

。我的旋转木马正在工作，但图像没有显示在页面中。如果您只是在旋转木马外添加图像标记，是否看到图像？您确定路径正确吗？

@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%;

}*/