Как можно получить ширину для каждого скользящего элемента

Как можно получить ширину для каждого скользящего элемента?

Это мой код:

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">First Box</div>
        <div class="swiper-slide">Second Box</div>
        <div class="swiper-slide">Third Box</div>
        <div class="swiper-slide">Forth Box</div>
    </div>
</div>
<script>
$(document).ready(function () {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        setWrapperSize: true,
        freeMode: true
    });
});
</script>

1 ответ

Решение

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

$('#changeWidth').on('click', function () {
  $('.swiper-slide').eq(0).width(65);
  $('.swiper-slide').eq(1).width(150);
  $('.swiper-slide').eq(2).width(250);
  $('.swiper-slide').eq(3).width(350);
  console.log( $('.swiper-slide').eq(0).width() );
  console.log( $('.swiper-slide').eq(1).width() );
  console.log( $('.swiper-slide').eq(2).width() );
  console.log( $('.swiper-slide').eq(3).width() );
});
.swiper-slide {
  width: 50px;
  border-style: solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">First Box</div>
    <div class="swiper-slide">Second Box</div>
    <div class="swiper-slide">Third Box</div>
    <div class="swiper-slide">Forth Box</div>
  </div>
</div>
<button id="changeWidth">
change width
</button>

Другие вопросы по тегам