使用倾斜容器创建滑块时遇到问题

Question

我正在尝试创建一个滑块，其中幻灯片有倾斜的容器。但是，由于转型，我很难让数学正常工作。问题似乎是使用outerWidth我仍然可以获得100px的幻灯片宽度，但是对于偏斜，实际宽度更像是112px。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;