我认为问题是你不知道如何使用你选择的滑块插件。事实上,如果您了解JavaScript,就可以制作一个没有jQuery的简单滑块。
要创建post滑块,步骤如下:
1: 通过WordPress函数创建帖子列表。使用<ul>
要包装列表并使用的标签<li>
标签包装每篇文章:
<div class="sliderContainer">
<ul class="slider">
<li class="sliderItem"><article>/* post content */</article></li>
<li class="sliderItem"><article>/* post content */</article></li>
<li class="sliderItem"><article>/* post content */</article></li>
</ul>
</div>
2:按CSS设置样式,如下所示:
.sliderContainer{position:relative;overflow:hidden;}
.slider{position:absolute;top:0;left:0;}
.sliderItem{float:left;line-height:0;font-size:0;*zoom:1;}
.sliderItem:after{display:table;content:\'\';clear:both;}
您还应该设置
width
和
height
容器的。现在,您应该得到一个水平的帖子列表,并且只显示第一篇帖子(其他帖子溢出并隐藏)。
3: 现在使用JavaScript移动.slider
哪个是<ul>
标签原则是参见<ul>
作为皮带并移动它width
一次一次的距离。
如果您不需要考虑IE9,那么使用CSS3transition
和transform:translateX
制作动画。使用JavaScript添加或删除transition
和transform
风格
您仍然需要做一些详细的工作,以使JavsScript部分更加实用,但这是一个良好的开端。