problem with creating a wordpress post slider

I think the problem is you don’t know how to use the slider plugins you choose. In fact if you know JavaScript, you could make a simple slider without jQuery.

To create a post slider, the steps is:

1: Create a post list by WordPress function. Use a <ul> label to wrap the list and use <li> label wrap every post:

<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: Set the style by CSS as below:

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

Also you should set the width and height of the container. Now you should get a horizontal post list and only the first post be shown(the others is overflow and is hidden).

3: Now use JavaScript to move the .slider which is the <ul> label. The principle is see the <ul> as a belt and move it width distance once a time.

If you don’t need to consider IE9- then use the CSS3’s transition and transform:translateX to make the animation. Use JavaScript to add or remove the transition and transform style.

You still need to do some detail work to make the JavsScript part more practical but this is a good start.

Related Posts: