Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by Arash Emadi
Arash Emadi
10,002 Points

What's wrong with my Flex Slider Two Row Slideshow?

Hello all.

I've designed a theme and template for my WordPress site. On this special page ( http://sama.tv/newsamatv/pearl) , I want to have a two row slideshow with 8 videos in it. I've managed to make it show as a slideshow but it's not working. I will give you my codes and also the problem I'm facing. I'd be grateful if you can help me out with it. Thank you.

The problem I have is that the slideshow is showing me 7 videos instead of 8 per slide, and I don't know what has caused this issue. And also, the slideshow is not working at all. The buttons aren't showing up, the slides are not moving. I don't know what I've missed or what I've done wrong. Please help me out with this.

This is the code I used for my Flex Slider Slideshow Loop: 

            <div class="clearfix flexslider">
                <center>
                    <ul class="slides">
                          <?php
                            $args = array(
                                'post_type' => 'pearl'
                            );
                            $slideshow_query = new WP_Query( $args );          
                            ?>  
                        <li>
                        <?php if ( have_posts() ) : while ( $slideshow_query->have_posts() ) : $slideshow_query->the_post(); ?>
                            <div id="fr"><a href="<?php the_permalink();?>"><img src="<?php the_field('image');?>"/><div id="cap"><?php the_title(); ?></div></a></div>
                        </li>
                            <?php endwhile;?>
                            <?php endif;?>
                    </ul>
                </center>

This is the code I used in my theme.js file:

function make2Rows(iWidth) {
    var iHeight = parseFloat($('.flexslider .slides > li').height());
    $('.alliance-list .slides > li').css('width', iWidth+'px');
    $('.alliance-list .slides > li:nth-child(even)').css('margin', iHeight+'px 0px 0px -'+iWidth+'px');
}

$(window).load(function() {
    var itemCnt = 4; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 1000,
        animationSpeed: 300,
        animationLoop: true,
        directionNav: true,
        slideshow: true,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt,
        start: make2Rows(iWidth)
    });
});

And finally, this is what I did with my functions.php file:

// Load the Theme CSS
<?php function theme_styles() {

    wp_register_style ('Index', get_template_directory_uri() .'/css/Index.css');
    wp_register_style ('main', get_template_directory_uri() .'/style.css'); 

    wp_register_style ('flexslider', get_template_directory_uri() .'/css/flexslider.css');  

    if (is_page('home')) {
        wp_enqueue_style('Index');
    }else{
        wp_enqueue_style('flexslider');
        wp_enqueue_style('main');
    }
  }
  add_action('wp_enqueue_scripts', 'theme_styles');

  // Load the Theme JS
  function theme_js() {

    wp_register_script( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array('jquery'), '', true );
    wp_enqueue_script( 'flexslider' );
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );
 }
add_action( 'wp_enqueue_scripts', 'theme_js' );?>

1 Answer

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

WordPress has the noConflict rule in place, meaning that you can't use $ for jQuery unless you change scope. To fix it, you'll need to wrap all of your JavaScript in an anonymous function, like this:

(function($) {
  // your code here
})(jQuery);
Arash Emadi
Arash Emadi
10,002 Points

Thank you Ryan. Now, the slideshow is showing 8 slides as expected, but there's still no movement in the slideshow. What am I missing in my code?

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

This may sound like a silly question, but how many slides do you have? Are all your import paths correct? Check your JavaScript console in the browser for errors. Is the slider simply not moving, or is it just doing weird things?

Arash Emadi
Arash Emadi
10,002 Points

Ok I should explain it with more details. Right now, the SLIDER class has only one List Item and therefore, it's not moving when the items are more than 8 in one slide. I think I should modify my Loop in a way that after each 8 items, a new List Item is opened for another Slide. I want to have as many slides as my posts are and will be in the future (Based on a 8 video/post per slide).

Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

That sounds like a plan!

If I may, I'd suggest using a slider that has extra support for displaying multiple slides at once. Flexslider will do just fine; this slider has just a few extra features having to do with multiple slides.

Arash Emadi
Arash Emadi
10,002 Points

Hey Ryan,

Thanks for suggesting the new Slider.

I was playing around with the code last night and for now, I'm good with the videos appearing in one row. I really worked on the slideshow and I think it is being displayed the way I want it to be. But there's one last problem which I cannot understand or solve. I've added 10 Videos to http://sama.tv/newsamatv/pearl , but the slide only shows 8 of my videos. This is so weird for me because I don't know how this is being generated. The videos are now listed in different <li> tags but there's only 8 of them and not 10.. Can you tell me what my code is missing or what is wrong with it? Thanks in advance:

THEME.JS:

(function($) {
    function make2Rows(iWidth) {
    var iHeight = parseFloat($('.flexslider .slides > li').height());
    $('.alliance-list .slides > li').css('width', iWidth+'px');
    $('.alliance-list .slides > li:nth-child(even)').css('margin', iHeight+'px 0px 0px -'+iWidth+'px');
}

$(window).load(function() {
    var itemCnt = 4; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 6000,
        animationSpeed: 2500,
        animationLoop: true,
        directionNav: true,
        slideshow: true,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt,
        start: make2Rows(iWidth)
    });
});
})(jQuery);

PEARL.PHP:

<center>

                    <?php
                        $args = array(
                            'post_type' => 'pearl'
                        );
                        $slideshow_query = new WP_Query( $args );          
                    ?>

                     <?php 
                    if ($slideshow_query-> have_posts() ) :
                     ?>
                     <ul class="slides">
                     <?php while ( $slideshow_query->have_posts() ) : $slideshow_query->the_post(); ?>
                     <li>
                        <div id="fr">
                            <a href="<?php the_permalink();?>">
                            <img src="<?php the_field('image');?>"/>
                            <div id="cap"><?php the_title(); ?></div>
                            </a>
                         </div>
                    </li>

                    <?php endwhile;?>
                    <?php endif;?>
                    </ul>
                </center>
Ryan Duchene
Ryan Duchene
Courses Plus Student 46,022 Points

Sure thing. I looked at your HTML in my web inspector, and it appears that the HTML for the last two items (episodes 1 and 2) is not being generated. Your PHP appears to be fine, though.

Starting at the bottom: Try doing a hard refresh (probably won't work, but maybe). Then try clearing your cache and refreshing. If that doesn't work, double-check how many episodes you've created in WordPress and make sure that there are 8. After that, try creating two additional temporary episodes (for a sanity check) and check again.

If none of that works, reply back here and I'll try to help you some more. :)