Javascript 不滑动&x2B；jquerymobile？

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

html:

main.js：

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

但是没有显示任何内容（与其他jquery移动页面组合时）。当我只使用一个页面时，反滑器显示为普通列表

---

我怎样才能做到这一点呢？

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

unslider

HTML中没有带

class='initInstructionSlider'

的DOM元素

代替

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

写

---

好的，我一直在尝试，直到它开始工作

首先，我必须将调用添加到

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

.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;
}    

我认为

minheight

本身就可以做到这一点，但是我添加了一些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%;
}

.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;
}    

---

html中没有类“initInstructionSlider”代替

$（'.initInstructionSlider'）.unslider（）的元素写入
$（'.banner'）.unslider（）谢谢@SreekeshOkky，但实际上这是一个复制粘贴错误，为了清晰起见，我替换了类名，但是我错过了.jspart@ezabaw您的滑块现在工作正常，不是吗。不，不是…：（在我的文件中，所有内容都是.initInstructionSlider类的，为了在帖子中清晰起见，我将其更改为.banner（但错过了.js）。感谢您的帮助！它对我不起作用，但您的JSFIDLE为我找到答案提供了帮助：）
.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;
}