Как исправить проблему петли Сова-Карусель? - PullRequest
Новая
       39

Как исправить проблему петли Сова-Карусель?

0 голосов
/ 15 февраля 2019

Я создаю карусель с бесконечной петлей на своем веб-сайте, используя Owl-Carousel 2, но что бы я ни пытался, я не мог заставить карусель работать.Карусель всегда немного двигается и возвращается, она как бы застряла.

Я пробовал без цикла и просто автозапуск, тогда он работает, но без зацикливания.Кроме того, если я добавлю autoplayHoverPause: true, с loop: true, он не будет работать, если я не наведу указатель мыши на карусель, тогда он будет скользить, но, конечно, цикл все равно не будет работать.

My Js; 

$('.award-full-slider').each(function () {
    if ($(this).find('.item').length > 1) {
        $(this).addClass('owl-carousel').owlCarousel({


          loop: true,
          autoplay : true,
          slideTransition: 'linear',
          autoplayTimeout : 10,
          autoplaySpeed : 15000,
          mouseDrag: false,
          dots: false,
          nav: false,
          autoplayHoverPause: true,
          responsive:{
              0:{
                  items:2,
                  nav:false,
                  loop:true,
              },
              600:{
                  items:4,
                  nav:false,
                  loop:true,
              },
              1000:{
                  items:6,
                  nav:false,
                  loop:true,
            }
          }
        });
    }
});

Код цикла PHP; 

<div class="home-award-area wrapper column" style="color:#0081ac !important">

<div class="home-award row-cont">
<div class="award-title"><a href="<?php echo home_url('news') ?>" class="action underline">Awards & Rankings</a></div>

<div class="items award-full-slider">

<?php
$query = new WP_Query(array(
'post_type' => 'award',
'posts_per_page' => 30,
'orderby' => 'date',
'order' => 'DESC',
));

while ($query->have_posts()) : $query->the_post();
$info = get_post_meta(get_the_ID(), '_post_info', true); if (!$info) $info = array();
$post_elem=get_post();
$postType = get_post_type_object(get_post_type());
    ?>

<div class="item">

<div class="content">
<div class="country">

<?php

$term = get_the_terms($ID,'award-country');
if ( ! empty( $term ) ) {
$term = $term[0];
?>
<?php echo $term->name ?>
<?php
}

?>
</div>

<div class="category">

<?php

$term = get_the_terms($ID,'award-category');
if ( ! empty( $term ) ) {
$term = $term[0];
?>
<?php echo $term->name ?>
<?php
}
?>
</div>
<div class="title">
<?php the_title() ?>
</div>
</div>

</div>


<?php endwhile; wp_reset_postdata(); ?>
</div>
</div>
</div>

Спасибо за помощь

1 Ответ

0 голосов
/ 16 февраля 2019

Я использую Сову Карусель с петлей, и она отлично работает.Если вы отметите https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html, вы можете найти официальную документацию.

Я думаю, что ваш PHP-код не генерирует правильную структуру html в отношении файлов по умолчанию js, css owl carousel , которые вы должны включить в свой проект 

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

Предполагая, что вы работаете с этими файлами по умолчанию, ваш PHP-код выглядит следующим образом 

<div class="items award-full-slider">
//YOUR WP LOOP $query = new WP_Query(array( ...
//YOUR WP LOOP while ($query->have_posts()) : $query->the_post(); ...
<div class="item">
//YOU ARE POSTING SLIDES HERE
</div>
//ENDLOOP
</div>

Я думаю, что это должно быть сделано в отношении документации , так что это должно быть что-товот так вместо этого 

<div class="items award-full-slider">
//YOUR WP LOOP $query = new WP_Query(array( ...
//YOUR WP LOOP while ($query->have_posts()) : $query->the_post(); ...
<div class="item">
//YOUR POSTING STUFF HERE
</div>
<?php endwhile; wp_reset_postdata(); ?>
</div>

<div class="items award-full-slider">
<div class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer">
  <?php
  $query = new WP_Query(array(
  'post_type' => 'award',
  'posts_per_page' => 30,
  'orderby' => 'date',
  'order' => 'DESC',
  ));

  while ($query->have_posts()):
    ?>
    <div class="owl-stage">
        <div class="owl-item">
           //Echo something here with regards to your WP_query posts objects
          <?php echo get_the_post_thumbnail(get_the_ID(), 'default'); 
          //and maybe the award-country, award-category ...
          ?>

        </div>

    </div>
</div>
</div>
</div>

И, честно говоря, я не понимаю, почему вы добавляете несколько классов сова-карусель !!когда вам просто нужно применить js-функцию owl carousel для вашего слайдера, как описано в документации, то это должно выглядеть следующим образом. 

jQuery(function($){ // use jQuery code inside this to avoid "$ is not defined" error

var owl = $('.owl-carousel');
owl.owlCarousel({
items:3,
loop:true, //HERE YOU ARE SAYING I WANT THE INFINITE LOOP
margin:0,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true,
nav:false,
dots:false
});
$('.play').on('click',function(){
owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
owl.trigger('stop.owl.autoplay')
})
});

Здесь вы можете найти пояснения для параметров slider , Таким образом, вы получаете этот бесконечный цикл, когда определяете loop в true в вызове функции js owlCarousel.

Вы можете использовать несколько Каруселей Owl на странице, вам просто нужно изменить свой HTML-код и JavaScript

  • Тег div, содержащий класс "owl-carousel", должен иметь другой пользовательский класс для каждой карусели, например:

  • Thejavascript должен быть обновлен, каждая карусель:

    $ ('. first-carousel'). owlCarousel ({// complete args ..

    $ ('. second-carousel').owlCarousel ({// complete args ..

    Ссылка на рабочий пример

...