Owl Carousel прокрутку по n элементов даже если слайдов меньше n
Здравствуйте!
Есть слайдер со slideBy:5, количество слайдов переодически меняется, то кратно 5, то не кратно. Если не кратно, то последние слайды не отображаются вообще - прокрутка если нет 5 слайдов (допустим, 4) не срабатывает. Подскажите, как можно реализовать прокрутку всех слайдов даже если их количество не кратно 5? |
FirstFrost,
loop : true, если не поможет делайте макет |
loop : true, к сожалению, не помогло.
Уточните, что Вы имеете ввиду под макетом? |
FirstFrost,
ниже это макет... нужен примерно такой же минимальный,но с вашей проблемой
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.css" />
<style type="text/css">
.owl-carousel .item {
height: 10rem;
background-color: #4DC7A0;
padding: 1rem;
position:relative;
}
.owl-carousel .owl-prev{
position:absolute;
top:0; left:0;
display:block;
height:99%;
width:90px;
background-color: #FF00FF;
}
.owl-carousel .owl-next{
position:absolute;
top:0; right:0;
display:block;
height:99%;
width:90px;
background-color: #FF00FF;
}
.prev:after, .next:after{
content: attr(class);
}
.prev,.next{
display: inline-block;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
$(".owl-carousel").owlCarousel({ slideBy:5, loop : true, startPosition: -1,
items: 6,
nav: true,
navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
dots: false
})
});
</script>
</head>
<body>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
</body>
</html>
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<style>
.cats {
display: table;
width: 100%;
}
.cats .owl-carousel_wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.cats .owl-carousel_wrapper>#slider {
width: 100%;
position: relative;
z-index: 1;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer {
overflow: hidden;
position: relative;
width: 100%;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item {
float: left;
overflow: hidden;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item {
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item span {
display: block;
text-align: center;
}
.owl-dots {
display: none;
}
</style>
</head>
<body>
<div class="cats">
<div class="owl-carousel_wrapper">
<div class="owl-carousel_cats owl-theme main" id="slider">
<div class="item">
<span>1</span>
</div>
<div class="item">
<span>2</span>
</div>
<div class="item">
<span>3</span>
</div>
<div class="item">
<span>4</span>
</div>
<div class="item">
<span>5</span>
</div>
<div class="item">
<span>6</span>
</div>
<div class="item">
<span>7</span>
</div>
<div class="item">
<span>8</span>
</div>
<div class="item">
<span>9</span>
</div>
<div class="item">
<span>10</span>
</div>
<div class="item">
<span>11</span>
</div>
<div class="item">
<span>12</span>
</div>
<div class="item">
<span>13</span>
</div>
<div class="item">
<span>14</span>
</div>
</div>
</div>
</div>
<script>
var owl2 = $(".owl-carousel_cats");
owl2.owlCarousel({
navigation : false,
singleItem : true,
loop : true,
responsive:{
0:{
items:2,
slideBy:2,
nav:true
},
520:{
items:3,
slideBy:3,
nav:false
},
680:{
items:4,
slideBy:4,
nav:false
},
980:{
items:5,
nav:true,
slideBy:5,
loop:false
},
1200:{
items:5,
slideBy:5,
nav:false,
loop:false
}
},
transitionStyle : "fade",
autoplay: false,
autoplayTimeout: 4000,
autoplayHoverPause: true,
rewind: true,
navText: ["",""]
});
</script>
</body>
</html>
|
Цитата:
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<style>
.cats {
display: table;
width: 100%;
}
.cats .owl-carousel_wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.cats .owl-carousel_wrapper>#slider {
width: 100%;
position: relative;
z-index: 1;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer {
overflow: hidden;
position: relative;
width: 100%;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item {
float: left;
overflow: hidden;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item {
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item span {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="cats">
<div class="owl-carousel_wrapper">
<div class="owl-carousel_cats owl-theme main" id="slider">
<div class="item">
<span>1</span>
</div>
<div class="item">
<span>2</span>
</div>
<div class="item">
<span>3</span>
</div>
<div class="item">
<span>4</span>
</div>
<div class="item">
<span>5</span>
</div>
<div class="item">
<span>6</span>
</div>
<div class="item">
<span>7</span>
</div>
<div class="item">
<span>8</span>
</div>
<div class="item">
<span>9</span>
</div>
<div class="item">
<span>10</span>
</div>
<div class="item">
<span>11</span>
</div>
<div class="item">
<span>12</span>
</div>
<div class="item">
<span>13</span>
</div>
<div class="item">
<span>14</span>
</div>
</div>
</div>
</div>
<script>
$(window).on("load", function() {
var owl2 = $(".owl-carousel_cats");
owl2.owlCarousel({
navigation : false,
singleItem : true,
loop : true,
responsive:{
0:{
items:2,
slideBy:2,
nav:true
},
520:{
items:3,
slideBy:3,
nav:false
},
680:{
items:4,
slideBy:4,
nav:false
},
980:{
items:5,
nav:true,
slideBy:5
},
1200:{
items:5,
slideBy:5,
nav:false
}
},
transitionStyle : "fade",
autoplay: false,
autoplayTimeout: 4000,
autoplayHoverPause: true,
rewind: true,
navText: ["",""],
dots: false
});
})
</script>
</body>
</html>
|
Благодарю!
|
Если в слайдере 1 элемент, то он дублируется много раз. Это не подходит. Посоветуйте, как можно реализовать корректное отображение всех слайдов при прокрутке по n-элементов, не зависимо от количества слайдов?
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<style>
.cats {
display: table;
width: 100%;
}
.cats .owl-carousel_wrapper {
width: 100%;
display: table;
table-layout: fixed;
}
.cats .owl-carousel_wrapper>#slider {
width: 100%;
position: relative;
z-index: 1;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer {
overflow: hidden;
position: relative;
width: 100%;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item {
float: left;
overflow: hidden;
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item {
}
.cats .owl-carousel_wrapper>#slider .owl-stage-outer .owl-item .item span {
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="cats">
<div class="owl-carousel_wrapper">
<div class="owl-carousel_cats owl-theme main" id="slider">
<div class="item">
<span>1</span>
</div>
</div>
</div>
</div>
<script>
$(window).on("load", function() {
var owl2 = $(".owl-carousel_cats");
owl2.owlCarousel({
navigation : false,
singleItem : true,
loop : true,
responsive:{
0:{
items:2,
slideBy:2,
nav:true
},
520:{
items:3,
slideBy:3,
nav:false
},
680:{
items:4,
slideBy:4,
nav:false
},
980:{
items:5,
nav:true,
slideBy:5
},
1200:{
items:5,
slideBy:5,
nav:false
}
},
transitionStyle : "fade",
autoplay: false,
autoplayTimeout: 4000,
autoplayHoverPause: true,
rewind: true,
navText: ["",""],
dots: false
});
})
</script>
</body>
</html>
|
FirstFrost,
убрать везде slideBy и loop |
FirstFrost,
если делать по стандарту листает нормально ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.css" />
<style type="text/css">
.owl-carousel .item {
height: 10rem;
background-color: #FFFACD;
padding: 1rem;
position:relative;
border-right: 1px solid #FF1493;
}
.owl-carousel .owl-prev{
position:absolute;
top:0; left:0;
display:block;
height:99%;
width:90px;
background-color: transparent;
}
.owl-carousel .owl-next{
position:absolute;
top:0; right:0;
display:block;
height:99%;
width:130px;
background-color: transparent;
text-align: right;
}
.owl-carousel .owl-prev img{
height: 98%;
margin-left: -8px;
opacity: .1;
transition: .3s
}
.owl-carousel .owl-next img{
height: 98%;
transform: rotateY(180deg);
margin-right: -8px;
opacity: .1;
transition: .3s;
}
.owl-carousel .owl-prev:hover img{
opacity: 1;
}
.owl-carousel .owl-next:hover img{
opacity: 1;
}
.owl-carousel .owl-next.disabled img{
opacity: 0;
}
.owl-carousel .owl-prev.disabled img{
opacity: 0;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
$(".owl-carousel").owlCarousel({
slideBy:5,
items: 5,
nav: true,
navText: ['<img src="http://aquantis.org/images/MenuSymbols/back2.png" alt="" />', '<img src="http://aquantis.org/images/MenuSymbols/back2.png" alt="" />'],
dots: false,
responsive:{
0:{
items:2,
slideBy:2
},
520:{
items:3,
slideBy:3
},
680:{
items:4,
slideBy:4
},
980:{
items:5,
slideBy:5
},
1200:{
items:5,
slideBy:5
}
}
})
});
</script>
</head>
<body>
<div class="owl-carousel">
<div class="item">
<span>1</span>
</div>
<div class="item">
<span>2</span>
</div>
<div class="item">
<span>3</span>
</div>
<div class="item">
<span>4</span>
</div>
<div class="item">
<span>5</span>
</div>
<div class="item">
<span>6</span>
</div>
<div class="item">
<span>7</span>
</div>
<div class="item">
<span>8</span>
</div>
<div class="item">
<span>9</span>
</div>
<div class="item">
<span>10</span>
</div>
<div class="item">
<span>11</span>
</div>
<div class="item">
<span>12</span>
</div>
<div class="item">
<span>13</span>
</div>
<div class="item">
<span>14</span>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 14:07. |