firstly i know i have to add some code explaining what i have done before.

But honestly i had tried more than ten tutorial concerning wordpress post slider based on flexslider or bxslider or other trics with jquery but seriously guys I don't where is the problem, i can't show slider the best thingi show is a list of post image and content vertically.

So my question is how to create a wordpress post slider?

PS. i had some linked jquery , those files could interrupt the slider. post


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>

2: Set the style by CSS as below:


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.


Thank you for your answer, yes i don't have a good level in javascript but i have created the same thing that you said and its worked but its need the animation so i tried to be based on flex slider but without any success thats my code, i know that this code is for attachement but i don't have anything shown.

function revconcept_get_images($post_id) {
global $post;

 $thumbnail_ID = get_post_thumbnail_id();

 $images = get_children( array('post_parent' => $post_id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'ASC', 'orderby' => 'menu_order ID') );

 if ($images) :

     foreach ($images as $attachment_id => $image) :

         $img_alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true); //alt
         if ($img_alt == '') : $img_alt = $image->post_title; endif;

         $big_array = image_downsize( $image->ID, 'large' );
         $img_url = $big_array[0];

         echo '<li>';
         echo '<img src="';
         echo $img_url;
         echo '" alt="';
         echo $img_alt;
         echo '" />';
         echo '</li><!--end slide-->';

 endforeach; endif; }

i added this function in function.php and this one in header

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/js/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.flexslider.js"></script>

and then i display the attachement in single.php by this one.

<div class="flexslider">
<ul class="slides">
    <?php revconcept_get_images("$post->ID"); ?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.