Question

如何获得每个swiper-slide元素的宽度？

这是我的代码：

<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>

Answer 1

您可以使用Jquery's eq分别选择每个元素。以下是我认为您要求的演示：

＆＃13;

$('#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() );
});

＆＃13;

.swiper-slide {
  width: 50px;
  border-style: solid;
}

＆＃13;

<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>

＆＃13;

如何获得每个滑动滑块元件的宽度

1 个答案: