04.07.2017, 10:12
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
owlCarousel css для центрального блока
sergey24,
вариант без индекса
центральный блок красный, css строка 42
<!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;
}
.red .item{
background-color: #FF0000;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
$(".owl-carousel").owlCarousel({ loop: true,
startPosition: -1,
items: 3,
nav: true,
navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
dots: false
}).on("translated.owl.carousel", setCls);
function setCls() {
$(".owl-item").removeClass("red").filter(".active").eq(1).addClass("red")
}
setCls()
});
</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>
Последний раз редактировалось рони, 04.07.2017 в 14:47.
|
|
04.07.2017, 10:13
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
|
количество блоков всегда разное(клоны слева и справа про запас) , api говорит показываю блок 1 , а по порядку блок в этот момент или 3 или 7
|
|
Сообщение от рони
|
|
есть!!! всегда можно отследить какой блок показывается и вывести именно для него например описание
|
Три элемента в отображении:
Если верить первому утверждению, то индекс в данном случае бесполезен, как он будет бесполезен и для второго утверждения.
Если верить второму утверждению, то нет проблем, при этом не важно сколько слайдеров в отображении. То есть то, что первое в блоке, это текущий индекс. Кроме этого есть информация и о страницах, включая и о текущей, не думаю что этого мало и надо шарить фильтром по классу среди всех элементов. |
|
04.07.2017, 10:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Owl Carousel центральный блок и event.item.index
laimas,
ок! не очень понимаю ваши обьяснения, но был неправ,
event.item.index использовать можно.
<!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;
}
.red .item{
background-color: #FF0000;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
$(".owl-carousel").owlCarousel({
items: 3,
nav: true,
navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
dots: false
}).on("translated.owl.carousel", setCls);
function setCls(event) {
var num = event && event.item ? event.item.index + 1 : 1 ;
$(".owl-item").removeClass("red").eq(num).addClass("red")
}
setCls()
});
</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>
|
|
04.07.2017, 10:32
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
|
не очень понимаю ваши обьяснения
|
тем не менее это то, о чем я так долго говорил. )
Следующий шаг - все это фигня, на повестке дня стоит слайдер, в котором, при изменении, активный слайд рассыпается на частицы спадающие вниз или рассыпается на частицы сторона противоположная движению с постепенным размытием, аки хвост за кометой. Пока идею не запатентовал можно предлагать решения, если конечно комп от такого слайдера не скиснет.  |
|
04.07.2017, 10:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от laimas
|
|
Следующий шаг - все это фигня, на повестке дня стоит слайдер, в котором, при изменении, активный слайд рассыпается на частицы спадающие вниз
|
пойду поищу на форуме у рони где-то было  |
|
04.07.2017, 10:40
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от рони
|
|
пойду поищу на форуме
|
уже готово!!! Блин, думал патент продать да самолет купить, опоздал. |
|
04.07.2017, 10:44
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
рони,
кстати, надо обрабатывать событие начала трансляции, убирая класс у активного слайда, иначе "моргает", не кажется?
|
|
04.07.2017, 10:45
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
слайдер падающие блоки
|
Сообщение от laimas
|
|
на повестке дня стоит слайдер, в котором, при изменении, активный слайд рассыпается на частицы спадающие вниз
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#slider{
position: relative;
width: 500px;
height: 300px;
background-color: #000000;
margin: 0;
padding: 0;
overflow: hidden;
}
#slider div{
margin: 0;
padding: 0;
position: absolute;
background-color: #0000FF;
background-repeat: no-repeat;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<script>
$(function() {
var slider = $("#slider");
var height = slider.height();
var width = slider.width();
function load_img(next, src, x, y) {
var w = width / x | 0;
var h = height / y | 0;
slider.height(height = h * y);
slider.width(width = w * x);
slider.css({
backgroundSize: width + "px " + height + "px",
backgroundImage: "url(" + next + ")"
});
var n = 0,
arr = Array(x * y);
$.each(arr, function(i, el) {
!n && y--;
arr[i] = $("<div>", {
css: {
left: n * w,
top: y * h,
width: w,
height: h,
backgroundImage: "url(" + src + ")",
backgroundPosition: -n * w + "px " + -y * h + "px",
backgroundSize: width + "px " +
height + "px"
}
}).prependTo(slider);
n = ++n % x
});
return arr
}
function show(arr) {
$.when.apply(null, arr.map(function(el) {
var time = Math.floor(Math.random() * 1000+800);
return el.css({
"z-index": 100
}).delay(time).animate({
top: height
}, {
easing: "easeOutCirc",
duration: 1200})
})
).done(function() {
arr.forEach( function(el) {
el.remove()
});
setTimeout(go, 1000);
});
}
var arrSrc = ["http://wallpapershome.ru/images/pages/pic_h/7086.jpg", "http://wallpapershome.ru/images/pages/pic_h/8983.jpg", "http://www.kinomania.ru/images/wallpapers_film/w1920x1080_15585.jpg"];
function preload(arr,foo)
{ var count = 0;
function l() {
if(++count == arr.length) foo();
}
return arr.map(function(src) {
var img = new Image();
img.onload = l;
img.src = src;
return img
})
}
function go() {
var arr = load_img(arrSrc[1].src, arrSrc[0].src, 25, 15);
show(arr);
arrSrc.push(arrSrc.shift());
}
arrSrc = preload(arrSrc,go);
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
|
|
04.07.2017, 10:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от laimas
|
|
кстати, надо обрабатывать событие начала трансляции, убирая класс у активного слайда, иначе "моргает", не кажется?
|
что за кнопка у ТС неизвестно, display:block может моргать не будет. |
|
04.07.2017, 10:53
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
рони,
все таки есть надежда прикупить самолет.  Это не частицы, физика частиц, это иное. Хотя, например, в 3D моделировании частицей может быть и объект. Я имел ввиду элементарные частицы, вплоть до пикселя. Неужто не наблюдали как комета рассыпается?
А это просто эффект, но тормоза уже наблюдаются. 
|
|
|
|
