javascript - How can I make the slide effect only slide 33% instead of 100% to the left? -

i've created slider based on pen in codepen.io put on website customer's testimonials , want change slide effect in slides 33% left instead of 100% when clicks "next" button shows new opinion. possible do? , how can it? here slider's code:

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

you can 33% of viewwidth, , should it.

sliderinner.css("transform", "translatex(-" + clickedindex * (viewwidth * 0.33) + "px) translatez(0)");