0
Ich habe einen Schieberegler basierend auf einem Stift in copepen.io erstellt, um meine Website für die Testimonials des Kunden zu setzen, und ich möchte den Folie-Effekt darin ändern, so dass es nur 33% nach links anstelle von 100% gleitet Wenn jemand auf den "Weiter" -Button klickt, wird nur eine neue Meinung angezeigt. Ist es möglich zu tun? Und wie kann ich es tun? Hier ist der Code des Schiebers:Wie kann ich den Schieberegler-Effekt nur um 33% statt um 100% nach links schieben lassen?
$(document).ready(function(){
\t var slide = $(".slide");
\t var viewWidth = $(window).width();
\t var sliderInner = $(".slider-inner");
\t var childrenNo = sliderInner.children().length;
\t
\t sliderInner.width(viewWidth * childrenNo);
\t
\t $(window).resize(function(){
\t \t viewWidth = $(window).width();
\t });
\t
\t function setWidth(){
\t \t slide.each(function(){
\t \t \t $(this).width(viewWidth);
\t \t \t $(this).css("left", viewWidth * $(this).index());
\t \t }); \t
\t }
\t
\t function setActive(element){
\t \t var clickedIndex = element.index();
\t \t
\t \t $(".slider-nav .active").removeClass("active");
\t \t element.addClass("active");
\t \t
\t \t sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)");
\t \t
\t \t $(".slider-inner .active").removeClass("active");
\t \t $(".slider-inner .slide").eq(clickedIndex).addClass("active");
\t }
\t
\t setWidth();
\t
\t $(".slider-nav > div").on("click", function(){
\t \t setActive($(this));
\t });
\t
\t $(window).resize(function(){
\t \t setWidth();
\t });
\t
\t setTimeout(function(){
\t \t $(".slider").fadeIn(500);
\t }, 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">
\t <div class="slider-inner">
\t \t <div class="slide active">1</div>
\t \t <div class="slide">2</div>
\t \t <div class="slide">3</div>
\t \t <div class="slide">4</div>
\t \t <div class="slide">5</div>
\t \t <div class="slide">6</div>
\t \t <div class="slide">7</div>
\t \t <div class="slide">8</div>
\t </div>
\t
\t <nav class="slider-nav">
\t \t <div class="active"></div>
\t \t <div></div>
\t \t <div></div>
\t \t <div></div>
\t \t <div></div>
\t \t <div></div>
\t \t <div></div>
\t \t <div></div>
\t </nav>
</div>