Question

我正在使用猫头鹰旋转木马并且它完美地工作，除了它不支持圆形/无限滚动。我确实搜索了谷歌和stackoverflow的想法没有运气。有没有人在猫头鹰旋转木马中实现循环/无限滚动？

Answer 1

Owl Carousel确实具有loop: true配置设置。但是，有一些我不喜欢的问题：

当拖动时（而不是点击导航按钮），猫头鹰不会转到第一张幻灯片
Owl 倒退到第一张幻灯片，它不会无限循环。这是一个很大的区别，并不像正确的圆形/无限滚动旋转木马那样令人愉悦。

为此，我发现并建议使用Slick Carousel代替。 Slick有一个“中心模式”，它具有我正在寻找的功能：

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

Answer 2

不，他们说旋转木马不支持圆形滑梯。可能这可能会有所帮助：

rewindNav: true

但这仅适用于导航箭头，而不适用于响应式幻灯片=（

或者你可能会以某种方式打它）

Answer 3

我能够使用jquery / php / ajax完成它。我是这样做的：

1）首先，您需要首先在页面上放置第一批x图像（技术上是第一页）然后在每次到达轮播结束时通过ajax加载。在我提供的示例脚本中，我从一个名为＆＃34; images＆＃34;的虚构数据库表中获取了一个图像列表。在我的PHP脚本中，对于这个特定的例子，它将返回带有内容的24个owl-item div。在这个例子中，我将在第一页上一次加载24个图像，然后ajax将尝试每次再返回24个。

HTML （您需要将第一项添加到轮播div中，这些项目在技术上将是项目的第一页。您可以使用php填充div的初始/图像来源第一页。就像我在下面做的那样使用常规div，因为旋转木马会在初始化时将owl-item类添加到它们中。

<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文件，这应该是JavaScript中ajax url中使用的页面，即$ .ajax（{method：＆＃34; GET＆＃34;， url：＆＃34; / path / to / php / script＆＃34; .....）

<?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和桌面浏览器。玩得开心！

是否可以使用猫头鹰旋转木马实现圆形/无限轮播？

3 个答案: