Jquery plugins 是否可以使用owl转盘实现循环/无限转盘？

我使用的是猫头鹰旋转木马，除了不支持循环/无限滚动外，它工作得非常完美。我在谷歌和stackoverflow上搜索创意，但运气不好。有人在owl转盘中实现了循环/无限滚动吗？

没有。他们说转盘不支持循环幻灯片。 这可能有助于：

rewindNav: true

但这只适用于导航箭头，而不适用于响应性幻灯片=(

---

或者你也可以用某种方式进行修改）

猫头鹰转盘确实有

循环：true

配置设置。但是，有几个问题我不喜欢：

猫头鹰在最后拖动时不会转到第一张幻灯片（而不是单击导航按钮）

猫头鹰倒回第一张幻灯片，它不会无限环绕。这是一个很大的区别，并不像一个适当的圆形/无限滚动旋转木马那样令人愉悦

为此，我发现并建议改用光滑的旋转木马。Slick有一个“中心模式”，它正是我想要的功能：

---

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

1） 首先，您需要首先在页面上放置第一个x数量的图像，从技术上讲，这将是第一个页面，然后每次到达旋转木马末端时，您都将通过ajax加载。在我提供的示例脚本中，我从一个名为“images”的虚构数据库表中获取了一个图像列表。在我的php脚本中，对于这个特定的示例，它将返回24个包含内容的owl项div。对于这个例子，我将在第一个页面上一次加载24个图像，然后ajax将尝试每次再返回24个图像

HTML（您需要将第一个项目添加到carousel div中，从技术上讲，这些项目将是项目的第一页。您可以使用php填充初始第一页的divs/image源。只需像我下面所做的那样使用常规div，因为carousel将在初始化后向其添加owl项目类）

.... 其余的图片放在这里，每个都在自己的div中。。。。
.... 对于这个例子，我总共加载了24幅图像。。。

Javascript（此Javascript与上面的HTML位于同一页面上。）

$（文档）.ready（函数（）{
var itemsPerPage=0；//每页的项目数。
var page=2；//从第2页开始，因为我们最初用HTML创建了第1页
var working=false；//用于在工作时防止触发器触发的布尔值
var lastvalue=0；//owl对象项位置数组的最后一个值
var carouselDiv='.circle slider'；//将放置owl转盘的div。请参见上面的HTML。必须使用jQuery表示法。
//正常的猫头鹰旋转木马设置。查看他们的网站以获取更多选项。我的示例使用这些选项。如果您将它们更改为其他选项，则不保证它会工作。
$（旋转木马）。旋转木马({
项目：1，
itemsDesktop:[1920,2]，
itemsDesktopSmall:[980,2]，
itemsTablet:[768,2]，
itemsTabletSmall:[480,1]，
itemsMobile:[370,1]，
singleItem:false，
itemscaleup:false，
幻灯片速度：800，
分页速度：300，
倒带速度：250，
分页：false，
自动播放：错误，
后移：函数（）{
//这就是所有魔法发生的地方。一旦你滑动物品并放开后移，就会触发回调。
var owl=$（carouselDiv）.data（'owlCarousel'）；//获取当前的owl carousel对象
lastvalue=owl.positionsInArray[owl.positionsInArray.length-1]；//获取位置数组中的最后一个项目位置值
如果（（owl.currentItem==owl.maximumItem）&！正在工作）{
working=true；//将working设置为true，这样在该请求完成之前，我们不会触发更多事件并加载更多项
$.ajax({
方法：“获取”，
url:“/path/to/php/script/see/script/below”，
async:false，
数据类型：“脚本”，
数据：{page:page，itemWidth:owl.itemWidth}
}).完成（功能（数据）{
itemsPerPage=parseInt（cresults.numberOfItems，10）；
if（itemsPerPage）{
$（'.owl wrapper'）.width（$（'.owl wrapper'）.width（）+（itemsPerPage*owl.itemWidth））；//修改包装div的宽度以处理新项目
$（'.owl wrapper'）.append（cresults.html）；//追加标记
owl.maximumItem=parseInt（owl.maximumItem，10）+parseInt（itemsPerPage，10）；//修改owl对象中的最大项
对于（var i=0；i

PHP脚本（创建一个PHP文件

<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>

<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
    $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