Slick Carousel Permanently Off Screen

Question

I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/

Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work

<div class="slick-slider homepage-slider">
    <div>
        <a href="#">
            <div class="slide-content"><img src="http://placehold.it/350x150">
                <div class="slide-text">
                    <h2 class="slide-title">Slide Title</h2>
                    <div class="slide-caption">
                        <p>Slide Summary</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div>
        <a href="#">
            <div class="slide-content"><img src="http://placehold.it/350x150">
                <div class="slide-text">
                    <h2 class="slide-title">Slide Title</h2>
                    <div class="slide-caption">Slide summary</div>
                </div>
            </div>
        </a>
    </div>
    <div>
        <a href="#">
            <div class="slide-content"><img src="http://placehold.it/350x150">
                <div class="slide-text">
                    <h2 class="slide-title">Slide title</h2>
                    <div class="slide-caption">
                        <p>Slide summary</p>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>

In my js file I'm using

jQuery(document).ready(function() {
    jQuery('.homepage-slider').slick({
        rtl: true
    });
});

http://jsfiddle.net/q1qznouw/549/

note: dragging works on my webpage but not within the jsfiddle sandbox

I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?

Answer 1

The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):

Note: the HTML tag or the parent of the slider must have the attribute "dir" set to "rtl".

If you change your slick parent div from this:

<div class="slick-slider homepage-slider">

To this:

<div class="slick-slider homepage-slider" dir="rtl">

That should sort it