jquery - 使用倾斜的容器创建滑块时出现问题

我正在尝试创建一个滑块，其中幻灯片倾斜了容器。但是，由于这种转换，我很难让数学正确运行。问题似乎是，使用outerWidth，我仍然获得100px的幻灯片宽度，但是随着倾斜，实际宽度更像是112px。

$(function() {

  var sliderInnerPos = $('.slider-inner').position().left;
  var slideWidth = $('.slide').outerWidth();

  console.log(slideWidth);

  $('.slider-nav span').click(function() {
    if($(this).hasClass('left')) {
      sliderInnerPos += slideWidth;
    } else {
      sliderInnerPos -= slideWidth;
    }

    $('.slider-inner').css('left', sliderInnerPos);
  });
});

.slide-container {
  width:400px;
  overflow:hidden;
}

.slider-inner {
  min-width:3000px;
  position:relative;
  left:18px;
  -webkit-transition:all .5s;
          transition:all .5s;
}

.slide {
  width:100px;
  height:100px;
  background:black;
  float:left;
  margin-left:30px;
  -webkit-transform:skewX(7deg);
          transform:skewX(7deg);
}
  .slide:first-child {
    margin-left:0;
  }
.slider-nav {
  width:400px;
  margin-top:20px;
}
.slider-nav > span {
  display:inline-block;
  width:50%;
  text-align:center;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  margin-left:-4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-container">
  <div class="slider-inner">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>
</div>

<div class="slider-nav">
  <span class="left"><</span>
  <span class="right">></span>
</div>

最佳答案

这不是歪斜，而是左边距。只需添加30px或计算最后一个元素（而不是第一个元素的externalWidth），因为您从第一个元素去除了边距。您可以将true作为.outerWidth()的第一个参数传递，以在宽度计算中包括边距。

$(function() {

  var sliderInnerPos = $('.slider-inner').position().left;
  var slideWidth = 30 + $('.slide').outerWidth(); // first option, manually add +30px to accommodate for margin
  var slideWidth = $('.slide:last').outerWidth(true); // second option, get outer width including margin of last .slide

  console.log(slideWidth);

  $('.slider-nav span').click(function() {
    if($(this).hasClass('left')) {
      sliderInnerPos += slideWidth;
    } else {
      sliderInnerPos -= slideWidth;
    }

    $('.slider-inner').css('left', sliderInnerPos);
  });
});

.slide-container {
  width:400px;
  overflow:hidden;
}

.slider-inner {
  min-width:3000px;
  position:relative;
  left:18px;
  -webkit-transition:all .5s;
          transition:all .5s;
}

.slide {
  width:100px;
  height:100px;
  background:black;
  float:left;
  margin-left:30px;
  -webkit-transform:skewX(7deg);
          transform:skewX(7deg);
}
  .slide:first-child {
    margin-left:0;
  }
.slider-nav {
  width:400px;
  margin-top:20px;
}
.slider-nav > span {
  display:inline-block;
  width:50%;
  text-align:center;
  font-size:20px;
  font-weight:bold;
  cursor:pointer;
  margin-left:-4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-container">
  <div class="slider-inner">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>
</div>

<div class="slider-nav">
  <span class="left"><</span>
  <span class="right">></span>
</div>

关于jquery - 使用倾斜的容器创建滑块时出现问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48451473/