0

所以，我发现了这个名为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>

主.css：

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

主.js：

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

但没有显示（与其他 jquery 移动页面结合使用时）。当我只使用一页时，取消滑块显示为正常列表。

我怎样才能使这项工作？

4

2 回答 2

1

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

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

安装在

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

写

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

JSFiddle

于 2014-06-24T04:11:02.590 回答
1

好的，我一直在尝试，直到我成功为止。

首先，我必须将调用添加到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;
}
于 2014-07-02T04:42:23.157 回答