javascript - 如何让幻灯片效果只向左滑动33%而不是100%？

Question

我在 codepen.io 中创建了一个基于钢笔的 slider ，将其放在我的网站上以供客户评价，我想更改其中的幻灯片效果，使其仅向左滑动 33%，而不是向左滑动 100% % 这样当有人点击“下一步”按钮时它只显示一个新的观点。有可能吗？我该怎么做？这是 slider 的代码:

    $(document).ready(function(){
	var slide = $(".slide");
	var viewWidth = $(window).width();
	var sliderInner = $(".slider-inner");
	var childrenNo = sliderInner.children().length;
	
	sliderInner.width( viewWidth * childrenNo );
	
	$(window).resize(function(){
		viewWidth = $(window).width();
	});
	
	function setWidth(){
		slide.each(function(){
			$(this).width(viewWidth);
			$(this).css("left", viewWidth * $(this).index());
		});	
	}
	
	function setActive(element){
		var clickedIndex = element.index();
		
		$(".slider-nav .active").removeClass("active");
		element.addClass("active");
		
		sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
		
		$(".slider-inner .active").removeClass("active");
		$(".slider-inner .slide").eq(clickedIndex).addClass("active");
	}
	
	setWidth();
	
	$(".slider-nav > div").on("click", function(){
		setActive($(this));
	});
	
	$(window).resize(function(){
		setWidth();
	});
	
	setTimeout(function(){
		$(".slider").fadeIn(500);
	}, 2000);
    });

    * {
     box-sizing: border-box;
     padding: 0;
     margin: 0;
    }

    body {
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
    }

    .nav {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9;
      padding: 40px;
      color: white;
    }
    .nav h1 {
      font-weight: 300;
      font-size: 3rem;
    }
    .nav .author {
      text-align: right;
    }

    .loading {
      background-color: #2ecc71;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      height: 600px;
      line-height: 600px;
      text-align: center;
      color: white;
      font-size: 2rem;
    }

    .slider {
      background-color: white;
      position: relative;
      width: 100%;
      height: 600px;
      overflow: hidden;
      display: none;
    }

    .slider-inner {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      -webkit-transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
          transition-timing-function: cubic-bezier(0.22, 1.61, 0.65, 1);
      -webkit-transition-duration: 1s;
          transition-duration: 1s;
      background-visibility: hidden;
      -webkit-transition-delay: .75s;
          transition-delay: .75s;
      -webkit-transform: translateZ(0);
          transform: translateZ(0);
    }

    .slide {
      position: absolute;
      top: 0;
      height: 100%;
      background-color: #f1c40f;
      background-visibility: hidden;
      -webkit-transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
          transition-timing-function: cubic-bezier(0.25, 0.5, 0.25, 1.25);
      -webkit-transform: translateZ(0) scale(0.8, 0.8);
          transform: translateZ(0) scale(0.8, 0.8);
      -webkit-transition-duration: .5s;
          transition-duration: .5s;
      text-align: center;
      line-height: 600px;
      font-size: 5rem;
      color: white;
    }
    .slide.active {
      -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
      -webkit-transition-delay: 2s;
          transition-delay: 2s;
    }
    .slide:nth-child(2n) {
      background-color: #2ecc71;
    }
    .slide:nth-child(3n) {
      background-color: #3498db;
    }
    .slide:nth-child(4n) {
      background-color: #9b50ba;
    }

    .slider-nav {
      position: absolute;
      bottom: 0;
      left: 50%;
      -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
      padding: 20px;
      text-align: center;
    }
    .slider-nav > div {
      float: left;
      width: 10px;
      height: 10px;
      border: 1px solid white;
      z-index: 2;
      display: inline-block;
      margin: 0 10px;
      cursor: pointer;
      border-radius: 50%;
      opacity: .5;
      -webkit-transition-duration: .25s;
          transition-duration: .25s;
      background-color: transparent;
    }
    .slider-nav > div:hover {
      opacity: 1;
    }
    .slider-nav > div.active {
      background-color: white;
      -webkit-transform: scale(2);
          transform: scale(2);
      opacity: 1;
    }

<div class="slider">
	<div class="slider-inner">
		<div class="slide active">1</div>
		<div class="slide">2</div>
		<div class="slide">3</div>
		<div class="slide">4</div>
		<div class="slide">5</div>
		<div class="slide">6</div>
		<div class="slide">7</div>
		<div class="slide">8</div>
	</div>
	
	<nav class="slider-nav">
		<div class="active"></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</nav>
    </div>

Answer 1

您可以获得 33% 的 viewWidth，并且应该这样做。

sliderInner.css("transform", "translateX(-" + clickedIndex * (viewWidth * 0.33) + "px) translateZ(0)");