Гладкая Карусель с изображениями, не получающими понижение - PullRequest
Новая
       7

Гладкая Карусель с изображениями, не получающими понижение

2 голосов
/ 04 апреля 2020

Я пытаюсь создать и спроектировать Slick Carousel членов моей команды в JSFiddle. Я включил все библиотеки и не получил ошибок относительно Slick и JQuery. Проблема в том, что он совсем не становится скользящим. Вот моя ссылка Fiddle JSFiddle 

    <script>
            jQuery('#sherpas_slider').not('.slick-initialized').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            focusOnSelect: true,
            variableWidth: true,
            dots: true,
            centerMode: true,

        });

        jQuery('.y_sherpas .wrp_ds p').html(jQuery('#sherpas_slider .slick-current li').data('sherpas_desc'));

        jQuery('#sherpas_slider').on('afterChange', function(e, sl, currSlide) {
            var slide = sl.$slides[currSlide];
            var desc = jQuery(slide).find('li').data('sherpas_desc');
            jQuery('.y_sherpas .wrp_ds p').html(desc);
        });
</script>

1 Ответ

1 голос
/ 04 апреля 2020

Проблема в вашем JSFiddle не с JavaScript. В вашем HTML есть много дополнительной разметки, которая выглядит как вырезанная из другой реализации Slick, только после того, как Slick добавил свои дополнительные классы и оболочки слайдов. После того, как я удалил их, слайдер работал как положено. См .: https://jsfiddle.net/fjm4672y/

Слику просто нужен обертка с идентификатором или классом для подключения (* в данном случае <ul id="sherpas_slider">), который содержит дочерний элемент для каждого слайда (ваш <li> элементы). Остальная часть вашей разметки только мешала. 

     <section class="y_sherpas">
        <div class="wrp_ds">
            <h2 class="hdnh2">YOUR SHERPAS</h2>
            <p></p>
        </div>
        <div class="org_prn sherpas">
            <ul id="sherpas_slider">
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2020/01/team-ryan-stewart.png" alt="">
                        <h5>Ryan Stewart</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2018/12/david-krevitt-blueprint.jpg" alt="">
                        <h5>David Krevitt</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2020/01/team-ryan-stewart.png" alt="">
                        <h5>Ryan Stewart</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2018/12/david-krevitt-blueprint.jpg" alt="">
                        <h5>David Krevitt</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2020/01/team-ryan-stewart.png" alt="">
                        <h5>Ryan Stewart</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
                <li data-sherpas_desc="" style="width: 100%; display: inline-block;">
                        <img src="https://theblueprint.training/wp-content/uploads/2018/12/david-krevitt-blueprint.jpg" alt="">
                        <h5>David Krevitt</h5>
                        <h6>Co-Founder, The Blueprint Training</h6>
                </li>
           </ul>
        </div>
    </section>

После удаления дополнительной разметки мне пришлось изменить способ нацеливания на <ul>: 

jQuery('#sherpas_slider').slick({
    ...
});
...