0

Есть слайдер

$(document).ready(function() {
  $('.right').click(function() {
    let arr = [];
    $('.carousel').on('slid.bs.carousel', function() {
      curSlide = $('.active');
      arr.push(curSlide[0].classList[1]);
    });
    console.log(arr);
  });
});
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner" role="listbox">
    <div class="item image11 active">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/9-700x700.jpg">
      <div class="title-slider">test7</div>
    </div>
    <div class="item image10">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/7-700x700.jpg">
      <div class="title-slider">test6</div>
    </div>
    <div class="item image9">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/8-700x700.jpg">
      <div class="title-slider">test5</div>
    </div>
    <div class="item image8">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/3-700x700.jpg">
      <div class="title-slider">test4</div>
    </div>
    <div class="item image7">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/1-700x700.jpg">
      <div class="title-slider">test3</div>
    </div>
    <div class="item image6">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/2-700x700.jpg">
      <div class="title-slider">test2</div>
    </div>
  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

получаю введите сюда описание изображения

как его обработать не могу понять, подскажите как мне получить image10

1 ответ 1

2

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

$(document).ready(function() {

  $('#myCarousel').on('slide.bs.carousel', function(e) {
    let res = e.relatedTarget.classList[1];
    console.log(res);
  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
  <div class="carousel-inner" role="listbox">
    <div class="item image11 active">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/9-700x700.jpg">
      <div class="title-slider">test7</div>
    </div>
    <div class="item image10">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/7-700x700.jpg">
      <div class="title-slider">test6</div>
    </div>
    <div class="item image9">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/8-700x700.jpg">
      <div class="title-slider">test5</div>
    </div>
    <div class="item image8">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/3-700x700.jpg">
      <div class="title-slider">test4</div>
    </div>
    <div class="item image7">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/1-700x700.jpg">
      <div class="title-slider">test3</div>
    </div>
    <div class="item image6">
      <img src="https://perestroyka.market/image/cache/catalog/_1_%D0%93%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F/2-700x700.jpg">
      <div class="title-slider">test2</div>
    </div>
  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

10
  • Спасибо что отписались, я наверно не корректно объяснил, $('.carousel').on('slid.bs.carousel', function() { это bootsrap slider, и он отдает переключенный активный класс, ваш код отдает активный класс передушивший, а мне нужен класс активный который уже перелистнулась картинка
    – Sender1050
    5 янв 2022 в 10:15
  • @Sender1050 А массив вы зачем тогда прописали? Я думал, вы там хотите сохранять все пролистанные слайды.
    – Pilaton
    5 янв 2022 в 10:17
  • мне нужно получить только один активный класс, я его могу получить внутри это конструкции $('.carousel').on('slid.bs.carousel', function() { но проблема в том что когда перелистываешь несколько слайдов то он мне отдает несколько ответов и получается что я несколько запросов делаю на сервер, и чем больше я перелистываю тем больше одинаковых ответов мне дает
    – Sender1050
    5 янв 2022 в 10:40
  • i.imgur.com/hU1mujE.png это я два раза прокрутил слайд
    – Sender1050
    5 янв 2022 в 10:41
  • это уже от безысходности пробую разные варианты как передать этот класс за приделы этой конструкции
    – Sender1050
    5 янв 2022 в 10:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.