Как написать условие для использование методов carousel Bootstrap?

Question

[Streetfox8]

Здравствуйте! Есть блок с фоном, внутри которого карусель с 4-мя картинками, они сами автоматически переходят вперед с интервалом и так по кругу, как сделать чтобы при переходе на каждую следующую картинку менять фон главного блока. Подскажите как сделать с помощью jquery, смог написать только при клике на индикатор data-slide-to а нужно чтобы автоматически при смене картинки в карусели.
Заранее спасибо.

Comments

[Streetfox8]

Вот так выглядит но это при клике, а нужно чтобы само по себе

$("ol.carousel-indicators li").click(function(){
		var choose = $(this).attr("data-slide-to");
		if(choose == 0) {
			$('#otzyv').css("background","url(адрес картинки");
		}
		else {
			$('#otzyv').css("background","url(адрес картинки)no-repeat");
		}
	});

[OVK2015]

Отлавливать событие change карусели. Какая версия совы?

[Streetfox8]

OVK2015: jquery/1.11.3

[Streetfox8]

OVK2015: как это сделать? можете код написать тут должно быть не много

[OVK2015]

Streetfox8:
сова,- это owl-carousel. Какой версией карусели пользуетесь?

[Streetfox8]

OVK2015: честно говоря не знаю. getbootstrap.com/javascript/#carousel эту вставил

[OVK2015]

Streetfox8:
Сам файл js откройте,- они вверху обычно версию пишут. Спрашиваю,- потому что от версии к версии методы по разному у них вызываются

[OVK2015]

Streetfox8: Сорри! Ошибся я. У вас bootstrap`ская карусель.

[Streetfox8]

OVK2015: не знаете как тут можно отследить перемещение слайда и поставить определенный фон?

[OVK2015]

Streetfox8: Там прямо на странице пример
This event fires immediately when the slide instance method is invoked.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

[Streetfox8]

OVK2015: все равно не могу понять как это сделать. Можете помочь пожалуйста. методом тыка не получается

[OVK2015]

Streetfox8: В живую страница есть где-нибудь?

[Streetfox8]

OVK2015: вот спасибо. Да harmony-maker.ru блок отзывы

[Streetfox8]

Streetfox8: при клике по индификаторам все работает.

[Streetfox8]

Streetfox8: или как узнать id текущего слайдера и от этого уже плесать.

[Streetfox8]

OVK2015: или как узнать id текущего слайдера и от этого уже плесать.

[OVK2015]

Streetfox8:
Пробуйте:

$('#carousel-example-generic').on('slid.bs.carousel', function(event)
{ 
    $(event.currentTarget).find('.carousel-inner .item .right_otzyv').css({'background-color': ''});
    $(event.currentTarget).find('.carousel-inner .item.active .right_otzyv').css({'background-color': 'green'});
});

[Streetfox8]

OVK2015: хитрая конструкция) да зеленый бэкграунд появляется. А как менять задний фон? где женщина на лавочке сидит

[Streetfox8]

OVK2015: получается у блока #otzyv

[OVK2015]

Streetfox8: Ольга, Ксения, Надежда, Дарья. Чего-то я там не одну из них на лавочке не наблюдаю. Задний фон это что?
$(event.currentTarget).find('.carousel-inner .item').children().css({'background-color': ''});
$(event.currentTarget).find('.carousel-inner .item.active').children().css({'background-color': 'green'});
Но, там слева тогда слегка коряво заливка выходит. Нету общего прямоугольника для правого и левого отзыва. Оберните их в еще какой-нибудь div и делайте с его фоном чего хотите

[Streetfox8]

OVK2015: Смотрите у Ольги на заднем плане сидит женщина в куртке, при переключении на Ксению фон должен меняться на другую картинку. Щас это происходит только при клике по индикаторам. и так далее по остальным отзывам

[Streetfox8]

OVK2015: вы почти все правильно сделали. нужно дойти до и у него уже менять фон, как с помощью children() добраться до него

[OVK2015]

Streetfox8: Так вся карусель внутри #otzyv лежит. Смысл вопроса тогда теряется вообще

[Streetfox8]

OVK2015: вот такая задача. менять фон у #otzyv в зависимости от Ольги, Дарьи и тд

[OVK2015]

Streetfox8: А! Я кажется понял. Вам при сменен эл-та карусели надо просто изменить background-image для #otzyv? В смысле по событию менять?

[OVK2015]

Streetfox8: Для каждой из них фоновая картинка будет своя? Т.е. вам нужно точно знать какая из барышень щас отображается? Тогда добавляйте какой нибудь data-* аттрибут к левому или правому отзыву. При срабатывании события,- получаете его значение,- выводите нужную картинку

[Streetfox8]

да да совершенно верно! нужно менятьbackground-image для #otzyv в зависимости от барышни, для каждой свой фон-картинка

[OVK2015]

Streetfox8: У этой bootstrap`ской каруселе в event индекс текущего активного слайда не передается почему-то. И св-ва такого у нее не нашел.
Как такое сделать выше написал

Answer 1

[ShinShil]

Пример кода стоит добавлять в вопрос. Рядом с вопросом в правом нижнем углу есть многоточие. Если на него нажать можно выбрать редактирование.

Ответ: Bootstrap карусель имеет события, вот пример регистрации функций на события смены слайдов.

$("#otzyv").on('slide.bs.carousel', function () {
          //вызывается перед сменой слайда
    });
    $("#otzyv").on('slid.bs.carousel', function () {
          //вызывается после смены слайда
    });

Информация отсюда
www.w3schools.com/bootstrap/bootstrap_ref_js_carou... здесь посмотрите Carousel Events
www.w3schools.com/bootstrap/tryit.asp?filename=try...