Блог

Я пытаюсь создать скользкую карусель, используя библиотеку slick http://kenwheeler.github.io/slick /

Slick загружается и правильно применяет классы, контейнеры, кнопки и т. Д., Но слайды постоянно отключены от экрана. Значение translate3d x на активном слайде всегда устанавливается вне окна. При нажатии кнопки «предыдущий» или перетаскивании слайда я могу вытащить его на экран, но как только он достигает положения 0,0,0, он немедленно возвращается за пределы экрана. Вот моя попытка заставить его работать

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

В моем js-файле я использую

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

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

примечание: перетаскивание работает на моей веб-странице, но не в песочнице jsfiddle

Я не получаю ошибок javascript. Есть ли причина, по которой слайды постоянно находятся в позиции translate3d за пределами окна браузера, а при перетаскивании на экран возвращаются за пределы окна браузера при отпускании?

Проблема в ваших rtl настройках. Для работы требуется немного дополнительной разметки (из Slick docs):

Примечание: HTML-тег или родительский элемент слайдера должен иметь атрибут «dir», установленный на «rtl».

Если вы измените свой гладкий родительский div с этого:

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

К этому:

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

Это должно отсортировать его