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

Ответ 1

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

http://www.owlcarousel.owlgraphic.com

Ответ 2

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

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

С этой целью я нашел и рекомендую использовать Slick Carousel. У Slick есть "Center Mode", который имел именно ту функциональность, которую я искал:

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

Ответ 3

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

rewindNav: true

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

Или вы можете это как-то погладить)

Ответ 4

Я смог выполнить это с помощью jquery/php/ajax. Вот как я это сделал:

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

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

<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 файл, и это должна быть страница, которая используется в URL-адресе ajax в 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

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