I'm using slick.js slider syncing function and I'm having a problem getting it to sync. I'm also using laravel 4. If I click on my slider images nothing happens the main image doesn't change at all. When I check my firebug, I don't get any errors in my console and the .popup_images_test changes accordingly but the .popup_main_image_test doesn't change.

Here is my items.blade.php

@extends('templates::public')
@section('content')

    {{ $category->title }}


    <ul class="grid">
        @foreach($galleries as $gallery)
            <?php
                $galImage = getImagesArray($gallery->image);
                $galImage2 = getImagesArray($gallery->image2)
            ?>

            <?php
                $slug = getSlug($gallery->title);
            ?>

            <li>
                @if(!empty($galImage))
                    @foreach($galImage as $galImg)
                        <a data-category="{{ $slug }}" class="category_items popup" href="javascript:void(0);">{{ HTML::image('gallery_images/'.$galImg) }}</a>
                    @endforeach
                @endif
            </li>


            <div class="popup_background">
                <div data-item="{{ $slug }}" class="items_links">
                    <div class="close1">close</div>
                    <div class="popup_main_image_test">
                        @if(!empty($galImage2))
                            @foreach($galImage2 as $galImg2)
                                <div style="border: 5px solid blue;">{{ HTML::image('gallery_images/'.$galImg2) }}</div>
                            @endforeach
                        @endif
                    </div>

                    <div class="popup_images_test">
                        @if(!empty($galImage2))
                            @foreach($galImage2 as $galImg3)
                                <div style="border: 5px solid red;">{{ HTML::image('gallery_images/'.$galImg3) }}</div>
                            @endforeach
                        @endif
                    </div>
                </div>      
            </div>
        @endforeach
    </ul>
    <div class="overlay"></div>

@stop

My main.js

$('.popup_main_image_test').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.popup_images_test'
});
$('.popup_images_test').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    asNavFor: '.popup_main_image_test',
    dots: true,
    centerMode: true,
    focusOnSelect: true
});