Можно ли использовать круговую/бесконечную карусель с использованием карусели совы?

Question

Я использую карусель совы, и она отлично работает, за исключением того, что она не поддерживает круговую/бесконечную прокрутку. Я действительно искал идеи в google и stackoverflow без везения. Кто-нибудь реализовал круговую/бесконечную прокрутку в каруселе совы?

Answer 1

Вы можете обновить ползунок v2 (или бета 2.4), чтобы заставить его прокручивать бесконечно. Он имеет новый параметр (loop: true), который делает это.

http://www.owlcarousel.owlgraphic.com

Answer 2

No. Они сказали, что карусель не поддерживает круговые слайды. Возможно, это может помочь:

rewindNav: true 

Но это работает только с навигационными стрелками, а не с реагирующими горками = (

Или вы можете Гек это как-то)

Answer 3

Сова Carousel имеет настройку loop: true конфигурации. Но есть несколько проблем, мне не нравится:

1. Сова не Гот первый слайд, когда в конце, когда перетаскивание (вместо нажатия кнопки навигации)
2. Owl перематывает к первый слайд, он не обертывается бесконечно. Это большая разница, и не такая приятная, как правильная круговая/бесконечно прокручиваемая карусель.

Для этого я нашел и рекомендую использовать вместо этого карусель. Slick имеет «Центр Mode», который имел именно функциональность я искал:

http://kenwheeler.github.io/slick/

Answer 4

Я был в состоянии выполнить его с помощью Jquery/PHP/Ajax. Вот как я это сделал:

1) Сначала вам нужно сначала разместить первое количество изображений на странице, которое будет технически первой страницей, а затем вы будете загружать через ajax каждый раз, когда вы достигнете конца карусели. В приведенном ниже примере скрипта я получаю список изображений из вымышленной таблицы базы данных, называемой «изображения». В моем php-скрипте для этого конкретного примера он вернет 24 div с содержимым. В этом примере я загружаю 24 изображения одновременно на первой странице, а затем ajax будет пытаться возвращать 24 раза каждый раз.

HTML (Вам нужно будет добавить первые элементы в карусельной DIV и эти детали будут технически быть на первой странице элементов. Вы можете использовать PHP для заполнения/источника изображения дивы для начальной первой страницы. Просто используйте регулярные divs, как я сделал ниже, потому что карусель добавит к ним класс сова-элемента после его инициализации).

<div class="circle-slider"> 
    <div> 
     <img src="/path/to/image/1" /> 
    </div> 
    <div> 
     <img src="/path/to/image/2" /> 
    </div> 
     .... the rest of the images go here, each in their own div .... 
     .... for this example I'd load 24 images total ... 
</div> 

Javascript (Это Javascript идет на той же странице, что и HTML выше.)

<script type="text/javascript"> 
     $(document).ready(function() { 
      var itemsPerPage = 0; // The number of items per page. 
      var page = 2; // Start on page 2 since we initially created page 1 in HTML 
      var working = false; //Boolean to keep the trigger from firing while we work 
      var lastvalue = 0; //last value of the owl objects item position array 
      var carouselDiv = '.circle-slider'; // the div that you will be placing the owl carousel on. See HTML above. MUST BE IN jQuery Notation. 

      //Normal Owl Carousel Setup. See their site for more options. My example works with these options. No guarantee if you change them to something else that it will work. 
      $(carouselDiv).owlCarousel({ 
       items : 1, 
       itemsDesktop : [1920,2], 
       itemsDesktopSmall : [980,2], 
       itemsTablet: [768,2], 
       itemsTabletSmall: [480,1], 
       itemsMobile : [370,1], 
       singleItem : false, 
       itemsScaleUp : false, 
       slideSpeed : 800, 
       paginationSpeed : 300, 
       rewindSpeed : 250, 
       pagination:false, 
       autoPlay : false, 
       afterMove : function() { 
        // This is where all the magic happens. Once you slide the items around and let go this afterMove callback fires. 
        var owl = $(carouselDiv).data('owlCarousel'); //get the current owl carousel object 
        lastvalue = owl.positionsInArray[owl.positionsInArray.length-1]; //Get the last item position value in the position array 

        if((owl.currentItem == owl.maximumItem) && !working){ 
         working = true; //Set working to true so we dont fire more events and load more items until this request is finished working 
         $.ajax({ 
          method: "GET", 
          url: "/path/to/php/script/see/script/below", 
          async: false, 
          dataType: "script", 
          data: { page: page, itemWidth: owl.itemWidth } 
         }).done(function(data) { 
          itemsPerPage = parseInt(cresults.numberOfItems, 10); 
          if(itemsPerPage){ 
           $('.owl-wrapper').width($('.owl-wrapper').width() + (itemsPerPage * owl.itemWidth)); //modify the width of the wrapper div to handle the new items 
           $('.owl-wrapper').append(cresults.html); //append the markup 
           owl.maximumItem = parseInt(owl.maximumItem, 10) + parseInt(itemsPerPage, 10); //modify the max items in the owl object 
           for (var i = 0; i < itemsPerPage; i++) { // add new indexes in the position array for the owl object. 
            lastvalue = lastvalue-owl.itemWidth 
            owl.positionsInArray.push(lastvalue); 
           } 
           owl.maximumPixels = owl.maximumPixels - (owl.itemWidth * itemsPerPage); //modify the owl maximum pixels to accomodate new items 
           owl.$owlItems = $(carouselDiv).find(".owl-item"); 
           page = page + 1; 
          } 
          working = false; 
         }); 
        } 
       } 
      }); 
     }); 
    </script> 

PHP SCRIPT (Создать файл PHP, и это должно быть страница, которая используется в ajax url в JavaScript, то есть $ .ajax ({method: "GET", url: "/ path/to/php/script" .....)

<?php 
    $page = isset($_GET['page']) ? $_GET['page'] : 2; 
    $itemWidth = isset($_GET['itemWidth']) ? $_GET['itemWidth'] : 0; 
    //Get 24 images from my database 
    $link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link)); 
    $query = 'SELECT * FROM images LIMIT 24 OFFSET ' . (($page - 1) * 24); 
    $result = $link->query($query); 
    $return = null; 
    while($image = mysqli_fetch_object($result)) { 
     $return .= '<div style="width: ' . $itemWidth . 'px;" class="owl-item"><div><img src="' . $image->path . '" alt="img" /></div></div>'; 
    } 

    mysqli_close($link);  
    // Replace some characters in the return string to they wont mess up javascript 
    $return = preg_replace('/\n/s', "", $return); 
    $return = preg_replace('/\s\s+/', ' ', $return); 
    $return = preg_replace('/\'/', '&rsquo;', $return); 
    echo 'cresults = { "html" : \'' . $return . '\', numberOfItems: \'' . $result->num_rows . '\'};'; //echoing the return value will fulfill the Ajax call to this method 

Это в значительной степени. Проще простого. Очень хорошо работает. Если браузер изменяет размер и приводит к изменению размеров элементов совы, он возвращает карусель обратно к первому элементу, но я понял, как добавить элементы к объекту, чтобы он не испортил вещи и уже включен в JavaScript. , Сообщите мне, есть ли у вас какие-либо проблемы, и я мог бы помочь их исправить. Работая над этим несколькими днями, я просто получил эту работу, поэтому у меня не было времени на ее тщательное тестирование, но я знаю, что она работает на мобильных телефонах, как iPhone, так и Android, и работает как на iPad, так и на настольных браузерах. Повеселись!