Owl Carousel afterMove.callback. как реализовать?

Question

[OldSchoolWeb]

Есть слайдер на сове

как можно реализовать afterMove функцию, чтобы он заменял 'заказать модный костюм' на 'заказать классический костюм' при смене на след. слайдер в блоке заказа. Никак не могу понять. На стелках и самой меню стоят тригеры на смены слайдеров

<div class="window1_slider-menu--wrapper">
					<div class="window1_slider-menu--titles"><h3>Модный костюм</h3></div>
					<div class="window1_slider-menu--navigation"><ul>
						<li><a class="owl_goTo-1">Зауженный крой</a></li>
						<li><a class="owl_goTo-2">Классический крой</a></li>
						<li><a class="owl_goTo-3">Свободный крой</a></li>
					</ul></div>
				</div>
<a class="owl_arrow-prev"></a>
				<div id="owl_scw1" class="window1_slider-container owl-carousel">
					<div class="item">
						<div class="col-md-4 col-sm-6"><div class="cloth_1"></div></div>
						<div class="col-md-3 col-sm-6"><div class="cloth_2"></div></div>
					</div>
					<div class="item">
						<div class="col-md-4 col-sm-6"><div class="cloth_1"></div></div>
						<div class="col-md-3 col-sm-6"><div class="cloth_2"></div></div>
					</div>
					<div class="item">
						<div class="col-md-4 col-sm-6"><div class="cloth_1"></div></div>
						<div class="col-md-3 col-sm-6"><div class="cloth_2"></div></div>
					</div>
	</div>
<a class="owl_arrow-next"></a>
</div>
<!-- Callback -->
<div class="col-md-5 col-sm-12">
	<div class="owl_callback-wrapper">
		<div class="callback_header-information">
			<h4>Заказать модный костюм</h4>
			<p>Данные заказа:</p>
			<form action="GET">
				<input type="text" placeholder="Имя и Фамилия" required><input type="tel" placeholder="Телефон" required>
			</form>
		</div>

		<div class="callback_middle-content">
		<p>Дополнительно к заказу можно сшить: сорочку, жилет и галстук</p>
		<img src="img/selling_clother1.png" class="callback-images-1" alt="Картинка">
		<img src="img/selling_clother2.png" class="callback-images-2" alt="Картинка">
		</div>

		<div class="callback_bottom-links"><a href="#">Заказать звонок<span></span> портного</a></div>
<!-- Callback -->

var owl_1 = $('#owl_scw1');
    owl_1.owlCarousel({
      singleItem: true,
      pagination: false,
      slideSpeed: 500,
      navElement: '.window1_slider-menu--navigation',
      NavContainer: '.window1_slider-menu--navigation',
    });
    // Go To Slide & Arrows Bind
  $('.owl_arrow-prev').click(function(){
    owl_1.trigger('owl.prev');
  })
  $('.owl_arrow-next').click(function(){
    owl_1.trigger('owl.next');
  })
  $('.owl_goTo-1').click(function(){
    owl_1.trigger('owl.goTo', 0);
  })
  $('.owl_goTo-2').click(function(){
    owl_1.trigger('owl.goTo', 1);
  })
  $('.owl_goTo-3').click(function(){
    owl_1.trigger('owl.goTo', 2);
  })

Answer 1

[axeax]

owl_1.owlCarousel({
      singleItem: true,
      pagination: false,
      slideSpeed: 500,
      navElement: '.window1_slider-menu--navigation',
      NavContainer: '.window1_slider-menu--navigation',
      onTranslated: funсtion(ob){
            // будет выполнено после завершения анимации
      }
    });

Comments

[OldSchoolWeb]

А можно нативный код как заменить текст в самом блоке?

[axeax]

$('.callback_header-information h4').html("Заказать классический костюм"); только задачу не пойму. После любого переключения текст изменится, а дальше что?

[OldSchoolWeb]

axeax: Если активен слайд с Модным крой, то в блоке модный костюм будем написан, если активен слайд с классическим кроем, то классический крой, если активен последний слайд свободного кроя, то свободный костюм будет написано в блоке

[axeax]

ну и пишите $('.callback_header-information h4').html("Заказать *нужное слово* костюм"); после owl_1.trigger('owl.goTo', *);

[OldSchoolWeb]

axeax: так нужно на стрелки повесить. Не знаю как реализовать именно через стрелки, чтобы он находил какой сейчас слайд открыл и вставлять нужное слово

[axeax]

В куске function(ob)... в ob есть номер текущего слайда, выведите в консоль и посмотрите как там свойство называется