我正在使用 owl carousel，它运行良好，但它不支持循环/无限滚动。我确实在谷歌和 stackoverflow 上搜索了想法，但没有运气。有没有人在猫头鹰轮播中实现循环/无限滚动？
问问题
57876 次
3 回答
8
Owl Carousel 确实有loop: true配置设置。但是，有一些我不喜欢的问题：
- 猫头鹰在最后，拖动时不会转到第一张幻灯片（而不是单击导航按钮）
- 猫头鹰倒回第一张幻灯片，它不会无限循环。这是一个很大的区别，而且不像一个适当的圆形/无限滚动的轮播那么令人愉悦。
为此，我发现并推荐使用 Slick Carousel。Slick 有一个“中心模式”，它具有我正在寻找的功能：
于 2015-06-06T02:59:14.077 回答
1
不，他们说轮播不支持圆形幻灯片。这可能会有所帮助：
rewindNav: true
但这仅适用于导航箭头，不适用于响应式幻灯片 =(
或者你可能会以某种方式把它搞砸）
于 2014-02-24T08:45:56.257 回答
0
我能够使用 jquery/php/ajax 来完成它。这是我的做法：
1）首先，您首先需要在页面上放置前 x 数量的图像，这在技术上将是第一页，然后每次到达轮播结束时您都将通过 ajax 加载。在我提供的示例脚本中，我从一个名为“images”的虚构数据库表中获取了一个图像列表。在我的 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: "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('/\'/', '’', $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 和桌面浏览器上运行。玩得开心！
于 2015-07-25T07:13:21.173 回答