Время чтения: 2 мин. 26 апреля 2016 в 7:16 Javascript
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

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]

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

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

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

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

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

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

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

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

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

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

Запись на бесплатный урок
Введите ваше имя, телефон и skype логин.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

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

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

Выберите программу

Промокод

Задать свой вопрос
Напишите свой вопрос. Я прочитаю его, и дам ответ в течении 15 минут.

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

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

Сообщение