Sujets similaires

Sujet: Problème avec un Slider :s [resolu] Ven 11 Oct 2013, 20:26

Bonjour ! Je dois dire que je suis très débutante en ce qui concerne le Javascript, Jquery, AJAX ect. Je suis ok en CSS et je n'ai pas de trouble à savoir où placer quoi. Je ne sais pas si je suis dans la bonne section, mon problème n'est pas venant d'un de vos tutoriaux donc je comprends si il n'est pas mis en priorité !

Bon, je vous présente mon problème (pardonnez-moi si je ne suis pas dans la bonne section :s). De ce temps-ci je suis souvent sur le site jQuery pour visualiser des démos et des effets faits par les dévellopeurs. Je recherchais un slider pour la page d'acceuil de mon forum ci-contre : http://infernum-renatus.superforum.fr

J'ai trouvé le 'tutoriel' , les fichiers à télécharger ainsi que les démos ici : http://kevinbatdorf.github.io/liquidslider/examples/page1.html#how-to-install

Oui, c'est en anglais et grâce à mon bilinguisme, j'ai compris le principe. J'ai télécharger le document dans lequel il avait deux documents Notepad pour le CSS ainsi que 3 documents "JS Script Files" pour les codes javascript. Je ne pouvais pas lire ces documents Javascript car je n'ai pas de programme ou d'éditeur JS, donc j'ai télécharger le programme éditeur temporairement pour pouvoir extraire les codes et les mettre sur mon forum ! Je ne sais pas si c'était nécéssaire mais si oui, aumoins ce sera fait ! Wink

Bon, ensuite j'ai copier les codes de chaque documents JS et je les ai copier chacuns séparement dans ' gestion des codes javascript ' . J'ai cocher "Oui" pour l'activiation des codes Javascript. Et pour chaque script j'ai cocher "Sur toute les pages" ( je ne sais pas si je dois faire ça enfaite vut que c'est juste pour la PA ). J'ai ensuite été coller les deux codes CSS dans ma feuille de styles ! Le site fourni, sans téléchargement, deux codes (au début, comme vous pouvez voir) Celui html pour mettre dans la PA, j'imagine. Et l'autre pour mettre dans les templates. Originalement j'aurais penser le mettre dans le index_body après le commentaire ... Cependant, voici ce pour lequel je n'ai aucune connaissance, je ne sais pas si je dois remplacer quelque-chose ou simplement si je dois ajouter ce code. Le dévellopeur laisse des commentaires tel que, je traduis : Mettre le code après la balise < head> . Or, il n'y a pas de balise head dans ce template :s

Voilà c'est pour cela que j'ai besoin de votre aide. Je ne sais pas comment procéder :(J'ai aussi dans les fichiers que j'ai télécharger une image gif pour l'affichage du 'chargement' et des images png pour les flèches gauches et droites en état survolé et non-survoler.

Je suis sous la version PhPBB2 ! Toute aide serait très apprécier et si je dois fournir les codes que j'ai mentionné veuillez me le préciser Smile

Merci !

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 09:02

Eh bien tu t'es bien débrouillée. Smile

Pour le JS effectivement tu as totalement raison, il faut le mettre à cet endroit là.
Le CSS de même Smile

Par contre pour la partie HTML, est ce que le code qui te pose problème est celui là ?

Code:: /* Add this to the <head> */
<link rel="stylesheet" href="./css/animate.css"> 
<link rel="stylesheet" href="./css/liquid-slider.css">

/* Add these to the <head> or the <footer> */
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./js/jquery.easing.1.3.js"></script>
<script src="./js/jquery.touchSwipe.min.js"></script>
<script src="./js/jquery.liquid-slider.min.js"></script>
<script>
/* If installing in the footer, you won't need $(function() {} */
$(function(){
$('#slider-id').liquidSlider();
});
</script>

Si oui, alors tu n'en a pas vraiment besoin en effet, il permet d'ajouter le CSS et le JS ^^ (ce que tu as déjà fait !)

Ajout du lien vers le CSS (ForumActif te permet de le mettre dans la panneau d'admin, tu l'as déjà fait donc c'est bon) :

Code:: /* Add this to the <head> */
<link rel="stylesheet" href="./css/animate.css"> 
<link rel="stylesheet" href="./css/liquid-slider.css">

Ajout du jQuery : pas besoin, c'est déjà par défaut sur CSS Actif.

Code:: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Ajout des 3 codes JS (que tu as déjà mis dans ton panneau d'administration)

Code:: <script src="./js/jquery.easing.1.3.js"></script>
<script src="./js/jquery.touchSwipe.min.js"></script>
<script src="./js/jquery.liquid-slider.min.js"></script>

Enfin, la seule partie nécessaire est ceci :

Code:: <script>
/* If installing in the footer, you won't need $(function() {} */
$(function(){
$('#slider-id').liquidSlider();
});
</script>

Cela appelle le code qu'il faut pour le slider Wink

Conseil : créer un nouveau fichier JS, et mettre ce code dedans ^^

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 11:22

Bon, je l'ai testé ici (mon genre de fofo-test) : http://aerya-rpg.forumactif.org
En rajoutant simplement le dernier code dans une nouvelle feuille JS. J'ai tout les codes, appart celui à metre dans mon template car il n'est pas nécéssaire si j'ai déjà mes 5 codes JS et CSS ?

Si j'ai bien compris, c'est tout bon... mais comme tu vois, ça ne marche pas sur la PA :s

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 11:40

Est ce que tu peux me copier / coller le contenu du CSS s'il te plait ?
Peux tu également me donner les liens vers tes différents JS (si je ne me trompe pas, je crois bien qu'il y a le lien dans la partie Module du PA ^^) ?

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 13:51

Voici mon 1er code CSS

Code:: /***********************************************************************
*
* Liquid Slider
* Kevin Batdorf
*
* http://liquidslider.com
*
* GPL license
*
************************************************************************/

/******************************************************
* No JavaScript
* Use this to apply styles when Javascript is disabled,
* and be sure to include the ".no-js" class in your html
* markup.
*******************************************************/
.no-js .liquid-slider {
  height:350px;
  overflow:scroll;
}

/******************************************************
* Preloader
* Use this to apply styles when Javascript is disabled,
* and be sure to include the ".no-js" class in your html
* markup.
*******************************************************/
.ls-wrapper .ls-preloader {
  background: url(../img/loading.gif) #f2f2f2 no-repeat center 75px;
  opacity:1;
  /* Do not edit below this line */
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:2;
}

/******************************************************************
* Base Styles
* The styles here will apply to everything. I recommend you keep
* the styles in here specific to mobile defices, then use
* the media queries at the bottom to define further styles for larger
* screen-sizes. Think Mobile First. But be cautious of how
* your site will look in older IE browsers.
*
* Additional media queries are at the bottom of this document
******************************************************************/
.ls-wrapper {
  margin:0 auto;
  /* Do not edit below this line */
  clear: both;
  overflow: auto;
  position: relative;
}

/******************************************************
* Main Container
* This is the main container (minus the navigation).
* Be sure to match the width with the .panel class,
* or it won't work properly. Also, width only applies
* if you are not using the responsive setting.
*
* The responsive slider will interpret the width as the
* max width instead
*******************************************************/
.ls-wrapper .liquid-slider {
  background: #f2f2f2;
  width: 1030px;
  /* Do not edit below this line */
  float: left;
  overflow: hidden;
  position: relative;
}
.ls-wrapper .panel-container {
  /* Do not edit below this line */
  position: relative;

}
.ls-wrapper .liquid-slider .panel-container .fade {
  /* Do not edit below this line */
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

/******************************************************
* Panels
* This is for the panels. If you are using the
* responsive setting, this will act as the max-width
* for the entire slider.
*******************************************************/
.ls-wrapper .liquid-slider .panel {
  width: 1030px;
  /* Do not edit below this line */
  display: block;
  float: left;
}

/******************************************************
* These provide a base starting point for images and
* video. However, you will have to add more rules
* based on the content you use. Use the @media queries
* at the bottom of this file.
*******************************************************/
.ls-wrapper .liquid-slider .panel img{
  /*
  width:100%;
  height:auto;
  margin:0 5px;
  */
}

.ls-wrapper .liquid-slider .panel video {
  /*
  width:100%;
  height:auto;
  */
}

/******************************************************
* This is mainly used to adjust the padding inside each
* panel. If you are using the responsive setting, you
* need to use the settings below as this will not apply.
*******************************************************/
.ls-wrapper .liquid-slider .panel-wrapper {
  padding: 20px;
  /* Do not edit below this line */
  position:relative;
}

/*****************************************************
* This will adjust styles for all navigation tabs
* less of course the select box used for mobile
* navigation. The .current styles will apply only to
* the current tab.
*
* You may use this section to create navigation for
* mobile devices if you set mobileNavigation: false
* Be sure to edit media queries for larger devices below
* I have included an example below in comments.
*
* .currentCrossLink refers to external crosslinking.
*******************************************************/
.ls-wrapper .ls-nav a {
  background: #d8d8d8;
  color: #333333;
  margin-right: 1px;
  padding: 10px 15px;
}
.ls-wrapper .ls-nav a:hover {
  background: #f2f2f2;
  color: #333333;
  text-shadow: none;
}
.ls-wrapper .ls-nav .current {
  background: #f2f2f2;
}
.currentCrossLink {
  font-weight: bold;
}
.ls-wrapper .ls-nav ul {
  padding:0;
  /* Do not edit below this line */
  clear: both;
  display: block;
  margin: auto;
  overflow: hidden;
}
.ls-wrapper .ls-nav ul li {
  /* Do not edit below this line */
  display: inline;
}
.ls-wrapper .ls-nav ul li a {

  /* Do not edit below this line */
  display: block;
  float: left;
  text-decoration: none;
}
/*****************************************************
* Mobile Menu
* This will adjust styles for selectbox styles. I have
* included a simple example to create a custom select
* box.
*******************************************************/
.ls-wrapper .ls-nav {
  overflow:hidden;
  clear:both;
}
.ls-wrapper .ls-select-box {
  /* Delete these if you want the standard select box.
   Also delete the rules below */

  width: 100%;
  height: 35px;
  overflow: hidden;
  background: url(../img/menu.png) no-repeat right #ddd;

}
.ls-wrapper .ls-select-box select {
  /* If you want the standard select box, use
  width:100%
  And delete the rest of the styling here */

  width: 150%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance:none;
  background: transparent;
  padding: 5px;
  font-size: 110%;
  border: none;
  height: 35px;
  cursor:pointer;
  outline: 0;
}

/******************************************************
* Arrows
* This section refers to both the non-graphical and
* graphical navigation arrows.
*
* Some settings will be overwritten when using the
* responsive setting.
*******************************************************/
.ls-wrapper .ls-nav-left, .ls-wrapper .ls-nav-right {
  /* Do not edit below this line */
  float: left;
}
.ls-wrapper .ls-nav-left a, .ls-wrapper .ls-nav-right a {
  /* non-graphical arrows */
  background: #000;
  color: #fff;
  padding: 5px;
  width: 100px;
  /* Do not edit below this line */
  display: block;
  text-align: center;
  text-decoration: none;
}
.ls-wrapper .ls-nav-left-arrow, .ls-wrapper .ls-nav-right-arrow {
  cursor: pointer;
  /* Do not edit below this line */
  float: left;
}
.ls-wrapper .ls-nav-left-arrow a, .ls-wrapper .ls-nav-right-arrow a {
  /* Do not edit below this line */
  display: block;
}
.ls-wrapper .ls-nav-left, .ls-wrapper .ls-nav-left-arrow {
  /* Do not edit below this line */
  clear: both;
}
.ls-wrapper .ls-nav-right-arrow {
  width: 25px;
  height: 25px;
  background: url(../img/arrow.png) no-repeat top right;
  margin-top: 50px;
  margin-right: 5px;
  /* Do not edit below this line */
  position:relative;
}
.ls-wrapper .ls-nav-left-arrow {
  width: 25px;
  height: 25px;
  background: url(../img/arrow.png) no-repeat top left;
  margin-top: 50px;
  margin-left: 5px;
  /* Do not edit below this line */
  position:relative;
}
.ls-wrapper .ls-nav-left-arrow:hover {
  /* Left graphical arrows hover */
  background: url(../img/arrow.png) no-repeat bottom left;
}
.ls-wrapper .ls-nav-left-arrow:active {
  /* Left graphical arrows click */
}
.ls-wrapper .ls-nav-right-arrow:hover {
  /* Right graphical arrows hover */
  background: url(../img/arrow.png) no-repeat bottom right;
}
.ls-wrapper .ls-nav-right-arrow:active {
  /* Right graphical arrows click */
}
.arrows .liquid-slider {
  /* Margin between slider and arrows */
  margin: 0 10px;
}

/******************************************************
* Responsive Styles
* Here are the main responsive styles. This mostly
* covers the arrows, and most of the settings can be
* applied above.
*******************************************************/
.ls-responsive .liquid-slider {
  /* Do not edit below this line */
  width: 100%;
  margin: 0;
}
.ls-responsive .liquid-slider .panel .panel-wrapper {
  padding: 10px;
}
.ls-responsive .ls-nav-left {
  /* Left non-graphical arrows */
  /* Do not edit below this line */
  position: absolute;
  left: 0;
  z-index: 2;
}
.ls-responsive .ls-nav-left a {
  /* Left non-graphical arrows */
  background: #9A9A9A;
  width: 80px;
}
.ls-responsive .ls-nav-left a:hover {
  /* Left non-graphical hover */
  background: #747474;
}
.ls-responsive .ls-nav-right {
  /* Right non-graphical arrows */
  /* Do not edit below this line */
  position: absolute;
  right: 0;
  z-index: 2;
}
.ls-responsive .ls-nav-right a {
  /* Right non-graphical arrows */
  background: #9A9A9A;
  width: 80px;
}
.ls-responsive .ls-nav-right a:hover {
  /* Right non-graphical arrows hover */
  background: #747474;
}
.ls-responsive .ls-nav-left-arrow {
  /* Do not edit below this line */
  position: absolute;
  left: 0;
  z-index: 2;
}
.ls-responsive .ls-nav-right-arrow {
  /* Do not edit below this line */
  position: absolute;
  right: 0;
  z-index: 2;
}

/******************************************************************
* Larger Mobile Devices
* This is for devices like the Galaxy Note or something that's
* larger than an iPhone but smaller than a tablet.
******************************************************************/
@media only screen and (min-width: 481px) {
  .ls-wrapper .liquid-slider .panel img{
   /* Example */
   /*
   width:24%;
   margin:2px;
   */
  }

}

/******************************************************************
* Tablet & Smaller Laptops
* This will include tablets and some netbooks.
******************************************************************/
@media only screen and (min-width: 768px) {
  .ls-wrapper .liquid-slider .panel img{
   /* Example */
   /*
   width:24%;
   */
  }
  .ls-responsive .liquid-slider .panel .panel-wrapper {
   padding: 20px 35px;
  }
}

/******************************************************************
* DESKTOP
* This is the average viewing window. So Desktops, Laptops, and
* in general anyone not viewing on a mobile device. Here's where
* you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 1030px) {


}

/******************************************************************
* LARGE VIEWING SIZE
* This is for the larger monitors and possibly full screen viewers.
******************************************************************/
@media only screen and (min-width: 1240px) {


}

/******************************************************************
* RETINA (2x RESOLUTION DEVICES)
* This applies to the retina iPhone (4s) and iPad (2,3) along with
* other displays with a 2x resolution. You can also create a media
* query for retina AND a certain size if you want. Go Nuts.
******************************************************************/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (min--moz-device-pixel-ratio: 1.5),
   only screen and (min-device-pixel-ratio: 1.5) {


}

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 13:53

Mon deuxième (1ere partie, sinon je dépasse la limite de taille du message --' ) :

Code:: @charset "UTF-8";body{-webkit-backface-visibility:hidden}.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}@-webkit-keyframes flash{0,50%,100%{opacity:1}25%,75%{opacity:0}}@-moz-keyframes flash{0,50%,100%{opacity:1}25%,75%{opacity:0}}@-o-keyframes flash{0,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash}@-webkit-keyframes shake{0,100%{-webkit-transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px)}}@-moz-keyframes shake{0,100%{-moz-transform:translateX(0)}10%,30%,50%,70%,90%{-moz-transform:translateX(-10px)}20%,40%,60%,80%{-moz-transform:translateX(10px)}}@-o-keyframes shake{0,100%{-o-transform:translateX(0)}10%,30%,50%,70%,90%{-o-transform:translateX(-10px)}20%,40%,60%,80%{-o-transform:translateX(10px)}}@keyframes shake{0,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.shake{-webkit-animation-name:shake;-moz-animation-name:shake;-o-animation-name:shake;animation-name:shake}@-webkit-keyframes bounce{0,20%,50%,80%,100%{-webkit-transform:translateY(0)}40%{-webkit-transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px)}}@-moz-keyframes bounce{0,20%,50%,80%,100%{-moz-transform:translateY(0)}40%{-moz-transform:translateY(-30px)}60%{-moz-transform:translateY(-15px)}}@-o-keyframes bounce{0,20%,50%,80%,100%{-o-transform:translateY(0)}40%{-o-transform:translateY(-30px)}60%{-o-transform:translateY(-15px)}}@keyframes bounce{0,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-o-animation-name:bounce;animation-name:bounce}@-webkit-keyframes tada{0{-webkit-transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0)}}@-moz-keyframes tada{0{-moz-transform:scale(1)}10%,20%{-moz-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}100%{-moz-transform:scale(1) rotate(0)}}@-o-keyframes tada{0{-o-transform:scale(1)}10%,20%{-o-transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-o-transform:scale(1.1) rotate(3deg)}40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg)}100%{-o-transform:scale(1) rotate(0)}}@keyframes tada{0{transform:scale(1)}10%,20%{transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}.tada{-webkit-animation-name:tada;-moz-animation-name:tada;-o-animation-name:tada;animation-name:tada}@-webkit-keyframes swing{20%,40%,60%,80%,100%{-webkit-transform-origin:top center}20%{-webkit-transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg)}100%{-webkit-transform:rotate(0)}}@-moz-keyframes swing{20%{-moz-transform:rotate(15deg)}40%{-moz-transform:rotate(-10deg)}60%{-moz-transform:rotate(5deg)}80%{-moz-transform:rotate(-5deg)}100%{-moz-transform:rotate(0)}}@-o-keyframes swing{20%{-o-transform:rotate(15deg)}40%{-o-transform:rotate(-10deg)}60%{-o-transform:rotate(5deg)}80%{-o-transform:rotate(-5deg)}100%{-o-transform:rotate(0)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}.swing{-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;-moz-animation-name:swing;-o-animation-name:swing;animation-name:swing}@-webkit-keyframes wobble{0{-webkit-transform:translateX(0)}15%{-webkit-transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes wobble{0{-moz-transform:translateX(0)}15%{-moz-transform:translateX(-25%) rotate(-5deg)}30%{-moz-transform:translateX(20%) rotate(3deg)}45%{-moz-transform:translateX(-15%) rotate(-3deg)}60%{-moz-transform:translateX(10%) rotate(2deg)}75%{-moz-transform:translateX(-5%) rotate(-1deg)}100%{-moz-transform:translateX(0)}}@-o-keyframes wobble{0{-o-transform:translateX(0)}15%{-o-transform:translateX(-25%) rotate(-5deg)}30%{-o-transform:translateX(20%) rotate(3deg)}45%{-o-transform:translateX(-15%) rotate(-3deg)}60%{-o-transform:translateX(10%) rotate(2deg)}75%{-o-transform:translateX(-5%) rotate(-1deg)}100%{-o-transform:translateX(0)}}@keyframes wobble{0{transform:translateX(0)}15%{transform:translateX(-25%) rotate(-5deg)}30%{transform:translateX(20%) rotate(3deg)}45%{transform:translateX(-15%) rotate(-3deg)}60%{transform:translateX(10%) rotate(2deg)}75%{transform:translateX(-5%) rotate(-1deg)}100%{transform:translateX(0)}}.wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-o-animation-name:wobble;animation-name:wobble}@-webkit-keyframes pulse{0{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}}@-moz-keyframes pulse{0{-moz-transform:scale(1)}50%{-moz-transform:scale(1.1)}100%{-moz-transform:scale(1)}}@-o-keyframes pulse{0{-o-transform:scale(1)}50%{-o-transform:scale(1.1)}100%{-o-transform:scale(1)}}@keyframes pulse{0{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}.pulse{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse}@-webkit-keyframes flip{0{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in}}@-moz-keyframes flip{0{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out}40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out}50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in}80%{-moz-transform:perspective(400px) rotateY(360deg) scale(.95);-moz-animation-timing-function:ease-in}100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in}}@-o-keyframes flip{0{-o-transform:perspective(400px) rotateY(0);-o-animation-timing-function:ease-out}40%{-o-transform:perspective(400px) translateZ(150px) rotateY(170deg);-o-animation-timing-function:ease-out}50%{-o-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-o-animation-timing-function:ease-in}80%{-o-transform:perspective(400px) rotateY(360deg) scale(.95);-o-animation-timing-function:ease-in}100%{-o-transform:perspective(400px) scale(1);-o-animation-timing-function:ease-in}}@keyframes flip{0{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}80%{transform:perspective(400px) rotateY(360deg) scale(.95);animation-timing-function:ease-in}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}}.flip{-webkit-backface-visibility:visible !important;-webkit-animation-name:flip;-moz-backface-visibility:visible !important;-moz-animation-name:flip;-o-backface-visibility:visible !important;-o-animation-name:flip;backface-visibility:visible !important;animation-name:flip}@-webkit-keyframes flipInX{0{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1}}@-moz-keyframes flipInX{0{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateX(-10deg)}70%{-moz-transform:perspective(400px) rotateX(10deg)}100%{-moz-transform:perspective(400px) rotateX(0);opacity:1}}@-o-keyframes flipInX{0{-o-transform:perspective(400px) rotateX(90deg);opacity:0}40%{-o-transform:perspective(400px) rotateX(-10deg)}70%{-o-transform:perspective(400px) rotateX(10deg)}100%{-o-transform:perspective(400px) rotateX(0);opacity:1}}@keyframes flipInX{0{transform:perspective(400px) rotateX(90deg);opacity:0}40%{transform:perspective(400px) rotateX(-10deg)}70%{transform:perspective(400px) rotateX(10deg)}100%{transform:perspective(400px) rotateX(0);opacity:1}}.flipInX{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInX;-moz-backface-visibility:visible !important;-moz-animation-name:flipInX;-o-backface-visibility:visible !important;-o-animation-name:flipInX;backface-visibility:visible !important;animation-name:flipInX}@-webkit-keyframes flipOutX{0{-webkit-transform:perspective(400px) rotateX(0);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0}}@-moz-keyframes flipOutX{0{-moz-transform:perspective(400px) rotateX(0);opacity:1}100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0}}@-o-keyframes flipOutX{0{-o-transform:perspective(400px) rotateX(0);opacity:1}100%{-o-transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0{transform:perspective(400px) rotateX(0);opacity:1}100%{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;-webkit-backface-visibility:visible !important;-moz-animation-name:flipOutX;-moz-backface-visibility:visible !important;-o-animation-name:flipOutX;-o-backface-visibility:visible !important;animation-name:flipOutX;backface-visibility:visible !important}@-webkit-keyframes flipInY{0{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1}}@-moz-keyframes flipInY{0{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-moz-transform:perspective(400px) rotateY(-10deg)}70%{-moz-transform:perspective(400px) rotateY(10deg)}100%{-moz-transform:perspective(400px) rotateY(0);opacity:1}}@-o-keyframes flipInY{0{-o-transform:perspective(400px) rotateY(90deg);opacity:0}40%{-o-transform:perspective(400px) rotateY(-10deg)}70%{-o-transform:perspective(400px) rotateY(10deg)}100%{-o-transform:perspective(400px) rotateY(0);opacity:1}}@keyframes flipInY{0{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0);opacity:1}}.flipInY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipInY;-moz-backface-visibility:visible !important;-moz-animation-name:flipInY;-o-backface-visibility:visible !important;-o-animation-name:flipInY;backface-visibility:visible !important;animation-name:flipInY}@-webkit-keyframes flipOutY{0{-webkit-transform:perspective(400px) rotateY(0);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}}@-moz-keyframes flipOutY{0{-moz-transform:perspective(400px) rotateY(0);opacity:1}100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}}@-o-keyframes flipOutY{0{-o-transform:perspective(400px) rotateY(0);opacity:1}100%{-o-transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0{transform:perspective(400px) rotateY(0);opacity:1}100%{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible !important;-webkit-animation-name:flipOutY;-moz-backface-visibility:visible !important;-moz-animation-name:flipOutY;-o-backface-visibility:visible !important;-o-animation-name:flipOutY;backface-visibility:visible !important;animation-name:flipOutY}@-webkit-keyframes fadeIn{0{opacity:0}100%{opacity:1}}@-moz-keyframes fadeIn{0{opacity:0}100%{opacity:1}}@-o-keyframes fadeIn{0{opacity:0}100%{opacity:1}}@keyframes fadeIn{0{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;-o-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInUp{0{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUp{0{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUp{0{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUp{0{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInDown{0{opacity:0;-webkit-transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDown{0{opacity:0;-moz-transform:translateY(-20px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDown{0{opacity:0;-o-transform:translateY(-20px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDown{0{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInLeft{0{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeft{0{opacity:0;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeft{0{opacity:0;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeft{0{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRight{0{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRight{0{opacity:0;-o-transform:translateX(20px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRight{0{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInUpBig{0{opacity:0;-webkit-transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInUpBig{0{opacity:0;-moz-transform:translateY(2000px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInUpBig{0{opacity:0;-o-transform:translateY(2000px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInUpBig{0{opacity:0;transform:translateY(2000px)}100%{opacity:1;transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeInDownBig{0{opacity:0;-webkit-transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0)}}@-moz-keyframes fadeInDownBig{0{opacity:0;-moz-transform:translateY(-2000px)}100%{opacity:1;-moz-transform:translateY(0)}}@-o-keyframes fadeInDownBig{0{opacity:0;-o-transform:translateY(-2000px)}100%{opacity:1;-o-transform:translateY(0)}}@keyframes fadeInDownBig{0{opacity:0;transform:translateY(-2000px)}100%{opacity:1;transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;-moz-animation-name:fadeInDownBig;-o-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeftBig{0{opacity:0;-webkit-transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInLeftBig{0{opacity:0;-moz-transform:translateX(-2000px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInLeftBig{0{opacity:0;-o-transform:translateX(-2000px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInLeftBig{0{opacity:0;transform:translateX(-2000px)}100%{opacity:1;transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;-moz-animation-name:fadeInLeftBig;-o-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRightBig{0{opacity:0;-webkit-transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0)}}@-moz-keyframes fadeInRightBig{0{opacity:0;-moz-transform:translateX(2000px)}100%{opacity:1;-moz-transform:translateX(0)}}@-o-keyframes fadeInRightBig{0{opacity:0;-o-transform:translateX(2000px)}100%{opacity:1;-o-transform:translateX(0)}}@keyframes fadeInRightBig{0{opacity:0;transform:translateX(2000px)}100%{opacity:1;transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;-moz-animation-name:fadeInRightBig;-o-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@-moz-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@-o-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;-moz-animation-name:fadeOut;-o-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutUp{0{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px)}}@-moz-keyframes fadeOutUp{0{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-20px)}}@-o-keyframes fadeOutUp{0{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(-20px)}}@keyframes fadeOutUp{0{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;-moz-animation-name:fadeOutUp;-o-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutDown{0{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px)}}@-moz-keyframes fadeOutDown{0{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(20px)}}@-o-keyframes fadeOutDown{0{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(20px)}}@keyframes fadeOutDown{0{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;-moz-animation-name:fadeOutDown;-o-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutLeft{0{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px)}}@-moz-keyframes fadeOutLeft{0{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-20px)}}@-o-keyframes fadeOutLeft{0{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(-20px)}}@keyframes fadeOutLeft{0{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutRight{0{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px)}}@-moz-keyframes fadeOutRight{0{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(20px)}}@-o-keyframes fadeOutRight{0{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(20px)}}@keyframes fadeOutRight{0{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;-moz-animation-name:fadeOutRight;-o-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutUpBig{0{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@-moz-keyframes fadeOutUpBig{0{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(-2000px)}}@-o-keyframes fadeOutUpBig{0{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;-moz-animation-name:fadeOutUpBig;-o-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes fadeOutDownBig{0{opacity:1;-webkit-transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@-moz-keyframes fadeOutDownBig{0{opacity:1;-moz-transform:translateY(0)}100%{opacity:0;-moz-transform:translateY(2000px)}}@-o-keyframes fadeOutDownBig{0{opacity:1;-o-transform:translateY(0)}100%{opacity:0;-o-transform:translateY(2000px)}}@keyframes fadeOutDownBig{0{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;-moz-animation-name:fadeOutDownBig;-o-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeftBig{0{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@-moz-keyframes fadeOutLeftBig{0{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(-2000px)}}@-o-keyframes fadeOutLeftBig{0{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;-moz-animation-name:fadeOutLeftBig;-o-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRightBig{0{opacity:1;-webkit-transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@-moz-keyframes fadeOutRightBig{0{opacity:1;-moz-transform:translateX(0)}100%{opacity:0;-moz-transform:translateX(2000px)}}@-o-keyframes fadeOutRightBig{0{opacity:1;-o-transform:translateX(0)}100%{opacity:0;-o-transform:translateX(2000px)}}@keyframes fadeOutRightBig{0{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;-moz-animation-name:fadeOutRightBig;-o-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes bounceIn{0{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}@-moz-keyframes bounceIn{0{opacity:0;-moz-transform:scale(.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}@-o-keyframes bounceIn{0{opacity:0;-o-transform:scale(.3)}50%{opacity:1;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}@keyframes bounceIn{0{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInUp{0{opacity:0;-webkit-transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px)}80%{-webkit-transform:translateY(10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceInUp{0{opacity:0;-moz-transform:translateY(2000px)}60%{opacity:1;-moz-transform:translateY(-30px)}80%{-moz-transform:translateY(10px)}100%{-moz-transform:translateY(0)}}@-o-keyframes bounceInUp{0{opacity:0;-o-transform:translateY(2000px)}60%{opacity:1;-o-transform:translateY(-30px)}80%{-o-transform:translateY(10px)}100%{-o-transform:translateY(0)}}@keyframes bounceInUp{0{opacity:0;transform:translateY(2000px)}60%{opacity:1;transform:translateY(-30px)}80%{transform:translateY(10px)}100%{transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;-moz-animation-name:bounceInUp;-o-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceInDown{0{opacity:0;-webkit-transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px)}80%{-webkit-transform:translateY(-10px)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes bounceInDown{0{opacity:0;-moz-transform:translateY(-2000px)}60%{opacity:1;-moz-transform:translateY(30px)}80%{-moz-transform:translateY(-10px)}100%{-moz-transform:translateY(0)}}@-o-keyframes bounceInDown{0{opacity:0;-o-transform:translateY(-2000px)}60%{opacity:1;-o-transform:translateY(30px)}80%{-o-transform:translateY(-10px)}100%{-o-transform:translateY(0)}}@keyframes bounceInDown{0{opacity:0;transform:translateY(-2000px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;-moz-animation-name:bounceInDown;-o-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0{opacity:0;-webkit-transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px)}80%{-webkit-transform:translateX(-10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceInLeft{0{opacity:0;-moz-transform:translateX(-2000px)}60%{opacity:1;-moz-transform:translateX(30px)}80%{-moz-transform:translateX(-10px)}100%{-moz-transform:translateX(0)}}@-o-keyframes bounceInLeft{0{opacity:0;-o-transform:translateX(-2000px)}60%{opacity:1;-o-transform:translateX(30px)}80%{-o-transform:translateX(-10px)}100%{-o-transform:translateX(0)}}@keyframes bounceInLeft{0{opacity:0;transform:translateX(-2000px)}60%{opacity:1;transform:translateX(30px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;-moz-animation-name:bounceInLeft;-o-animation-name:bounceInLeft;

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 13:55

La fin du deuxième x) :

Code:: animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0{opacity:0;-webkit-transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px)}80%{-webkit-transform:translateX(10px)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes bounceInRight{0{opacity:0;-moz-transform:translateX(2000px)}60%{opacity:1;-moz-transform:translateX(-30px)}80%{-moz-transform:translateX(10px)}100%{-moz-transform:translateX(0)}}@-o-keyframes bounceInRight{0{opacity:0;-o-transform:translateX(2000px)}60%{opacity:1;-o-transform:translateX(-30px)}80%{-o-transform:translateX(10px)}100%{-o-transform:translateX(0)}}@keyframes bounceInRight{0{opacity:0;transform:translateX(2000px)}60%{opacity:1;transform:translateX(-30px)}80%{transform:translateX(10px)}100%{transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;-moz-animation-name:bounceInRight;-o-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceOut{0{-webkit-transform:scale(1)}25%{-webkit-transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3)}}@-moz-keyframes bounceOut{0{-moz-transform:scale(1)}25%{-moz-transform:scale(.95)}50%{opacity:1;-moz-transform:scale(1.1)}100%{opacity:0;-moz-transform:scale(.3)}}@-o-keyframes bounceOut{0{-o-transform:scale(1)}25%{-o-transform:scale(.95)}50%{opacity:1;-o-transform:scale(1.1)}100%{opacity:0;-o-transform:scale(.3)}}@keyframes bounceOut{0{transform:scale(1)}25%{transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutUp{0{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px)}}@-moz-keyframes bounceOutUp{0{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(20px)}100%{opacity:0;-moz-transform:translateY(-2000px)}}@-o-keyframes bounceOutUp{0{-o-transform:translateY(0)}20%{opacity:1;-o-transform:translateY(20px)}100%{opacity:0;-o-transform:translateY(-2000px)}}@keyframes bounceOutUp{0{transform:translateY(0)}20%{opacity:1;transform:translateY(20px)}100%{opacity:0;transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;-moz-animation-name:bounceOutUp;-o-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes bounceOutDown{0{-webkit-transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px)}}@-moz-keyframes bounceOutDown{0{-moz-transform:translateY(0)}20%{opacity:1;-moz-transform:translateY(-20px)}100%{opacity:0;-moz-transform:translateY(2000px)}}@-o-keyframes bounceOutDown{0{-o-transform:translateY(0)}20%{opacity:1;-o-transform:translateY(-20px)}100%{opacity:0;-o-transform:translateY(2000px)}}@keyframes bounceOutDown{0{transform:translateY(0)}20%{opacity:1;transform:translateY(-20px)}100%{opacity:0;transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;-moz-animation-name:bounceOutDown;-o-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px)}}@-moz-keyframes bounceOutLeft{0{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(20px)}100%{opacity:0;-moz-transform:translateX(-2000px)}}@-o-keyframes bounceOutLeft{0{-o-transform:translateX(0)}20%{opacity:1;-o-transform:translateX(20px)}100%{opacity:0;-o-transform:translateX(-2000px)}}@keyframes bounceOutLeft{0{transform:translateX(0)}20%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;-moz-animation-name:bounceOutLeft;-o-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0{-webkit-transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px)}}@-moz-keyframes bounceOutRight{0{-moz-transform:translateX(0)}20%{opacity:1;-moz-transform:translateX(-20px)}100%{opacity:0;-moz-transform:translateX(2000px)}}@-o-keyframes bounceOutRight{0{-o-transform:translateX(0)}20%{opacity:1;-o-transform:translateX(-20px)}100%{opacity:0;-o-transform:translateX(2000px)}}@keyframes bounceOutRight{0{transform:translateX(0)}20%{opacity:1;transform:translateX(-20px)}100%{opacity:0;transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;-moz-animation-name:bounceOutRight;-o-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes rotateIn{0{-webkit-transform-origin:center center;-webkit-transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateIn{0{-moz-transform-origin:center center;-moz-transform:rotate(-200deg);opacity:0}100%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateIn{0{-o-transform-origin:center center;-o-transform:rotate(-200deg);opacity:0}100%{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1}}@keyframes rotateIn{0{transform-origin:center center;transform:rotate(-200deg);opacity:0}100%{transform-origin:center center;transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;-moz-animation-name:rotateIn;-o-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInUpLeft{0{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInUpLeft{0{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInUpLeft{0{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0{transform-origin:left bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;-moz-animation-name:rotateInUpLeft;-o-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInDownLeft{0{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownLeft{0{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInDownLeft{0{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0}100%{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;-moz-animation-name:rotateInDownLeft;-o-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInUpRight{0{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInUpRight{0{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInUpRight{0{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;-moz-animation-name:rotateInUpRight;-o-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateInDownRight{0{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}}@-moz-keyframes rotateInDownRight{0{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}}@-o-keyframes rotateInDownRight{0{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0}100%{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0{transform-origin:right bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;-moz-animation-name:rotateInDownRight;-o-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateOut{0{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0}}@-moz-keyframes rotateOut{0{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0}}@-o-keyframes rotateOut{0{-o-transform-origin:center center;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:center center;-o-transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0{transform-origin:center center;transform:rotate(0);opacity:1}100%{transform-origin:center center;transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;-moz-animation-name:rotateOut;-o-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutUpLeft{0{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateOutUpLeft{0{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0}}@-o-keyframes rotateOutUpLeft{0{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:left bottom;-o-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;-moz-animation-name:rotateOutUpLeft;-o-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutDownLeft{0{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateOutDownLeft{0{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0}}@-o-keyframes rotateOutDownLeft{0{-o-transform-origin:left bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:left bottom;-o-transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;-moz-animation-name:rotateOutDownLeft;-o-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutUpRight{0{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0}}@-moz-keyframes rotateOutUpRight{0{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0}}@-o-keyframes rotateOutUpRight{0{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:right bottom;-o-transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;-moz-animation-name:rotateOutUpRight;-o-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes rotateOutDownRight{0{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0}}@-moz-keyframes rotateOutDownRight{0{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1}100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0}}@-o-keyframes rotateOutDownRight{0{-o-transform-origin:right bottom;-o-transform:rotate(0);opacity:1}100%{-o-transform-origin:right bottom;-o-transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;-moz-animation-name:rotateOutDownRight;-o-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes hinge{0{-webkit-transform:rotate(0);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-webkit-animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(700px);opacity:0}}@-moz-keyframes hinge{0{-moz-transform:rotate(0);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}20%,60%{-moz-transform:rotate(80deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}40%{-moz-transform:rotate(60deg);-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}80%{-moz-transform:rotate(60deg) translateY(0);opacity:1;-moz-transform-origin:top left;-moz-animation-timing-function:ease-in-out}100%{-moz-transform:translateY(700px);opacity:0}}@-o-keyframes hinge{0{-o-transform:rotate(0);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}20%,60%{-o-transform:rotate(80deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}40%{-o-transform:rotate(60deg);-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}80%{-o-transform:rotate(60deg) translateY(0);opacity:1;-o-transform-origin:top left;-o-animation-timing-function:ease-in-out}100%{-o-transform:translateY(700px);opacity:0}}@keyframes hinge{0{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out}80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out}100%{transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;-moz-animation-name:hinge;-o-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0) rotate(0)}}@-moz-keyframes rollIn{0{opacity:0;-moz-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-moz-transform:translateX(0) rotate(0)}}@-o-keyframes rollIn{0{opacity:0;-o-transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-o-transform:translateX(0) rotate(0)}}@keyframes rollIn{0{opacity:0;transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;transform:translateX(0) rotate(0)}}.rollIn{-webkit-animation-name:rollIn;-moz-animation-name:rollIn;-o-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0{opacity:1;-webkit-transform:translateX(0) rotate(0)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg)}}@-moz-keyframes rollOut{0{opacity:1;-moz-transform:translateX(0) rotate(0)}100%{opacity:0;-moz-transform:translateX(100%) rotate(120deg)}}@-o-keyframes rollOut{0{opacity:1;-o-transform:translateX(0) rotate(0)}100%{opacity:0;-o-transform:translateX(100%) rotate(120deg)}}@keyframes rollOut{0{opacity:1;transform:translateX(0) rotate(0)}100%{opacity:0;transform:translateX(100%) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;-moz-animation-name:rollOut;-o-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes lightSpeedIn{0{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0) skewX(0);opacity:1}}@-moz-keyframes lightSpeedIn{0{-moz-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-moz-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-moz-transform:translateX(0) skewX(-15deg);opacity:1}100%{-moz-transform:translateX(0) skewX(0);opacity:1}}@-o-keyframes lightSpeedIn{0{-o-transform:translateX(100%) skewX(-30deg);opacity:0}60%{-o-transform:translateX(-20%) skewX(30deg);opacity:1}80%{-o-transform:translateX(0) skewX(-15deg);opacity:1}100%{-o-transform:translateX(0) skewX(0);opacity:1}}@keyframes lightSpeedIn{0{transform:translateX(100%) skewX(-30deg);opacity:0}60%{transform:translateX(-20%) skewX(30deg);opacity:1}80%{transform:translateX(0) skewX(-15deg);opacity:1}100%{transform:translateX(0) skewX(0);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;-moz-animation-name:lightSpeedIn;-o-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;-moz-animation-timing-function:ease-out;-o-animation-timing-function:ease-out;animation-timing-function:ease-out}.animated.lightSpeedIn{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s}@-webkit-keyframes lightSpeedOut{0{-webkit-transform:translateX(0) skewX(0);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);opacity:0}}@-moz-keyframes lightSpeedOut{0{-moz-transform:translateX(0) skewX(0);opacity:1}100%{-moz-transform:translateX(100%) skewX(-30deg);opacity:0}}@-o-keyframes lightSpeedOut{0{-o-transform:translateX(0) skewX(0);opacity:1}100%{-o-transform:translateX(100%) skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0{transform:translateX(0) skewX(0);opacity:1}100%{transform:translateX(100%) skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;-moz-animation-name:lightSpeedOut;-o-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in}.animated.lightSpeedOut{-webkit-animation-duration:.25s;-moz-animation-duration:.25s;-o-animation-duration:.25s;animation-duration:.25s}@-webkit-keyframes wiggle{0{-webkit-transform:skewX(9deg)}10%{-webkit-transform:skewX(-8deg)}20%{-webkit-transform:skewX(7deg)}30%{-webkit-transform:skewX(-6deg)}40%{-webkit-transform:skewX(5deg)}50%{-webkit-transform:skewX(-4deg)}60%{-webkit-transform:skewX(3deg)}70%{-webkit-transform:skewX(-2deg)}80%{-webkit-transform:skewX(1deg)}90%{-webkit-transform:skewX(0)}100%{-webkit-transform:skewX(0)}}@-moz-keyframes wiggle{0{-moz-transform:skewX(9deg)}10%{-moz-transform:skewX(-8deg)}20%{-moz-transform:skewX(7deg)}30%{-moz-transform:skewX(-6deg)}40%{-moz-transform:skewX(5deg)}50%{-moz-transform:skewX(-4deg)}60%{-moz-transform:skewX(3deg)}70%{-moz-transform:skewX(-2deg)}80%{-moz-transform:skewX(1deg)}90%{-moz-transform:skewX(0)}100%{-moz-transform:skewX(0)}}@-o-keyframes wiggle{0{-o-transform:skewX(9deg)}10%{-o-transform:skewX(-8deg)}20%{-o-transform:skewX(7deg)}30%{-o-transform:skewX(-6deg)}40%{-o-transform:skewX(5deg)}50%{-o-transform:skewX(-4deg)}60%{-o-transform:skewX(3deg)}70%{-o-transform:skewX(-2deg)}80%{-o-transform:skewX(1deg)}90%{-o-transform:skewX(0)}100%{-o-transform:skewX(0)}}@keyframes wiggle{0{transform:skewX(9deg)}10%{transform:skewX(-8deg)}20%{transform:skewX(7deg)}30%{transform:skewX(-6deg)}40%{transform:skewX(5deg)}50%{transform:skewX(-4deg)}60%{transform:skewX(3deg)}70%{transform:skewX(-2deg)}80%{transform:skewX(1deg)}90%{transform:skewX(0)}100%{transform:skewX(0)}}.wiggle{-webkit-animation-name:wiggle;-moz-animation-name:wiggle;-o-animation-name:wiggle;animation-name:wiggle;-webkit-animation-timing-function:ease-in;-moz-animation-timing-function:ease-in;-o-animation-timing-function:ease-in;animation-timing-function:ease-in}.animated.wiggle{-webkit-animation-duration:.75s;-moz-animation-duration:.75s;-o-animation-duration:.75s;animation-duration:.75s}

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 13:58

Eeeeeetttt voilà les liens ... ( je crois que c'est ca )

1. http://aerya-rpg.forumactif.org/13093.js
2. http://aerya-rpg.forumactif.org/12371.js
3. http://aerya-rpg.forumactif.org/11329.js
4. http://aerya-rpg.forumactif.org/10237.js

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 15:36

Je viens de faire l'installation sur mon forum, aucun problème.
J'ai simplifié au maximum histoire d'avoir le moins de chose à rajouter.

1/ Je mets le html dans le PA (comme toi).
2/ Dans mon CSS, je n'ai mis que le premier fichier (il peut d'ailleurs être simplifié une fois que tout marchera)

Spoiler:

Code:: /***********************************************************************
*
* Liquid Slider
* Kevin Batdorf
*
* http://liquidslider.com
*
* GPL license
*
************************************************************************/

/******************************************************
* No JavaScript
* Use this to apply styles when Javascript is disabled,
* and be sure to include the ".no-js" class in your html
* markup.
*******************************************************/
.no-js .liquid-slider {
height:350px;
overflow:scroll;
}

/******************************************************
* Preloader
* Use this to apply styles when Javascript is disabled,
* and be sure to include the ".no-js" class in your html
* markup.
*******************************************************/
.ls-wrapper .ls-preloader {
background: url(../img/loading.gif) #f2f2f2 no-repeat center 75px;
opacity:1;
/* Do not edit below this line */
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:2;
}

/******************************************************************
* Base Styles
* The styles here will apply to everything. I recommend you keep
* the styles in here specific to mobile defices, then use
* the media queries at the bottom to define further styles for larger
* screen-sizes. Think Mobile First. But be cautious of how
* your site will look in older IE browsers.
*
* Additional media queries are at the bottom of this document
******************************************************************/
.ls-wrapper {
margin:0 auto;
/* Do not edit below this line */
clear: both;
overflow: auto;
position: relative;
}

/******************************************************
* Main Container
* This is the main container (minus the navigation).
* Be sure to match the width with the .panel class,
* or it won't work properly. Also, width only applies
* if you are not using the responsive setting.
*
* The responsive slider will interpret the width as the
* max width instead
*******************************************************/
.ls-wrapper .liquid-slider {
background: #f2f2f2;
width: 1030px;
/* Do not edit below this line */
float: left;
overflow: hidden;
position: relative;
}
.ls-wrapper .panel-container {
/* Do not edit below this line */
position: relative;

}
.ls-wrapper .liquid-slider .panel-container .fade {
/* Do not edit below this line */
position: absolute;
top: 0;
left: 0;
display: block;
}

/******************************************************
* Panels
* This is for the panels. If you are using the
* responsive setting, this will act as the max-width
* for the entire slider.
*******************************************************/
.ls-wrapper .liquid-slider .panel {
width: 1030px;
/* Do not edit below this line */
display: block;
float: left;
}

/******************************************************
* These provide a base starting point for images and
* video. However, you will have to add more rules
* based on the content you use. Use the @media queries
* at the bottom of this file.
*******************************************************/
.ls-wrapper .liquid-slider .panel img{
/*
width:100%;
height:auto;
margin:0 5px;
*/
}

.ls-wrapper .liquid-slider .panel video {
/*
width:100%;
height:auto;
*/
}

/******************************************************
* This is mainly used to adjust the padding inside each
* panel. If you are using the responsive setting, you
* need to use the settings below as this will not apply.
*******************************************************/
.ls-wrapper .liquid-slider .panel-wrapper {
padding: 20px;
/* Do not edit below this line */
position:relative;
}

/*****************************************************
* This will adjust styles for all navigation tabs
* less of course the select box used for mobile
* navigation. The .current styles will apply only to
* the current tab.
*
* You may use this section to create navigation for
* mobile devices if you set mobileNavigation: false
* Be sure to edit media queries for larger devices below
* I have included an example below in comments.
*
* .currentCrossLink refers to external crosslinking.
*******************************************************/
.ls-wrapper .ls-nav a {
background: #d8d8d8;
color: #333333;
margin-right: 1px;
padding: 10px 15px;
}
.ls-wrapper .ls-nav a:hover {
background: #f2f2f2;
color: #333333;
text-shadow: none;
}
.ls-wrapper .ls-nav .current {
background: #f2f2f2;
}
.currentCrossLink {
font-weight: bold;
}
.ls-wrapper .ls-nav ul {
padding:0;
/* Do not edit below this line */
clear: both;
display: block;
margin: auto;
overflow: hidden;
}
.ls-wrapper .ls-nav ul li {
/* Do not edit below this line */
display: inline;
}
.ls-wrapper .ls-nav ul li a {

/* Do not edit below this line */
display: block;
float: left;
text-decoration: none;
}
/*****************************************************
* Mobile Menu
* This will adjust styles for selectbox styles. I have
* included a simple example to create a custom select
* box.
*******************************************************/
.ls-wrapper .ls-nav {
overflow:hidden;
clear:both;
}
.ls-wrapper .ls-select-box {
/* Delete these if you want the standard select box.
Also delete the rules below */

width: 100%;
height: 35px;
overflow: hidden;
background: url(../img/menu.png) no-repeat right #ddd;

}
.ls-wrapper .ls-select-box select {
/* If you want the standard select box, use
width:100%
And delete the rest of the styling here */

width: 150%;
-webkit-appearance: none;
-moz-appearance: none;
appearance:none;
background: transparent;
padding: 5px;
font-size: 110%;
border: none;
height: 35px;
cursor:pointer;
outline: 0;
}

/******************************************************
* Arrows
* This section refers to both the non-graphical and
* graphical navigation arrows.
*
* Some settings will be overwritten when using the
* responsive setting.
*******************************************************/
.ls-wrapper .ls-nav-left, .ls-wrapper .ls-nav-right {
/* Do not edit below this line */
float: left;
}
.ls-wrapper .ls-nav-left a, .ls-wrapper .ls-nav-right a {
/* non-graphical arrows */
background: #000;
color: #fff;
padding: 5px;
width: 100px;
/* Do not edit below this line */
display: block;
text-align: center;
text-decoration: none;
}
.ls-wrapper .ls-nav-left-arrow, .ls-wrapper .ls-nav-right-arrow {
cursor: pointer;
/* Do not edit below this line */
float: left;
}
.ls-wrapper .ls-nav-left-arrow a, .ls-wrapper .ls-nav-right-arrow a {
/* Do not edit below this line */
display: block;
}
.ls-wrapper .ls-nav-left, .ls-wrapper .ls-nav-left-arrow {
/* Do not edit below this line */
clear: both;
}
.ls-wrapper .ls-nav-right-arrow {
width: 25px;
height: 25px;
background: url(../img/arrow.png) no-repeat top right;
margin-top: 50px;
margin-right: 5px;
/* Do not edit below this line */
position:relative;
}
.ls-wrapper .ls-nav-left-arrow {
width: 25px;
height: 25px;
background: url(../img/arrow.png) no-repeat top left;
margin-top: 50px;
margin-left: 5px;
/* Do not edit below this line */
position:relative;
}
.ls-wrapper .ls-nav-left-arrow:hover {
/* Left graphical arrows hover */
background: url(../img/arrow.png) no-repeat bottom left;
}
.ls-wrapper .ls-nav-left-arrow:active {
/* Left graphical arrows click */
}
.ls-wrapper .ls-nav-right-arrow:hover {
/* Right graphical arrows hover */
background: url(../img/arrow.png) no-repeat bottom right;
}
.ls-wrapper .ls-nav-right-arrow:active {
/* Right graphical arrows click */
}
.arrows .liquid-slider {
/* Margin between slider and arrows */
margin: 0 10px;
}

/******************************************************
* Responsive Styles
* Here are the main responsive styles. This mostly
* covers the arrows, and most of the settings can be
* applied above.
*******************************************************/
.ls-responsive .liquid-slider {
/* Do not edit below this line */
width: 100%;
margin: 0;
}
.ls-responsive .liquid-slider .panel .panel-wrapper {
padding: 10px;
}
.ls-responsive .ls-nav-left {
/* Left non-graphical arrows */
/* Do not edit below this line */
position: absolute;
left: 0;
z-index: 2;
}
.ls-responsive .ls-nav-left a {
/* Left non-graphical arrows */
background: #9A9A9A;
width: 80px;
}
.ls-responsive .ls-nav-left a:hover {
/* Left non-graphical hover */
background: #747474;
}
.ls-responsive .ls-nav-right {
/* Right non-graphical arrows */
/* Do not edit below this line */
position: absolute;
right: 0;
z-index: 2;
}
.ls-responsive .ls-nav-right a {
/* Right non-graphical arrows */
background: #9A9A9A;
width: 80px;
}
.ls-responsive .ls-nav-right a:hover {
/* Right non-graphical arrows hover */
background: #747474;
}
.ls-responsive .ls-nav-left-arrow {
/* Do not edit below this line */
position: absolute;
left: 0;
z-index: 2;
}
.ls-responsive .ls-nav-right-arrow {
/* Do not edit below this line */
position: absolute;
right: 0;
z-index: 2;
}

/******************************************************************
* Larger Mobile Devices
* This is for devices like the Galaxy Note or something that's
* larger than an iPhone but smaller than a tablet.
******************************************************************/
@media only screen and (min-width: 481px) {
.ls-wrapper .liquid-slider .panel img{
/* Example */
/*
width:24%;
margin:2px;
*/
}

}

/******************************************************************
* Tablet & Smaller Laptops
* This will include tablets and some netbooks.
******************************************************************/
@media only screen and (min-width: 768px) {
.ls-wrapper .liquid-slider .panel img{
/* Example */
/*
width:24%;
*/
}
.ls-responsive .liquid-slider .panel .panel-wrapper {
padding: 20px 35px;
}
}

/******************************************************************
* DESKTOP
* This is the average viewing window. So Desktops, Laptops, and
* in general anyone not viewing on a mobile device. Here's where
* you can add resource intensive styles.
******************************************************************/
@media only screen and (min-width: 1030px) {

}

/******************************************************************
* LARGE VIEWING SIZE
* This is for the larger monitors and possibly full screen viewers.
******************************************************************/
@media only screen and (min-width: 1240px) {

}

/******************************************************************
* RETINA (2x RESOLUTION DEVICES)
* This applies to the retina iPhone (4s) and iPad (2,3) along with
* other displays with a 2x resolution. You can also create a media
* query for retina AND a certain size if you want. Go Nuts.
******************************************************************/

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

}

3/ Dans mon JS, j'ai créé 3 nouveaux codes.
L'un avec le contenu de jquery.touchSwype

Spoiler:

Code:: // TouchSwipe v1.6.4
// https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
(function(e){var o="left",n="right",d="up",v="down",c="in",w="out",l="none",r="auto",k="swipe",s="pinch",x="tap",i="doubletap",b="longtap",A="horizontal",t="vertical",h="all",q=10,f="start",j="move",g="end",p="cancel",a="ontouchstart" in window,y="TouchSwipe";var m={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"button, input, select, textarea, a, .noSwipe"};e.fn.swipe=function(D){var C=e(this),B=C.data(y);if(B&&typeof D==="string"){if(B[D]){return B[D].apply(this,Array.prototype.slice.call(arguments,1))}else{e.error("Method "+D+" does not exist on jQuery.swipe")}}else{if(!B&&(typeof D==="object"||!D)){return u.apply(this,arguments)}}return C};e.fn.swipe.defaults=m;e.fn.swipe.phases={PHASE_START:f,PHASE_MOVE:j,PHASE_END:g,PHASE_CANCEL:p};e.fn.swipe.directions={LEFT:o,RIGHT:n,UP:d,DOWN:v,IN:c,OUT:w};e.fn.swipe.pageScroll={NONE:l,HORIZONTAL:A,VERTICAL:t,AUTO:r};e.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:h};function u(B){if(B&&(B.allowPageScroll===undefined&&(B.swipe!==undefined||B.swipeStatus!==undefined))){B.allowPageScroll=l}if(B.click!==undefined&&B.tap===undefined){B.tap=B.click}if(!B){B={}}B=e.extend({},e.fn.swipe.defaults,B);return this.each(function(){var D=e(this);var C=D.data(y);if(!C){C=new z(this,B);D.data(y,C)}})}function z(a0,aq){var av=(a||!aq.fallbackToMouseEvents),G=av?"touchstart":"mousedown",au=av?"touchmove":"mousemove",R=av?"touchend":"mouseup",P=av?null:"mouseleave",az="touchcancel";var ac=0,aL=null,Y=0,aX=0,aV=0,D=1,am=0,aF=0,J=null;var aN=e(a0);var W="start";var T=0;var aM=null;var Q=0,aY=0,a1=0,aa=0,K=0;var aS=null;try{aN.bind(G,aJ);aN.bind(az,a5)}catch(ag){e.error("events not supported "+G+","+az+" on jQuery.swipe")}this.enable=function(){aN.bind(G,aJ);aN.bind(az,a5);return aN};this.disable=function(){aG();return aN};this.destroy=function(){aG();aN.data(y,null);return aN};this.option=function(a8,a7){if(aq[a8]!==undefined){if(a7===undefined){return aq[a8]}else{aq[a8]=a7}}else{e.error("Option "+a8+" does not exist on jQuery.swipe.options")}};function aJ(a9){if(ax()){return}if(e(a9.target).closest(aq.excludedElements,aN).length>0){return}var ba=a9.originalEvent?a9.originalEvent:a9;var a8,a7=a?ba.touches[0]:ba;W=f;if(a){T=ba.touches.length}else{a9.preventDefault()}ac=0;aL=null;aF=null;Y=0;aX=0;aV=0;D=1;am=0;aM=af();J=X();O();if(!a||(T===aq.fingers||aq.fingers===h)||aT()){ae(0,a7);Q=ao();if(T==2){ae(1,ba.touches[1]);aX=aV=ap(aM[0].start,aM[1].start)}if(aq.swipeStatus||aq.pinchStatus){a8=L(ba,W)}}else{a8=false}if(a8===false){W=p;L(ba,W);return a8}else{ak(true)}}function aZ(ba){var bd=ba.originalEvent?ba.originalEvent:ba;if(W===g||W===p||ai()){return}var a9,a8=a?bd.touches[0]:bd;var bb=aD(a8);aY=ao();if(a){T=bd.touches.length}W=j;if(T==2){if(aX==0){ae(1,bd.touches[1]);aX=aV=ap(aM[0].start,aM[1].start)}else{aD(bd.touches[1]);aV=ap(aM[0].end,aM[1].end);aF=an(aM[0].end,aM[1].end)}D=a3(aX,aV);am=Math.abs(aX-aV)}if((T===aq.fingers||aq.fingers===h)||!a||aT()){aL=aH(bb.start,bb.end);ah(ba,aL);ac=aO(bb.start,bb.end);Y=aI();aE(aL,ac);if(aq.swipeStatus||aq.pinchStatus){a9=L(bd,W)}if(!aq.triggerOnTouchEnd||aq.triggerOnTouchLeave){var a7=true;if(aq.triggerOnTouchLeave){var bc=aU(this);a7=B(bb.end,bc)}if(!aq.triggerOnTouchEnd&&a7){W=ay(j)}else{if(aq.triggerOnTouchLeave&&!a7){W=ay(g)}}if(W==p||W==g){L(bd,W)}}}else{W=p;L(bd,W)}if(a9===false){W=p;L(bd,W)}}function I(a7){var a8=a7.originalEvent;if(a){if(a8.touches.length>0){C();return true}}if(ai()){T=aa}a7.preventDefault();aY=ao();Y=aI();if(a6()){W=p;L(a8,W)}else{if(aq.triggerOnTouchEnd||(aq.triggerOnTouchEnd==false&&W===j)){W=g;L(a8,W)}else{if(!aq.triggerOnTouchEnd&&a2()){W=g;aB(a8,W,x)}else{if(W===j){W=p;L(a8,W)}}}}ak(false)}function a5(){T=0;aY=0;Q=0;aX=0;aV=0;D=1;O();ak(false)}function H(a7){var a8=a7.originalEvent;if(aq.triggerOnTouchLeave){W=ay(g);L(a8,W)}}function aG(){aN.unbind(G,aJ);aN.unbind(az,a5);aN.unbind(au,aZ);aN.unbind(R,I);if(P){aN.unbind(P,H)}ak(false)}function ay(bb){var ba=bb;var a9=aw();var a8=aj();var a7=a6();if(!a9||a7){ba=p}else{if(a8&&bb==j&&(!aq.triggerOnTouchEnd||aq.triggerOnTouchLeave)){ba=g}else{if(!a8&&bb==g&&aq.triggerOnTouchLeave){ba=p}}}return ba}function L(a9,a7){var a8=undefined;if(F()||S()){a8=aB(a9,a7,k)}else{if((M()||aT())&&a8!==false){a8=aB(a9,a7,s)}}if(aC()&&a8!==false){a8=aB(a9,a7,i)}else{if(al()&&a8!==false){a8=aB(a9,a7,b)}else{if(ad()&&a8!==false){a8=aB(a9,a7,x)}}}if(a7===p){a5(a9)}if(a7===g){if(a){if(a9.touches.length==0){a5(a9)}}else{a5(a9)}}return a8}function aB(ba,a7,a9){var a8=undefined;if(a9==k){aN.trigger("swipeStatus",[a7,aL||null,ac||0,Y||0,T]);if(aq.swipeStatus){a8=aq.swipeStatus.call(aN,ba,a7,aL||null,ac||0,Y||0,T);if(a8===false){return false}}if(a7==g&&aR()){aN.trigger("swipe",[aL,ac,Y,T]);if(aq.swipe){a8=aq.swipe.call(aN,ba,aL,ac,Y,T);if(a8===false){return false}}switch(aL){case o:aN.trigger("swipeLeft",[aL,ac,Y,T]);if(aq.swipeLeft){a8=aq.swipeLeft.call(aN,ba,aL,ac,Y,T)}break;case n:aN.trigger("swipeRight",[aL,ac,Y,T]);if(aq.swipeRight){a8=aq.swipeRight.call(aN,ba,aL,ac,Y,T)}break;case d:aN.trigger("swipeUp",[aL,ac,Y,T]);if(aq.swipeUp){a8=aq.swipeUp.call(aN,ba,aL,ac,Y,T)}break;case v:aN.trigger("swipeDown",[aL,ac,Y,T]);if(aq.swipeDown){a8=aq.swipeDown.call(aN,ba,aL,ac,Y,T)}break}}}if(a9==s){aN.trigger("pinchStatus",[a7,aF||null,am||0,Y||0,T,D]);if(aq.pinchStatus){a8=aq.pinchStatus.call(aN,ba,a7,aF||null,am||0,Y||0,T,D);if(a8===false){return false}}if(a7==g&&a4()){switch(aF){case c:aN.trigger("pinchIn",[aF||null,am||0,Y||0,T,D]);if(aq.pinchIn){a8=aq.pinchIn.call(aN,ba,aF||null,am||0,Y||0,T,D)}break;case w:aN.trigger("pinchOut",[aF||null,am||0,Y||0,T,D]);if(aq.pinchOut){a8=aq.pinchOut.call(aN,ba,aF||null,am||0,Y||0,T,D)}break}}}if(a9==x){if(a7===p||a7===g){clearTimeout(aS);if(V()&&!E()){K=ao();aS=setTimeout(e.proxy(function(){K=null;aN.trigger("tap",[ba.target]);if(aq.tap){a8=aq.tap.call(aN,ba,ba.target)}},this),aq.doubleTapThreshold)}else{K=null;aN.trigger("tap",[ba.target]);if(aq.tap){a8=aq.tap.call(aN,ba,ba.target)}}}}else{if(a9==i){if(a7===p||a7===g){clearTimeout(aS);K=null;aN.trigger("doubletap",[ba.target]);if(aq.doubleTap){a8=aq.doubleTap.call(aN,ba,ba.target)}}}else{if(a9==b){if(a7===p||a7===g){clearTimeout(aS);K=null;aN.trigger("longtap",[ba.target]);if(aq.longTap){a8=aq.longTap.call(aN,ba,ba.target)}}}}}return a8}function aj(){var a7=true;if(aq.threshold!==null){a7=ac>=aq.threshold}return a7}function a6(){var a7=false;if(aq.cancelThreshold!==null&&aL!==null){a7=(aP(aL)-ac)>=aq.cancelThreshold}return a7}function ab(){if(aq.pinchThreshold!==null){return am>=aq.pinchThreshold}return true}function aw(){var a7;if(aq.maxTimeThreshold){if(Y>=aq.maxTimeThreshold){a7=false}else{a7=true}}else{a7=true}return a7}function ah(a7,a8){if(aq.allowPageScroll===l||aT()){a7.preventDefault()}else{var a9=aq.allowPageScroll===r;switch(a8){case o:if((aq.swipeLeft&&a9)||(!a9&&aq.allowPageScroll!=A)){a7.preventDefault()}break;case n:if((aq.swipeRight&&a9)||(!a9&&aq.allowPageScroll!=A)){a7.preventDefault()}break;case d:if((aq.swipeUp&&a9)||(!a9&&aq.allowPageScroll!=t)){a7.preventDefault()}break;case v:if((aq.swipeDown&&a9)||(!a9&&aq.allowPageScroll!=t)){a7.preventDefault()}break}}}function a4(){var a8=aK();var a7=U();var a9=ab();return a8&&a7&&a9}function aT(){return !!(aq.pinchStatus||aq.pinchIn||aq.pinchOut)}function M(){return !!(a4()&&aT())}function aR(){var ba=aw();var bc=aj();var a9=aK();var a7=U();var a8=a6();var bb=!a8&&a7&&a9&&bc&&ba;return bb}function S(){return !!(aq.swipe||aq.swipeStatus||aq.swipeLeft||aq.swipeRight||aq.swipeUp||aq.swipeDown)}function F(){return !!(aR()&&S())}function aK(){return((T===aq.fingers||aq.fingers===h)||!a)}function U(){return aM[0].end.x!==0}function a2(){return !!(aq.tap)}function V(){return !!(aq.doubleTap)}function aQ(){return !!(aq.longTap)}function N(){if(K==null){return false}var a7=ao();return(V()&&((a7-K)<=aq.doubleTapThreshold))}function E(){return N()}function at(){return((T===1||!a)&&(isNaN(ac)||ac===0))}function aW(){return((Y>aq.longTapThreshold)&&(ac<q))}function ad(){return !!(at()&&a2())}function aC(){return !!(N()&&V())}function al(){return !!(aW()&&aQ())}function C(){a1=ao();aa=event.touches.length+1}function O(){a1=0;aa=0}function ai(){var a7=false;if(a1){var a8=ao()-a1;if(a8<=aq.fingerReleaseThreshold){a7=true}}return a7}function ax(){return !!(aN.data(y+"_intouch")===true)}function ak(a7){if(a7===true){aN.bind(au,aZ);aN.bind(R,I);if(P){aN.bind(P,H)}}else{aN.unbind(au,aZ,false);aN.unbind(R,I,false);if(P){aN.unbind(P,H,false)}}aN.data(y+"_intouch",a7===true)}function ae(a8,a7){var a9=a7.identifier!==undefined?a7.identifier:0;aM[a8].identifier=a9;aM[a8].start.x=aM[a8].end.x=a7.pageX||a7.clientX;aM[a8].start.y=aM[a8].end.y=a7.pageY||a7.clientY;return aM[a8]}function aD(a7){var a9=a7.identifier!==undefined?a7.identifier:0;var a8=Z(a9);a8.end.x=a7.pageX||a7.clientX;a8.end.y=a7.pageY||a7.clientY;return a8}function Z(a8){for(var a7=0;a7<aM.length;a7++){if(aM[a7].identifier==a8){return aM[a7]}}}function af(){var a7=[];for(var a8=0;a8<=5;a8++){a7.push({start:{x:0,y:0},end:{x:0,y:0},identifier:0})}return a7}function aE(a7,a8){a8=Math.max(a8,aP(a7));J[a7].distance=a8}function aP(a7){return J[a7].distance}function X(){var a7={};a7[o]=ar(o);a7[n]=ar(n);a7[d]=ar(d);a7[v]=ar(v);return a7}function ar(a7){return{direction:a7,distance:0}}function aI(){return aY-Q}function ap(ba,a9){var a8=Math.abs(ba.x-a9.x);var a7=Math.abs(ba.y-a9.y);return Math.round(Math.sqrt(a8*a8+a7*a7))}function a3(a7,a8){var a9=(a8/a7)*1;return a9.toFixed(2)}function an(){if(D<1){return w}else{return c}}function aO(a8,a7){return Math.round(Math.sqrt(Math.pow(a7.x-a8.x,2)+Math.pow(a7.y-a8.y,2)))}function aA(ba,a8){var a7=ba.x-a8.x;var bc=a8.y-ba.y;var a9=Math.atan2(bc,a7);var bb=Math.round(a9*180/Math.PI);if(bb<0){bb=360-Math.abs(bb)}return bb}function aH(a8,a7){var a9=aA(a8,a7);if((a9<=45)&&(a9>=0)){return o}else{if((a9<=360)&&(a9>=315)){return o}else{if((a9>=135)&&(a9<=225)){return n}else{if((a9>45)&&(a9<135)){return v}else{return d}}}}}function ao(){var a7=new Date();return a7.getTime()}function aU(a7){a7=e(a7);var a9=a7.offset();var a8={left:a9.left,right:a9.left+a7.outerWidth(),top:a9.top,bottom:a9.top+a7.outerHeight()};return a8}function B(a7,a8){return(a7.x>a8.left&&a7.x<a8.right&&a7.y>a8.top&&a7.y<a8.bottom)}}})(jQuery);

L'autre avec LiquidSlider.min.js

Spoiler:

Code:: /*!
* Liquid Slider v2.0.10
* http://liquidslider.com
* GPL license
*/
;if(typeof Object.create!=="function"){Object.create=function(b){function a(){}a.prototype=b;return new a()}}(function(d,c,a,e){var b={makeResponsive:function(){var f=this;d(f.sliderId+"-wrapper").addClass("ls-responsive").css({"max-width":d(f.sliderId+" .panel:first-child").width(),width:"100%"});d(f.sliderId+" .panel-container").css("width",100*f.panelCountTotal+f.pSign);d(f.sliderId+" .panel").css("width",100/f.panelCountTotal+f.pSign);if(f.options.hideArrowsWhenMobile){f.leftWrapperPadding=d(f.sliderId+"-wrapper").css("padding-left");f.rightWrapperPadding=(f.$sliderWrap).css("padding-right")}f.responsiveEvents();d(c).bind("resize",function(){f.responsiveEvents();clearTimeout(f.resizingTimeout);f.resizingTimeout=setTimeout(function(){var g=(f.options.autoHeight)?f.getHeight():f.getHeighestPanel(f.nextPanel);f.adjustHeight(false,g)},500)})},responsiveEvents:function(){var g=this,f=(g.options.hideArrowsThreshold||g.options.mobileUIThreshold||(g.totalNavWidth+10));if((g.$sliderId).outerWidth()<f){if(g.options.mobileNavigation){(g.navigation).css("display","none");(g.dropdown).css("display","block");(g.dropdownSelect).css("display","block");d(g.sliderId+"-nav-select").val(g.options.mobileNavDefaultText)}if(g.options.dynamicArrows){if(g.options.hideArrowsWhenMobile){(g.leftArrow).remove().length=0;(g.rightArrow).remove().length=0}else{if(!g.options.dynamicArrowsGraphical){(g.leftArrow).css("margin-"+g.options.dynamicTabsPosition,"0");(g.rightArrow).css("margin-"+g.options.dynamicTabsPosition,"0")}}}}else{if(g.options.mobileNavigation){(g.navigation).css("display","block");(g.dropdown).css("display","none");(g.dropdownSelect).css("display","none")}if(g.options.dynamicArrows){if(g.options.hideArrowsWhenMobile&&(!(g.leftArrow).length||!(g.rightArrow).length)){g.addArrows();g.registerArrows()}else{if(!g.options.dynamicArrowsGraphical){(g.leftArrow).css("margin-"+g.options.dynamicTabsPosition,(g.navigation).css("height"));(g.rightArrow).css("margin-"+g.options.dynamicTabsPosition,(g.navigation).css("height"))}}}}d(g.sliderId+"-wrapper").css("width","100%");if(g.options.mobileNavigation){(g.dropdownSelect).change(function(){g.setNextPanel(parseInt(d(this).val().split("tab")[1],10)-1)})}},addNavigation:function(i){var h=this,f="<"+h.options.navElementTag+' class="ls-nav"><ul id="'+(h.$elem).attr("id")+'-nav-ul"></ul></'+h.options.navElementTag+">";if(h.options.dynamicTabsPosition==="bottom"){(h.$sliderId).after(f)}else{(h.$sliderId).before(f)}if(h.options.mobileNavigation){var j=(h.options.mobileNavDefaultText)?'<option disabled="disabled" selected="selected">'+h.options.mobileNavDefaultText+"</option>":null,g='<div class="ls-select-box"><select id="'+(h.$elem).attr("id")+'-nav-select" name="navigation">'+j+"</select></div>";h.navigation=d(h.sliderId+"-nav-ul").before(g);h.dropdown=d(h.sliderId+"-wrapper .ls-select-box");h.dropdownSelect=d(h.sliderId+"-nav-select");d.each((h.$elem).find(h.options.panelTitleSelector),function(k){d((h.$sliderWrap)).find(".ls-select-box select").append('<option value="tab'+(k+1)+'">'+d(this).text()+"</option>")})}d.each((h.$elem).find(h.options.panelTitleSelector),function(k){d((h.$sliderWrap)).find(".ls-nav ul").append('<li class="tab'+(k+1)+'"><a class="'+(i||"")+'" href="#'+(k+1)+'">'+h.getNavInsides(this)+"</a></li>");if(!h.options.includeTitle){d(this).remove()}})},getNavInsides:function(f){return(this.options.dynamicTabsHtml)?d(f).html():d(f).text()},alignNavigation:function(){var f=this,g=(f.options.dynamicArrowsGraphical)?"-arrow":"";if(f.options.dynamicTabsAlign!=="center"){if(!f.options.responsive){d((f.$sliderWrap)).find(".ls-nav ul").css("margin-"+f.options.dynamicTabsAlign,d((f.$sliderWrap)).find(".ls-nav-"+f.options.dynamicTabsAlign+g).outerWidth(true)+parseInt((f.$sliderId).css("margin-"+f.options.dynamicTabsAlign),10))}d((f.$sliderWrap)).find(".ls-nav ul").css("float",f.options.dynamicTabsAlign)}f.totalNavWidth=d((f.$sliderWrap)).find(".ls-nav ul").outerWidth(true);if(f.options.dynamicTabsAlign==="center"){f.totalNavWidth=0;d((f.$sliderWrap)).find(".ls-nav li a").each(function(){f.totalNavWidth+=d(this).outerWidth(true)});d((f.$sliderWrap)).find(".ls-nav ul").css("width",f.totalNavWidth+1)}},registerNav:function(){var f=this;(f.$sliderWrap).find("[class^=ls-nav] li").on("click",function(){f.setNextPanel(parseInt(d(this).attr("class").split("tab")[1],10)-1);return false})},addArrows:function(g){var f=this,h=(f.options.dynamicArrowsGraphical)?"-arrow ":" ";(f.$sliderWrap).addClass("arrows");if(f.options.dynamicArrowsGraphical){f.options.dynamicArrowLeftText="";f.options.dynamicArrowRightText=""}(f.$sliderId).before('<div class="ls-nav-left'+h+(g||"")+'"><a href="#">'+f.options.dynamicArrowLeftText+"</a></div>");(f.$sliderId).after('<div class="ls-nav-right'+h+(g||"")+'"><a href="#">'+f.options.dynamicArrowRightText+"</a></div>");f.leftArrow=d(f.sliderId+"-wrapper [class^=ls-nav-left]").css("visibility","hidden").addClass("ls-hidden");f.rightArrow=d(f.sliderId+"-wrapper [class^=ls-nav-right]").css("visibility","hidden").addClass("ls-hidden");if(!f.options.hoverArrows){f.hideShowArrows(e,true,true,false)}},hideShowArrows:function(k,h,m,l){var i=this,j=(typeof k!=="undefined")?k:i.options.fadeOutDuration,f=(typeof k!=="undefined")?k:i.options.fadeInDuration,g=h?"visible":"hidden";if(!m&&(l||(i.sanatizeNumber(i.nextPanel)===1))){i.leftArrow.stop().fadeTo(j,0,function(){d(this).css("visibility",g).addClass("ls-hidden")})}else{if(m||i.leftArrow.hasClass("ls-hidden")){i.leftArrow.stop().css("visibility","visible").fadeTo(f,1).removeClass("ls-hidden")}}if(!m&&(l||(i.sanatizeNumber(i.nextPanel)===i.panelCount))){i.rightArrow.stop().fadeTo(j,0,function(){d(this).css("visibility",g).addClass("ls-hidden")})}else{if(m||i.rightArrow.hasClass("ls-hidden")){i.rightArrow.stop().css("visibility","visible").fadeTo(f,1).removeClass("ls-hidden")}}},registerArrows:function(){var f=this;d((f.$sliderWrap).find("[class^=ls-nav-]")).on("click",function(){f.setNextPanel(d(this).attr("class").split(" ")[0].split("-")[2])})},registerCrossLinks:function(){var f=this;f.crosslinks=d("[data-liquidslider-ref*="+(f.sliderId).split("#")[1]+"]");(f.crosslinks).on("click",function(g){if(f.options.autoSlide===true){f.startAutoSlide(true)}f.setNextPanel(f.getPanelNumber((d(this).attr("href").split("#")[1]),f.options.panelTitleSelector));g.preventDefault()});f.updateClass()},registerTouch:function(){var f=this,g=f.options.swipeArgs||{fallbackToMouseEvents:false,allowPageScroll:"vertical",swipe:function(i,h){if(h==="up"||h==="down"){return false}f.swipeDir=(h==="left")?"right":"left";f.setNextPanel(f.swipeDir)}};d(f.sliderId+" .panel").swipe(g)},registerKeyboard:function(){var f=this;d(a).keydown(function(h){var g=h.keyCode||h.which;if(h.target.type!=="textarea"&&h.target.type!=="textbox"){if(!f.options.forceAutoSlide){d(this).trigger("click")}if(g===f.options.leftKey){f.setNextPanel("right")}if(g===f.options.rightKey){f.setNextPanel("left")}d.each(f.options.panelKeys,function(i,j){if(g===j){f.setNextPanel(i-1)}})}})},autoSlide:function(){var f=this;if(f.options.autoSlideInterval<f.options.slideEaseDuration){f.options.autoSlideInterval=(f.options.slideEaseDuration>f.options.heightEaseDuration)?f.options.slideEaseDuration:f.options.heightEaseDuration}f.autoSlideTimeout=setTimeout(function(){f.setNextPanel(f.options.autoSlideDirection);f.autoSlide()},f.options.autoSlideInterval)},stopAutoSlide:function(){var f=this;f.options.autoSlide=false;clearTimeout(f.autoSlideTimeout)},startAutoSlide:function(g){var f=this;f.options.autoSlide=true;if(!g){f.setNextPanel(f.options.autoSlideDirection)}f.autoSlide(clearTimeout(f.autoSlideTimeout))},updateHashTags:function(){var f=this,g=(f.nextPanel===f.panelCount)?0:f.nextPanel;c.location.hash=f.getFromPanel(f.options.hashTitleSelector,g)},adjustHeight:function(h,f,j,i){var g=this;if(h||g.useCSS){if(h){g.configureCSSTransitions("0","0")}(g.$sliderId).height(f);if(h){g.configureCSSTransitions()}return}(g.$sliderId).animate({height:f+"px"},{easing:j||g.options.heightEaseFunction,duration:i||g.options.heightEaseDuration,queue:false})},getHeight:function(f){var g=this;f=f||g.$panelClass.eq(g.sanatizeNumber(g.nextPanel)-1).outerHeight(true);f=(f<g.options.minHeight)?g.options.minHeight:f;return f},addPreloader:function(){var f=this;d(f.sliderId+"-wrapper").append('<div class="ls-preloader"></div>')},removePreloader:function(){var f=this;d(f.sliderId+"-wrapper .ls-preloader").fadeTo("slow",0,function(){d(this).remove()})},init:function(g,h){var f=this;f.elem=h;f.$elem=d(h);d("body").removeClass("no-js");f.sliderId="#"+(f.$elem).attr("id");f.$sliderId=d(f.sliderId);f.options=d.extend({},d.fn.liquidSlider.options,g);f.pSign=(f.options.responsive)?"%":"px";if(f.options.responsive){f.determineAnimationType()}else{f.options.mobileNavigation=false;f.options.hideArrowsWhenMobile=false}if(f.options.slideEaseFunction==="animate.css"){if(!f.useCSS){f.options.slideEaseFunction=f.options.slideEaseFunctionFallback}else{f.options.continuous=false;f.animateCSS=true}}f.build();f.events();if(!f.options.responsive&&f.options.dynamicArrows){f.$sliderWrap.width(f.$sliderId.outerWidth(true)+f.leftArrow.outerWidth(true)+f.rightArrow.outerWidth(true))}f.loaded=true;d(c).bind("load",function(){f.options.preload.call(f)})},build:function(){var f=this,h;if((f.$sliderId).parent().attr("class")!=="ls-wrapper"){(f.$sliderId).wrap('<div id="'+(f.$elem).attr("id")+'-wrapper" class="ls-wrapper"></div>')}f.$sliderWrap=d(f.sliderId+"-wrapper");if(f.options.preloader){f.addPreloader()}d(f.sliderId).children().addClass((f.$elem).attr("id")+"-panel panel");f.panelClass=f.sliderId+" ."+(f.$elem).attr("id")+"-panel:not(.clone)";f.$panelClass=d(f.panelClass);(f.$panelClass).wrapAll('<div class="panel-container"></div>');(f.$panelClass).wrapInner('<div class="panel-wrapper"></div>');f.panelContainer=(f.$panelClass).parent();f.$panelContainer=f.panelContainer;if(f.options.slideEaseFunction==="fade"){(f.$panelClass).addClass("fade");f.options.continuous=false;f.fade=true}if(f.options.dynamicTabs){f.addNavigation()}else{f.options.mobileNavigation=false}if(f.options.dynamicArrows){f.addArrows()}else{f.options.hoverArrows=false;f.options.hideSideArrows=false;f.options.hideArrowsWhenMobile=false}h=((f.$leftArrow)&&(f.$leftArrow).css("position")==="absolute")?0:1;f.totalSliderWidth=(f.$sliderId).outerWidth(true)+(d(f.$leftArrow).outerWidth(true))*h+(d(f.$rightArrow).outerWidth(true))*h;d((f.$sliderWrap)).css("width",f.totalSliderWidth);if(f.options.dynamicTabs){f.alignNavigation()}if(f.options.hideSideArrows){f.options.continuous=false}if(f.options.continuous){(f.$panelContainer).prepend((f.$panelContainer).children().last().clone().addClass("clone"));(f.$panelContainer).append((f.$panelContainer).children().eq(1).clone().addClass("clone"))}var g=(f.options.continuous)?2:0;f.panelCount=d(f.panelClass).length;f.panelCountTotal=(f.fade)?1:f.panelCount+g;f.panelWidth=d(f.panelClass).outerWidth();f.totalWidth=f.panelCountTotal*f.panelWidth;d(f.sliderId+" .panel-container").css("width",f.totalWidth);f.slideDistance=(f.options.responsive)?100:d(f.sliderId).outerWidth();if(f.useCSS){f.totalWidth=100*f.panelCountTotal;f.slideDistance=100/f.panelCountTotal}if(f.options.responsive){f.makeResponsive()}f.prepareTransition(f.getFirstPanel(),true);f.updateClass()},determineAnimationType:function(){var f=this,l="animation",j="",h="Webkit Moz O ms Khtml".split(" "),k="",g=0;f.useCSS=false;if(f.elem.style.animationName){f.useCSS=true}if(f.useCSS===false){for(g=0;g<h.length;g++){if(f.elem.style[h[g]+"AnimationName"]!==e){k=h[g];l=k+"Animation";j="-"+k.toLowerCase()+"-";f.useCSS=true;break}}}if(a.documentElement.clientWidth>f.options.useCSSMaxWidth){f.useCSS=false}},configureCSSTransitions:function(g,f){var h=this,i,j;h.easing={easeOutCubic:"cubic-bezier(.215,.61,.355,1)",easeInOutCubic:"cubic-bezier(.645,.045,.355,1)",easeInCirc:"cubic-bezier(.6,.04,.98,.335)",easeOutCirc:"cubic-bezier(.075,.82,.165,1)",easeInOutCirc:"cubic-bezier(.785,.135,.15,.86)",easeInExpo:"cubic-bezier(.95,.05,.795,.035)",easeOutExpo:"cubic-bezier(.19,1,.22,1)",easeInOutExpo:"cubic-bezier(1,0,0,1)",easeInQuad:"cubic-bezier(.55,.085,.68,.53)",easeOutQuad:"cubic-bezier(.25,.46,.45,.94)",easeInOutQuad:"cubic-bezier(.455,.03,.515,.955)",easeInQuart:"cubic-bezier(.895,.03,.685,.22)",easeOutQuart:"cubic-bezier(.165,.84,.44,1)",easeInOutQuart:"cubic-bezier(.77,0,.175,1)",easeInQuint:"cubic-bezier(.755,.05,.855,.06)",easeOutQuint:"cubic-bezier(.23,1,.32,1)",easeInOutQuint:"cubic-bezier(.86,0,.07,1)",easeInSine:"cubic-bezier(.47,0,.745,.715)",easeOutSine:"cubic-bezier(.39,.575,.565,1)",easeInOutSine:"cubic-bezier(.445,.05,.55,.95)",easeInBack:"cubic-bezier(.6,-.28,.735,.045)",easeOutBack:"cubic-bezier(.175,.885,.32,1.275)",easeInOutBack:"cubic-bezier(.68,-.55,.265,1.55)"};if(h.useCSS){i="all "+(g||h.options.slideEaseDuration)+"ms "+h.easing[h.options.slideEaseFunction];j="all "+(f||h.options.heightEaseDuration)+"ms "+h.easing[h.options.heightEaseFunction];d(h.panelContainer).css({"-webkit-transition":i,"-moz-transition":i,"-ms-transition":i,"-o-transition":i,transition:i});if(h.options.autoHeight){(h.$sliderId).css({"-webkit-transition":j,"-moz-transition":j,"-ms-transition":j,"-o-transition":j,transition:j})}}},transitionFade:function(){var f=this;d(f.panelClass).eq(f.nextPanel).fadeTo(f.options.fadeInDuration,1).css("z-index",1);d(f.panelClass).eq(f.prevPanel).fadeTo(f.options.fadeOutDuration,0).css("z-index",0);f.callback(f.options.callback,true)},hover:function(){var f=this;(f.$sliderWrap).hover(function(){if(f.options.hoverArrows){f.hideShowArrows(f.options.fadeInDuration,true,true,false)}if(f.options.pauseOnHover){clearTimeout(f.autoSlideTimeout)}},function(){if(f.options.hoverArrows){f.hideShowArrows(f.options.fadeOutnDuration,true,false,true)}if(f.options.pauseOnHover&&f.options.autoSlide){f.startAutoSlide(true)}})},events:function(){var f=this;if(f.options.dynamicArrows){f.registerArrows()}if(f.options.crossLinks){f.registerCrossLinks()}if(f.options.dynamicTabs){f.registerNav()}if(f.options.swipe){f.registerTouch()}if(f.options.keyboardNavigation){f.registerKeyboard()}(f.$sliderWrap).find("*").on("click",function(){if(f.options.forceAutoSlide){f.startAutoSlide(true)}else{if(f.options.autoSlide){f.stopAutoSlide()}}});f.hover()},setNextPanel:function(g){var f=this;if(g===f.nextPanel){return}f.prevPanel=f.nextPanel;if(f.loaded){if(typeof g==="number"){f.nextPanel=g}else{f.nextPanel+=(~~(g==="right")||-1);if(!f.options.continuous){f.nextPanel=(f.nextPanel<0)?f.panelCount-1:(f.nextPanel%f.panelCount)}}if(f.fade||f.animateCSS){f.prepareTransition(f.nextPanel)}else{f.verifyPanel()}}},getFirstPanel:function(){var g=this,f;if(g.options.hashLinking){f=g.getPanelNumber(c.location.hash,g.options.hashTitleSelector);if(typeof(f)!=="number"){f=0}}return(f)?f:g.options.firstPanelToLoad-1},getPanelNumber:function(i,h){var g=this,j,f=i.replace("#","").toLowerCase();(g.$panelClass).each(function(k){j=g.convertRegex(d(this).find(h).text());if(j===f){f=k+1}});return(parseInt(f,10)?parseInt(f,10)-1:f)},getFromPanel:function(g,h){var f=this;return f.convertRegex(f.$panelClass.find(g).eq(h).text())},convertRegex:function(f){return f.replace(/[^\w -]+/g,"").replace(/ +/g,"-").toLowerCase()},updateClass:function(){var f=this;if(f.options.dynamicTabs){d((f.$sliderWrap)).find(".tab"+f.sanatizeNumber(f.nextPanel)+":first a").addClass("current").parent().siblings().children().removeClass("current")}if(f.options.crossLinks&&f.crosslinks){(f.crosslinks).not(f.nextPanel).removeClass("currentCrossLink");(f.crosslinks).each(function(){if(d(this).attr("href")===("#"+f.getFromPanel(f.options.panelTitleSelector,f.sanatizeNumber(f.nextPanel)-1))){d(this).addClass("currentCrossLink")}})}},sanatizeNumber:function(f){var g=this;if(f>=g.panelCount){return 1}else{if(f<=-1){return g.panelCount}else{return f+1}}},finalize:function(){var g=this;var f=(g.options.autoHeight)?g.getHeight():g.getHeighestPanel(g.nextPanel);if(g.options.autoHeight){g.adjustHeight(true,f)}if(g.options.autoSlide){g.autoSlide()}if(g.options.preloader){g.removePreloader()}g.onload()},callback:function(g,h){var f=this;if(g&&f.loaded){if(f.useCSS&&typeof h!=="undefined"){d(".panel-container").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(i){g.call(f)})}else{setTimeout(function(){g.call(f)},f.options.slideEaseDuration+50)}}},onload:function(){var f=this;f.options.onload.call(f)},prepareTransition:function(j,h,g,i){var f=this;f.nextPanel=j||0;if(!g){f.pretransition(f.options.pretransition)}f.noAnimation=h;f.noPosttransition=i;if(!f.loaded){f.transition()}else{f.options.pretransition.call(f)}},pretransition:function(){var f=this,g;if(f.options.hashLinking){f.updateHashTags()}if(f.options.mobileNavigation){f.dropdownSelect.val("tab"+(f.nextPanel+1))}if(f.options.hideSideArrows){f.hideShowArrows()}f.updateClass()},getTransitionMargin:function(){var f=this;return -(f.nextPanel*f.slideDistance)-(f.slideDistance*~~(f.options.continuous))},transition:function(){var f=this,g=f.getTransitionMargin();if(f.animateCSS&&f.loaded){f.transitionOutAnimateCSS();return false}if((g+f.pSign)!==(f.panelContainer).css("margin-left")||(g!==-100)){if(f.options.autoHeight&&!f.animateCSS){f.adjustHeight(true,f.getHeight())}if(f.fade){f.transitionFade()}else{if(f.animateCSS){f.transitionInAnimateCSS(g)}else{if(f.useCSS){f.transitionCSS(g,f.noAnimation)}else{f.transitionjQuery(g,f.noAnimation)}}}}if(!f.noPosttransition){f.callback(f.options.callback)}},transitionOutAnimateCSS:function(){var f=this;d(f.panelClass).removeClass(f.options.animateIn+" animated");d(f.panelClass).eq(f.prevPanel).addClass("animated "+f.options.animateOut);f.callback(f.transitionInAnimateCSS,e)},transitionInAnimateCSS:function(){var f=this;if(f.options.autoHeight){f.adjustHeight(false,f.getHeight())}f.transitionCSS(f.getTransitionMargin(),!f.loaded);d(f.panelClass).removeClass(f.options.animateOut+" animated");d(f.panelClass).eq(f.nextPanel).addClass("animated "+f.options.animateIn);f.callback(f.options.callback,e)},transitionCSS:function(h,g){var f=this;if(g){f.configureCSSTransitions("0","0")}(f.panelContainer).css({"-webkit-transform":"translate3d("+h+f.pSign+", 0, 0)","-moz-transform":"translate3d("+h+f.pSign+", 0, 0)","-ms-transform":"translate3d("+h+f.pSign+", 0, 0)","-o-transform":"translate3d("+h+f.pSign+", 0, 0)",transform:"translate3d("+h+f.pSign+", 0, 0)"});if(g){f.callback(function(){f.configureCSSTransitions()})}else{f.configureCSSTransitions()}},transitionjQuery:function(h,g){var f=this;if(g){(f.panelContainer).css("margin-left",h+f.pSign)}else{(f.panelContainer).animate({"margin-left":h+f.pSign},{easing:f.options.slideEaseFunction,duration:f.options.slideEaseDuration,queue:false})}},getHeighestPanel:function(){var g=this,f,h=0;g.$panelClass.each(function(){f=d(this).outerHeight(true);h=(f>h)?f:h});if(!g.options.autoHeight){return h}},verifyPanel:function(){var g=this,f=false;if(g.options.continuous){if(g.nextPanel>g.panelCount){g.nextPanel=g.panelCount;g.setNextPanel(g.panelCount)}else{if(g.nextPanel<-1){g.nextPanel=-1;g.setNextPanel(-1)}else{if((!f)&&((g.nextPanel===g.panelCount)||(g.nextPanel===-1))){g.prepareTransition(g.nextPanel);g.updateClass();clearTimeout(h);var h=setTimeout(function(){if(g.nextPanel===g.panelCount){g.prepareTransition(0,true,true,true)}else{if(g.nextPanel===-1){g.prepareTransition(g.panelCount-1,true,true,true)}}},g.options.slideEaseDuration+50)}else{f=true;g.prepareTransition(g.nextPanel)}}}}else{if(g.nextPanel===g.panelCount){g.nextPanel=0}else{if(g.nextPanel===-1){g.nextPanel=(g.panelCount-1)}}g.prepareTransition(g.nextPanel)}}};d.fn.liquidSlider=function(f){return this.each(function(){var g=Object.create(b);g.init(f,this);d.data(this,"liquidSlider",g)})};d.fn.liquidSlider.options={autoHeight:true,minHeight:0,heightEaseDuration:1500,heightEaseFunction:"easeInOutExpo",slideEaseDuration:1500,slideEaseFunction:"easeInOutExpo",slideEaseFunctionFallback:"easeInOutExpo",animateIn:"bounceInRight",animateOut:"bounceOutRight",continuous:true,fadeInDuration:500,fadeOutDuration:500,autoSlide:false,autoSlideDirection:"right",autoSlideInterval:6000,forceAutoSlide:false,pauseOnHover:false,dynamicArrows:true,dynamicArrowsGraphical:true,dynamicArrowLeftText:"« left",dynamicArrowRightText:"right »",hideSideArrows:false,hideSideArrowsDuration:750,hoverArrows:true,hoverArrowDuration:250,dynamicTabs:true,dynamicTabsHtml:true,includeTitle:true,panelTitleSelector:".title",dynamicTabsAlign:"left",dynamicTabsPosition:"top",navElementTag:"div",firstPanelToLoad:1,crossLinks:false,hashLinking:false,hashTitleSelector:".title",keyboardNavigation:false,leftKey:39,rightKey:37,panelKeys:{1:49,2:50,3:51,4:52},responsive:true,mobileNavigation:true,mobileNavDefaultText:"Menu",mobileUIThreshold:0,hideArrowsWhenMobile:true,hideArrowsThreshold:0,useCSSMaxWidth:2200,preload:function(){this.finalize()},onload:function(){},pretransition:function(){this.transition()},callback:function(){},preloader:false,swipe:true,swipeArgs:e}})(jQuery,window,document);

Et enfin un dernier pour lancer le code (il ne faut pas mettre les balises script ^^)

Code:: $(function(){$('#slider-id').liquidSlider()});

Et ça marche pour le premier exemple basique ^^

Il suffirait que tu ai oublié de copier / coller le début ou la fin d'un fichier, ou quelque chose comme ça, et ça marche plus Sad

Essaye avec ce que je t'ai copié directement, et dis moi si c'est bon maintenant ^^.

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 16:06

J'essayere ca ... le derniere code JS est tellement long qu'il fait la page CSS de mon forum bugger :/ Je vais cependant l'installer sur mon forum officiel que je construit, ce sera plus simple ^^

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 16:33

Bon, je t'adore ça marche Very Happy

Merci infiniment pour ton aide Nihil ! Razz

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 16:48

De rien, contente d'avoir pu t'aider ^^
Sache que normalement le CSS peut être simplifié, y a pleins de trucs en trop. Ce que je te conseille c'est de regarder ce qui à l'air important ou non (par exemple il y a des trucs avec que des commentaires dedans, tu peux les enlever !).
N'hésite pas à éditer le titre de ton sujet pour mettre "résolu".

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 16:57

Okay !

Une dernièere question cependant :s J'avais cocher les option pour mon slider (sur la page où je l'ai trouver) pour faire en sorte qu'il défile sans arrêt avec un écart de tant secondes (ou millisecondes je crois). Ceci, je crois, était dans le CSS 'animate' n'est-ce pas ?

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 17:21

Non, animate.css correspond à ceci : http://kevinbatdorf.github.io/liquidslider/examples/page2.html ^^. Ce sont tous les petits effets "bonus" en plus d'animation.

Pour le faire défiler automatiquement, remplace le code JS pour lancer le script (le seul court xDDD) par ceci :

Code:: $(function(){
$('#slider-id').liquidSlider({
autoSlide: true
}
)});

C'est le point 3 de la page d'exemple : http://kevinbatdorf.github.io/liquidslider/examples/page1.html#how-to-edit-settings

Tu trouveras plus d'informations sur les réglages ici : http://liquidslider.com/documentation/#autoslide-options

Sujet: Re: Problème avec un Slider :s [resolu] Sam 12 Oct 2013, 21:46

Wow, infinis de mercis !!! Very Happy

Problème avec un Slider :s [resolu]

Problème avec un Slider :s [resolu]

Sujets similaires

Sujets similaires

Partenaires Or