0

I've tried making an area for client testimonials on my site but I'm having troubles with the jQuery plugin Unslider, which I've implemented.

Here is the live site. - The slider is located in the third section, under "HVA KUNDENE SIER".

First I'll write up what I've done, and my actual problems is at the bottom of this question.

So here's what I've done:

I've created a custom post type for the testimonials where the markup is set up in accordance with the guidelines of the plugin:

<div class="referanse-wrapper">
    <div class="banner">

        <?php
            $args = array(
                'post_type' => 'referanse'
            );
            $referanser = new WP_Query( $args );
            if( $referanser->have_posts() ) {
                while( $referanser->have_posts() ) {
                    $referanser->the_post();
                    ?>
                        <ul class="flex-unslider-ul">   
                            <li class="flex-unslider-slide">
                                <div class="content">
                                    <?php the_content(); ?>
                                </div>
                                <h1>- <?php the_title() ?></h1>
                            </li>
                        </ul>
                    <?php
                }
            }
            else {
                echo 'Oh ohm no referanser!';
            }
        ?>



    </div>
</div>

I've included jQuery as well, and I copied the minified script into a js file which I called in my functions.php file:

function my_scripts() {
wp_enqueue_script( 'unslider', get_bloginfo('template_directory') . '/../canvas-flex/js/unslider.min.js', array('jquery') );
}
add_action('template_redirect', 'my_scripts');

Lastly I've added this script in my header.php file:

<script>
jQuery(document).ready(function($) {
    $('.banner').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 3000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: true              //  Support responsive design. May break non-responsive designs
    });
})
</script>

Currently I have two main issues that I'm having trouble with:

1: Only the first slide displays, none of the next slides appear.

2: The navigation dots are displayed in the markup, but won't appear on the site.

Appreciate any help given. If I'm missing some information, feel free to tell me and I'll add it as quickly as possible :)

  • Have you tried wp_enqueue_scripts hook instead of template_redirect? – sri Feb 21 '14 at 15:27
  • Just did, and it's the same result, but it shouldn't make any difference really..? The plugin is working, there's just something wrong with how it's working.. – turtledropbomb Feb 21 '14 at 15:46
  • I would place the Java Script code in a file rather than in a header and en-queue it. It is the best practice I think! I guess the problem is with the way JavaScript files are loaded. Did you verify if there are loaded in the order you want? – sri Feb 21 '14 at 16:02
  • No enqueuing is definitely best practice, see premium.wpmudev.org/blog/7-deadly-sins-of-wordpress-development – benpalmer Feb 21 '14 at 16:10
  • Thanks for the tip, will be using that from now on I guess :P – turtledropbomb Feb 21 '14 at 16:31
1

It looks like you're looping 4 <ul class="flex-unslider-ul"> items, do you not need to simply put the loop around the <li class="flex-unslider-slide">

<?php
$args = array(
    'post_type' => 'referanse'
);
$referanser = new WP_Query( $args );
if( $referanser->have_posts() ):
    ?>
    <ul class="flex-unslider-ul">
        <?php  while( $referanser->have_posts() ): $referanser->the_post(); ?>
        <li class="flex-unslider-slide">
            <div class="content">
                <?php the_content(); ?>
            </div>
            <h1>- <?php the_title() ?></h1>
        </li>
        <?php endwhile; ?>
    </ul>
<?php
else:
    echo 'Oh ohm no referanser!';
endif;
?>

Hope this helps

  • Source code confirms that there are indeed 4 ul elements with 1 slide each instead of 1 ul with 4 slides as proposed here. +1 – helgatheviking Feb 21 '14 at 16:09
  • Thank you so much, this worked :) And doh, i feel so stupid now :P – turtledropbomb Feb 21 '14 at 16:11
  • We all do it haha – benpalmer Feb 21 '14 at 16:13

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.