Можно ли реализовать круговую / бесконечную карусель с использованием совой карусели?
Я использую совую карусель, и она отлично работает, за исключением того, что она не поддерживает круговую / бесконечную прокрутку. Я нашел идеи в Google и Stackru без удачи. Кто-нибудь реализовал круговую / бесконечную прокрутку в сове-карусели?
3 ответа
Вы можете обновить слайдер до версии v2 (или бета-версии 2.4), чтобы прокручивать его бесконечно. У него есть новый параметр (loop: true), который делает это.
Сова Карусель имеет loop: true настройка конфигурации. Но есть несколько проблем, которые мне не нравятся:
- Сова не идет к первому слайду, когда в конце, при перетаскивании (вместо нажатия на кнопки навигации)
- Сова перематывается на первый слайд, она не вращается бесконечно. Это большая разница, и не такая приятная, как правильно круглая / бесконечно прокручивающаяся карусель.
С этой целью я нашел и рекомендую вместо этого использовать Slick Carousel. У Slick есть "Center Mode", в котором были именно те функции, которые я искал:
Нет. Они сказали, что карусель не поддерживает круговые слайды. Возможно, это может помочь:
rewindNav: true
Но это работает только со стрелками навигации, а не с отзывчивыми слайдами =(
Или ты можешь как-то это потрахать)
Я смог сделать это с помощью jquery/php/ajax. Вот как я это сделал:
1) Сначала вам нужно сначала разместить на странице первое количество х изображений, которое технически будет первой страницей, а затем вы будете загружать через ajax каждый раз, когда достигнете конца карусели. В примере сценария, который я предоставил, я получаю список изображений из вымышленной таблицы базы данных, которая называется "images". В моем php-скрипте для этого конкретного примера он вернет 24 элемента div-item с содержимым. Для этого примера я сначала загружу 24 изображения на первой странице, а затем ajax будет пытаться каждый раз возвращать еще 24 изображения.
HTML (Вам нужно будет добавить первые элементы в div карусели, и эти элементы будут технически первой страницей элементов. Вы можете использовать php для заполнения источника div /image для начальной первой страницы. Просто используйте обычные 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, и это должна быть страница, которая используется в 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('/\'/', '’', $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, а также в настольных браузерах. Повеселись!