Swiper JS слайдер для сообщений, возвращающих только один пост - PullRequest
Новая
       26

Swiper JS слайдер для сообщений, возвращающих только один пост

0 голосов
/ 05 мая 2020

Я пытаюсь реализовать слайдер Swiper JS в моем Wordpress, чтобы отображать последние три сообщения в карусели. Все работает нормально, за исключением того, что возвращается только один зацикленный пост.

Я предполагаю, что делаю что-то плохое, но не могу понять, что это.

Вот мой PHP: 

    <!-- Slider main container -->
    <div class="swiper-container">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide">

                    <?php
                    if ( have_posts() ) :

                        /* Start the Loop */
                        while ( have_posts() ) :
                            the_post();

                            /*
                             * Include the Post-Type-specific template for the content.
                             * If you want to override this in a child theme, then include a file
                             * called content-___.php (where ___ is the Post Type name) and that will be used instead.
                             */
                            get_template_part( 'template-parts/slider', get_post_type() );

                        endwhile;


                    else :

                        get_template_part( 'template-parts/content', 'none' );

                    endif;
                    ?>


                </div>

        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>

А вот скрипт, инициализирующий Swiper: 

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: true,
        speed: 800,
        spaceBetween: 100,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
            type: 'fraction',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

        // Autoplay
        autoplay: {
        delay: 5000,
    },

        // Keyboard
        keyboard: {
            enabled: true,
            onlyInViewport: false,
        },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })

Заранее спасибо.

...