Заработали в 2020 г. для наших клиентов $448765
logo

Добавляем активный пункт меню в OWL carousel

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
26 апреля 2016 в 7:16 Javascript (JS)

2016-04-26_101528

Как сделать2

[php]
$(document).ready(function() {

$(‘#slider’).on(‘initialized.owl.carousel change.owl.carousel changed.owl.carousel’, function(e) {
if (!e.namespace || e.type != ‘initialized’ && e.property.name != ‘position’) return;

var current = e.relatedTarget.current()
var items = $(this).find(‘.owl-stage’).children()
var add = e.type == ‘changed’ || e.type == ‘initialized’

items.eq(e.relatedTarget.normalize(current )).toggleClass(‘current’, add)
}).owlCarousel({
items : 2,
nav: true,
loop: true,
});
})
[/php]

[php]
#slider {
margin: 10px 0;
width: 100%;
}

#slider .owl-item {
position: relative;
}

#slider .owl-item img {
display: block;
width: 100%;
height: auto; }
#slider .owl-item.current .caja {
opacity: 100;
transition-timing-function: ease-out;
transition-duration: 600ms; }
#slider .owl-item .caja {
z-index: 9999;
opacity: 0;
position: absolute;
width: 100px;
height: 50px;
padding: 20px;
background-color: #000; }
#slider .owl-item .caja h1 {
color: #a08e5c; }
#slider .owl-item .caja p {
color: white;
font-size: 0.8em; }

[/php]

[php]
<div id="slider">
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/1.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/2.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/3.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/4.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/5.jpg"></div>
<div><div class="caja"><p>Lorem ipsum dolor sit amet.</div><img src="https://www.jomanetworks.com/6.jpg"></div>
</div>
[/php]

Похожие статьи

Оставить заявку
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Ваш вопрос:

Введите контактный E-mail: *


Остальные поля не обязательные, но помогут нам лучше понять суть вашего бизнеса и сделать предложение эффективней.

Заполнить все поля

Как с вами связаться? *

Контактный номер телефона: *

Какие услуги вас интересуют?

Прикрепить к ответу коммерческое предложение? *

В каком регионе планируете работать ?

Сколько заявок в месяц вам необходимо получать?

Средний чек за продажу товара/услуги ?

Вкратце опишите свою деятельность и причину обращения:

Представьтесь, пожалуйста:

Бюджет на реализацию


Заказать обратный звонок
Для экономии вашего времени на все звонки отвечают программисты, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *