How can I implement jQuery plugin correctly with my CPT?

Question

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 :)

Answer 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