Question

所以，我发现了这个名为Unslider的惊人插件，但它似乎在jquery mobile上消失了。我正在尝试实现基本示例。这是我的代码：

HTML：

<head>
   <link rel="stylesheet" type="text/css" href="css/main.css">

   <script src="js/vendor/jquery-1.9.0.min.js"></script>    
   <script src="js/vendor/jquery.mobile-1.4.2.min.js"></script>  
   <script src="js/vendor/unslider.min.js"></script>
   <script src="js/vendor/jquery.event.swipe.js"></script> 
   <script src="js/main.js"></script>
</head>
<body>

    <div data-role="page" id="firstPage">

        <div data-role="main" class="ui-content">
            <div class="banner">
                <ul>
                    <li>This is a slide.</li>
                    <li>This is another slide.</li>
                    <li>This is a final slide.</li>
                </ul>
            </div>
        </div>
    </div>
</body>

的main.css：

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

main.js：

$(document).on("ready", function () {
    $('.banner').unslider();
});

但没有显示（与其他jquery移动页面结合使用时）。当我只使用一个页面时，unlider会显示为普通列表。

我该如何做到这一点？

Answer 1

问题是您在错误/未定义的DOM元素上调用了unslider

HTML

中没有class='initInstructionsSlider'的DOM元素

Insted of

$('.initInstructionsSlider').unslider();

写

$('.banner').unslider();

JSFiddle

Answer 2

好的，我一直在尝试这个，直到我开始工作。

首先，我必须将调用添加到pageshow事件中：

$(document).delegate("#firstPage", "pageshow", function () {
    $('.banner').unslider();
});

然后，我必须为li元素添加一些额外的css：

.banner { 
  position: relative; 
  overflow: auto; 
  margin: 0;
  padding: 0;
}
.banner ul {
    list-style: none;
    width: 300%;
}
.banner li { 
  list-style: none; 
}
.banner ul li { 
  display: block;
  float: left; 
  min-height: 350px;
  padding: 4em 0 4px;
  width: 33%;
}

我认为只有min-height可以解决问题，但我添加了一些css来设计它。

另外，我添加了以下内容以显示点：

.banner .btn, .banner .dot {
  -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}

.banner .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
}
.banner .dots li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;

  text-indent: -999em;

  border: 2px solid #fff;
  border-radius: 6px;

  cursor: pointer;
  opacity: .4;

  -webkit-transition: background .5s, opacity .5s;
  -moz-transition: background .5s, opacity .5s;
   transition: background .5s, opacity .5s;
}
.banner .dots li.active {
  background: #fff;
  opacity: 1;
}

Unslider + jquery mobile？

2 个答案: