Carrousel Transformer Rotation

Question

Comment puis-je faire pivoter un carrousel sans la première image apparaît chaque fois que nous cliquons sur "Suivant". J'ai le code suivant:

var image = 0; 

$('.next').click(function(e) { 

    image++; 
    e.stopPropagation(); 

    $("#1").animate({ borderSpacing: -45*image }, { 
    step: function(now,fx) { 
     $(this).css('-webkit-transform','rotateY('+now+'deg)'); 
     $(this).css('-moz-transform','rotateY('+now+'deg)'); 
     $(this).css('transform','rotateY('+now+'deg)'); 
    }, 
     duration:'slow' 
    },'linear'); 
}); 

Je voudrais avoir un carrousel qui tout simplement passer à l'image suivante lorsque l'on clique sur « Suivant ». Vous pouvez trouver un demo here.

Merci

Answer 1

J'ai peu de code de peu changé dans votre existant JS et ajouter une propriété css transition dans votre css.

Ajouter CSS transition: all 1s; pour augmenter ou diminuer la vitesse de rotation du carrousel. J'espère que cet extrait vous aidera.

\t var image = 0; 
 

 
\t $('.next').click(function(e) { 
 

 
\t \t image++; 
 
\t \t e.stopPropagation(); 
 

 
\t \t $("#1").animate({ borderSpacing: -45*image }, { 
 
\t \t step: function(now,fx) { 
 
\t \t \t $(this).css('-webkit-transform','rotateY('+parseInt(-45*image)+'deg)'); 
 
\t \t \t $(this).css('-moz-transform','rotateY('+parseInt(-45*image)+'deg)'); 
 
\t \t \t $(this).css('transform','rotateY('+parseInt(-45*image)+'deg)'); 
 
\t \t }, 
 
\t \t \t duration:'slow' 
 
\t \t },'linear'); 
 
\t });

#wrapper{ 
 
    width:600px; 
 
    -webkit-perspective: 800px; /* Distance du carroussel */ 
 
    perspective: 700px; /* Distance du carroussel */ 
 
    margin: 100px auto 0 auto; 
 
} 
 

 
.carrousel{ 
 
    width: 200px; /* Centrer carroussel */ 
 
    height: 200px; /* Incliner le carrousel */ 
 
    margin: 0 auto; /* Placer la carrousel */ 
 
    -webkit-transform-style: preserve-3d; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    transition: all 1s; /*Add this transition for increase or decrease rotattion speed*/ 
 
    
 
    /*-webkit-animation: Caroussel 10s infinite linear; */ 
 

 
} 
 

 
.plan{ 
 
    position:absolute; 
 
    height: 100%; /* Hauteur de l'image */ 
 
    width: 150px; /* Largeur de l'image */ 
 
    text-align:center; 
 
    font-size: 8em; 
 
    color:#FFF; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    transition: all 1s; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    overflow: hidden; 
 
} 
 

 
@-webkit-keyframes Caroussel{ 
 

 
    from { 
 
    -webkit-transform: rotateY(0); 
 
    transform: rotateY(0) 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(360deg); 
 
    transform: rotateY(360deg) 
 
    } 
 
} 
 

 

 

 
.p1{ 
 
    background-color: red; 
 
    -webkit-transform: translateZ(200px); 
 
    transform: translateZ(200px) 
 
} 
 
.p2{ 
 
    background-color: orange; 
 
    -webkit-transform: rotateY(45deg) translateZ(200px); 
 
    transform: rotateY(45deg) translateZ(200px) 
 
} 
 
.p3{ 
 
    background-color: yellow; 
 
    -webkit-transform: rotateY(90deg) translateZ(200px); 
 
    transform: rotateY(90deg) translateZ(200px); 
 
} 
 

 
.p4{ 
 
    background-color: blue; 
 
    -webkit-transform: rotateY(135deg) translateZ(200px); 
 
    transform: rotateY(135deg) translateZ(200px) 
 
} 
 
.p5{ 
 
    background-color: purple; 
 
    -webkit-transform: rotateY(180deg) translateZ(200px); 
 
    transform: rotateY(180deg) translateZ(200px) 
 
} 
 
.p6{ 
 
    background-color: brown; 
 
    -webkit-transform: rotateY(225deg) translateZ(200px); 
 
    transform: rotateY(225deg) translateZ(200px) 
 
} 
 
.p7{ 
 
    background-color: grey; 
 
    -webkit-transform: rotateY(270deg) translateZ(200px); 
 
    transform: rotateY(270deg) translateZ(200px) 
 
} 
 
.p8{ 
 
    background-color: pink; 
 
    -webkit-transform: rotateY(315deg) translateZ(200px); 
 
    transform: rotateY(315deg) translateZ(200px) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 
    <div id="1" class="carrousel"> 
 
    <figure> 
 
     <div class="plan p1"></div> 
 
     <div class="plan p2"></div> 
 
     <div class="plan p3"></div> 
 
     <div class="plan p4"></div> 
 
     <div class="plan p5"></div> 
 
     <div class="plan p6"></div> 
 
     <div class="plan p7"></div> 
 
     <div class="plan p8"></div> 
 
    </figure> 
 
    </div> 
 
    <button class="next" style="margin-bottop: 10px">Next</button> 
 
</div>

Answer 2

J'ai utilisé la transition CSS3 au lieu de Animer jquery. Et puis ajouté css au lieu d'appeler animate()

Vérifiez ce violon: https://jsfiddle.net/va964ze4/5/

Vous pouvez modifier l'effet de transition et la vitesse en CSS

transition: all 1s; 

Answer 3

Je pense que ce code est la solution à votre problème?

// HTML

<div class="item a">A</div> 

<div class="item b">B</div> 

<div class="item c">C</div> 

<div class="item d">D</div> 

<div class="item e">E</div> 

<div class="item f">F</div> 

"Ici, la div class =" next "Suivant"

« Ici, la div class = "prev" Préc. "

// CSS

corps

{

background: # 333;

rembourrage: 70px 0;

police: 15px/20px Arial, sans-serif;

}

.container {

margin: 0 auto;

largeur: 250px;

hauteur: 200px;

position: relative;

perspective: 1000px;

}

.carrousel {

hauteur: 100%;

largeur: 100%;

position: absolue;

transformation-style: preserve-3d;

transition: transform 1s;

}

.item {

display: block;

position: absolue;

arrière-plan: # 000;

largeur: 250px;

hauteur: 200px;

hauteur de ligne: 200 px;

taille de police: 5em;

text-align: center;

couleur: #FFF;

opacité: 0,95;

border-radius: 10px;

}

.a {

transform: rotateY (0deg) translateZ (250px);

arrière-plan: # ed1c24;

}

.B {

transform: rotateY (60deg) translateZ (250px);

arrière-plan: # 0072bc;

}

.c {

transform: rotateY (120 degrés) translateZ (250px);

arrière-plan: # 39b54a;

}

.d {

transform: rotateY (180 °) translateZ (250px);

arrière-plan: # f26522;

}

.e {

transformation: rotationY (240deg) translatez (250px);

arrière-plan: # 630460;

}

.F {

transform: rotateY (300deg) translateZ (250px);

arrière-plan: # 8c6239;

}

.next, .PREV {

color: # 444;

position: absolue;

en haut: 100px;

rembourrage: 1em 2em;

curseur: pointeur;

origine: #CCC;

border-radius: 5px;

bordure supérieure: 1px solide #FFF;

boîte-ombre: 0 5px 0 # 999;

transition: boîte-ombre 0.1s, haut 0.1s;

}

.next: vol stationnaire, .PREV: hover {color: # 000; }

.next: actif, .PREV: active {

top: 104px;

boîte-ombre: 0 1px 0 # 999;

}

.next {droite: 5em; }

.prev {gauche: 5em; .}

// JS

carrousel var = $ ("carrousel "),

currdeg = 0; 

$ (". Suivant ") sur (" clic", {d: " n "}, faire pivoter);

$ (". Prev"). On ("clic", {d: "p"}, rotation);

rotation de fonction

(e) {

if (e.data.d == "n") {

currdeg = currdeg - 60; 

}

if (e.data.d == "p") {

currdeg = currdeg + 60; 

}

carousel.css ({

"-webkit-transform": "rotateY("+currdeg+"deg)", 

"-moz-transform": "rotateY("+currdeg+"deg)", 

"-o-transform": "rotateY("+currdeg+"deg)", 

"transform": "rotateY("+currdeg+"deg)" 

});

}

Answer 4

J'ai ajouté aussi Précédent bouton avec bouton Suivant.

var image = 0; 
 

 
// Click Previous button 
 
$('.prev').click(function(e) { 
 
\t image--; 
 
\t e.stopPropagation(); 
 
\t $("#1").css({ 
 
    \t "borderSpacing": -45*image, 
 
    \t "transform": "rotateY("+parseInt(-45*image)+"deg)" 
 
    }); 
 
}); 
 

 
// Click Next button 
 
$('.next').click(function(e) { 
 
\t image++; 
 
\t e.stopPropagation(); 
 
\t $("#1").css({ 
 
    \t "borderSpacing": -45*image, 
 
    \t "transform": "rotateY("+parseInt(-45*image)+"deg)" 
 
    }); 
 
}); \t

#wrapper{ 
 
    width: 600px; 
 
    -webkit-perspective: 800px; /* Distance du carroussel */ 
 
    perspective: 800px; /* Distance du carroussel */ 
 
    margin: 100px auto 0 auto; 
 
} 
 

 
.carrousel{ 
 
    width: 200px; /* Centrer carroussel */ 
 
    height: 200px; /* Incliner le carrousel */ 
 
    margin: 0 auto; /* Placer la carrousel */ 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transition: all 1s; 
 
    -moz-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 

 
.plan{ 
 
    position:absolute; 
 
    height: 100%; /* Hauteur de l'image */ 
 
    width: 150px; /* Largeur de l'image */ 
 
    text-align:center; 
 
    font-size: 8em; 
 
    color:#FFF; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    overflow: hidden; 
 
} 
 

 
@-webkit-keyframes Caroussel{ 
 
    from { 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg) 
 
    } 
 
    to { 
 
    -webkit-transform: rotateY(360deg); 
 
    transform: rotateY(360deg) 
 
    } 
 
} 
 

 

 

 
.p1{ 
 
    background-color: red; 
 
    -webkit-transform: translateZ(200px); 
 
    transform: translateZ(200px) 
 
} 
 
.p2{ 
 
    background-color: orange; 
 
    -webkit-transform: rotateY(45deg) translateZ(200px); 
 
    transform: rotateY(45deg) translateZ(200px) 
 
} 
 
.p3{ 
 
    background-color: yellow; 
 
    -webkit-transform: rotateY(90deg) translateZ(200px); 
 
    transform: rotateY(90deg) translateZ(200px); 
 
} 
 

 
.p4{ 
 
    background-color: blue; 
 
    -webkit-transform: rotateY(135deg) translateZ(200px); 
 
    transform: rotateY(135deg) translateZ(200px) 
 
} 
 
.p5{ 
 
    background-color: purple; 
 
    -webkit-transform: rotateY(180deg) translateZ(200px); 
 
    transform: rotateY(180deg) translateZ(200px) 
 
} 
 
.p6{ 
 
    background-color: brown; 
 
    -webkit-transform: rotateY(225deg) translateZ(200px); 
 
    transform: rotateY(225deg) translateZ(200px) 
 
} 
 
.p7{ 
 
    background-color: grey; 
 
    -webkit-transform: rotateY(270deg) translateZ(200px); 
 
    transform: rotateY(270deg) translateZ(200px) 
 
} 
 
.p8{ 
 
    background-color: pink; 
 
    -webkit-transform: rotateY(315deg) translateZ(200px); 
 
    transform: rotateY(315deg) translateZ(200px) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 
    <div id="1" class="carrousel"> 
 
    <figure> 
 
     <div class="plan p1">1</div> 
 
     <div class="plan p2">2</div> 
 
     <div class="plan p3">3</div> 
 
     <div class="plan p4">4</div> 
 
     <div class="plan p5">5</div> 
 
     <div class="plan p6">6</div> 
 
     <div class="plan p7">7</div> 
 
     <div class="plan p8">8</div> 
 
    </figure> 
 
    </div> 
 

 
    <div style="margin-top: 50px; text-align: center;"> 
 
    <button type="button" class="prev">Prev</button> 
 
    <button type="button" class="next">Next</button> 
 
    </div> 
 
</div>