Problème installation slider

[angelejunior]

Bonjour à tous,
j'aimerais installer un slider sur mon forum, mais voilà le problème, ça ne fonctionne pas
J'ai activer la gestion des codes Javascript, mais ça ne donne rien, ça déforme mes catégories et enlève mon fond
Mon forum test : http://testfo.forumactif.org/
Un petit coup de pouce s'il vous plait
Voilà le slider :
http://tympanus.net/Development/ParallaxContentSlider/index2.html
j'ai télécharger les codes ici : http://www.freshdesignweb.com/jquery-image-slider-slideshow.html

Le code Javascript :

Code:

(function( $, undefined ) {
      
   /*
    * Slider object.
    */
   $.Slider             = function( options, element ) {
   
      this.$el   = $( element );
      
      this._init( options );
      
   };
   
   $.Slider.defaults       = {
      current      : 0,    // index of current slide
      bgincrement   : 50,   // increment the bg position (parallax effect) when sliding
      autoplay   : false,// slideshow on / off
      interval   : 4000  // time between transitions
    };
   
   $.Slider.prototype    = {
      _init             : function( options ) {
         
         this.options       = $.extend( true, {}, $.Slider.defaults, options );
         
         this.$slides      = this.$el.children('div.da-slide');
         this.slidesCount   = this.$slides.length;
         
         this.current      = this.options.current;
         
         if( this.current < 0 || this.current >= this.slidesCount ) {
         
            this.current   = 0;
         
         }
         
         this.$slides.eq( this.current ).addClass( 'da-slide-current' );
         
         var $navigation      = $( '<nav class="da-dots"/>' );
         for( var i = 0; i < this.slidesCount; ++i ) {
         
            $navigation.append( '<span/>' );
         
         }
         $navigation.appendTo( this.$el );
         
         this.$pages         = this.$el.find('nav.da-dots > span');
         this.$navNext      = this.$el.find('span.da-arrows-next');
         this.$navPrev      = this.$el.find('span.da-arrows-prev');
         
         this.isAnimating   = false;
         
         this.bgpositer      = 0;
         
         this.cssAnimations   = Modernizr.cssanimations;
         this.cssTransitions   = Modernizr.csstransitions;
         
         if( !this.cssAnimations || !this.cssAnimations ) {
            
            this.$el.addClass( 'da-slider-fb' );
         
         }
         
         this._updatePage();
         
         // load the events
         this._loadEvents();
         
         // slideshow
         if( this.options.autoplay ) {
         
            this._startSlideshow();
         
         }
         
      },
      _navigate         : function( page, dir ) {
         
         var $current   = this.$slides.eq( this.current ), $next, _self = this;
         
         if( this.current === page || this.isAnimating ) return false;
         
         this.isAnimating   = true;
         
         // check dir
         var classTo, classFrom, d;
         
         if( !dir ) {
         
            ( page > this.current ) ? d = 'next' : d = 'prev';
         
         }
         else {
         
            d = dir;
         
         }
            
         if( this.cssAnimations && this.cssAnimations ) {
            
            if( d === 'next' ) {
            
               classTo      = 'da-slide-toleft';
               classFrom   = 'da-slide-fromright';
               ++this.bgpositer;
            
            }
            else {
            
               classTo      = 'da-slide-toright';
               classFrom   = 'da-slide-fromleft';
               --this.bgpositer;
            
            }
            
            this.$el.css( 'background-position' , this.bgpositer * this.options.bgincrement + '% 0%' );
         
         }
         
         this.current   = page;
         
         $next         = this.$slides.eq( this.current );
         
         if( this.cssAnimations && this.cssAnimations ) {
         
            var rmClasses   = 'da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright';
            $current.removeClass( rmClasses );
            $next.removeClass( rmClasses );
            
            $current.addClass( classTo );
            $next.addClass( classFrom );
            
            $current.removeClass( 'da-slide-current' );
            $next.addClass( 'da-slide-current' );
            
         }
         
         // fallback
         if( !this.cssAnimations || !this.cssAnimations ) {
            
            $next.css( 'left', ( d === 'next' ) ? '100%' : '-100%' ).stop().animate( {
               left : '0%'
            }, 1000, function() {
               _self.isAnimating = false;
            });
            
            $current.stop().animate( {
               left : ( d === 'next' ) ? '-100%' : '100%'
            }, 1000, function() {
               $current.removeClass( 'da-slide-current' );
            });
            
         }
         
         this._updatePage();
         
      },
      _updatePage         : function() {
      
         this.$pages.removeClass( 'da-dots-current' );
         this.$pages.eq( this.current ).addClass( 'da-dots-current' );
      
      },
      _startSlideshow      : function() {
      
         var _self   = this;
         
         this.slideshow   = setTimeout( function() {
            
            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );
            
            if( _self.options.autoplay ) {
            
               _self._startSlideshow();
            
            }
         
         }, this.options.interval );
      
      },
      page            : function( idx ) {
         
         if( idx >= this.slidesCount || idx < 0 ) {
         
            return false;
         
         }
         
         if( this.options.autoplay ) {
         
            clearTimeout( this.slideshow );
            this.options.autoplay   = false;
         
         }
         
         this._navigate( idx );
         
      },
      _loadEvents         : function() {
         
         var _self = this;
         
         this.$pages.on( 'click.cslider', function( event ) {
            
            _self.page( $(this).index() );
            return false;
            
         });
         
         this.$navNext.on( 'click.cslider', function( event ) {
            
            if( _self.options.autoplay ) {
            
               clearTimeout( _self.slideshow );
               _self.options.autoplay   = false;
            
            }
            
            var page = ( _self.current < _self.slidesCount - 1 ) ? page = _self.current + 1 : page = 0;
            _self._navigate( page, 'next' );
            return false;
            
         });
         
         this.$navPrev.on( 'click.cslider', function( event ) {
            
            if( _self.options.autoplay ) {
            
               clearTimeout( _self.slideshow );
               _self.options.autoplay   = false;
            
            }
            
            var page = ( _self.current > 0 ) ? page = _self.current - 1 : page = _self.slidesCount - 1;
            _self._navigate( page, 'prev' );
            return false;
            
         });
         
         if( this.cssTransitions ) {
         
            if( !this.options.bgincrement ) {
               
               this.$el.on( 'webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider', function( event ) {
                  
                  if( event.originalEvent.animationName === 'toRightAnim4' || event.originalEvent.animationName === 'toLeftAnim4' ) {
                     
                     _self.isAnimating   = false;
                  
                  }   
                  
               });
               
            }
            else {
            
               this.$el.on( 'webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider', function( event ) {
               
                  if( event.target.id === _self.$el.attr( 'id' ) )
                     _self.isAnimating   = false;
                  
               });
            
            }
         
         }
         
      }
   };
   
   var logError          = function( message ) {
      if ( this.console ) {
         console.error( message );
      }
   };
   
   $.fn.cslider         = function( options ) {
   
      if ( typeof options === 'string' ) {
         
         var args = Array.prototype.slice.call( arguments, 1 );
         
         this.each(function() {
         
            var instance = $.data( this, 'cslider' );
            
            if ( !instance ) {
               logError( "cannot call methods on cslider prior to initialization; " +
               "attempted to call method '" + options + "'" );
               return;
            }
            
            if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
               logError( "no such method '" + options + "' for cslider instance" );
               return;
            }
            
            instance[ options ].apply( instance, args );
         
         });
      
      }
      else {
      
         this.each(function() {
         
            var instance = $.data( this, 'cslider' );
            if ( !instance ) {
               $.data( this, 'cslider', new $.Slider( options, this ) );
            }
         });
      
      }
      
      return this;
      
   };
   
})( jQuery );

Le css :

Code:

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/BebasNeue-webfont.woff') format('woff'),
        url('fonts/BebasNeue-webfont.ttf') format('truetype'),
        url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
   margin:0;
   padding:0;
}
html,body {
   margin:0;
   padding:0;
}
table {
   border-collapse:collapse;
   border-spacing:0;
}
fieldset,img {
   border:0;
}
address,caption,cite,code,dfn,th,var {
   font-style:normal;
   font-weight:normal;
}
ol,ul {
   list-style:none;
}
caption,th {
   text-align:left;
}
h1,h2,h3,h4,h5,h6 {
   font-size:100%;
   font-weight:normal;
}
q:before,q:after {
   content:'';
}
abbr,acronym { border:0;
}
section, header{
   display: block;
}
/* General Demo Style */
body{
   font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
   background: #e0e3ec url(../images/bg.png) repeat top left;
   font-weight: 400;
   font-size: 15px;
   color: #593741;
   overflow-y: scroll;
}
a{
   color: #333;
   text-decoration: none;
}
.container{
   width: 100%;
   position: relative;
   text-align: center;
}
.clr{
   clear: both;
}
.container > header{
   padding: 20px 30px 10px 30px;
   margin: 0px 20px 10px 20px;
   position: relative;
   display: block;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
   font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
   font-size: 35px;
   line-height: 35px;
   position: relative;
   font-weight: 400;
   color: #936975;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
   color: #b19099;
   text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2{
   font-size: 16px;
   font-style: italic;
   color: #593741;
   text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
/* Header Style */
.codrops-top{
   line-height: 24px;
   font-size: 11px;
   background: rgba(255, 255, 255, 0.6);
   text-transform: uppercase;
   z-index: 9999;
   position: relative;
   box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a{
   padding: 0px 10px;
   letter-spacing: 1px;
   color: #333;
   text-shadow: 0px 1px 1px #fff;
   display: block;
   float: left;
}
.codrops-top a:hover{
   background: #fff;
}
.codrops-top span.right{
   float: right;
}
.codrops-top span.right a{
   float: left;
   display: block;
}

p.codrops-demos{
   text-align:center;
   display: block;
   padding: 14px;
}
p.codrops-demos a,
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
    display: inline-block;
   border: 1px solid #b19099;
   padding: 4px 10px 3px;
   font-size: 13px;
   line-height: 18px;
   margin: 0px 3px;
   font-weight: 800;
   -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
   -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);
   box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
   color: #fff;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   background: #b19099;
   background: -moz-linear-gradient(top, #b19099 0%, #936975 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b19099), color-stop(100%,#936975));
   background: -webkit-linear-gradient(top, #b19099 0%,#936975 100%);
   background: -o-linear-gradient(top, #b19099 0%,#936975 100%);
   background: -ms-linear-gradient(top, #b19099 0%,#936975 100%);
   background: linear-gradient(top, #b19099 0%,#936975 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b19099', endColorstr='#936975',GradientType=0 );
}
p.codrops-demos a:hover{
   background: #b19099;
}
p.codrops-demos a:active{
   -webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
   -moz-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
   box-shadow: 0px 1px 1px rgba(255,255,255,0.4);
}
p.codrops-demos a.current-demo,
p.codrops-demos a.current-demo:hover{
   color: #443132;
   text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
}
#testSlide3 {
   display: inline-block;
   border: 1px solid #b19099;
   padding: 4px 10px 3px;
   margin: 0px 3px;
   color: #fff;
   background: #111;
}
/* Media Queries */
@media screen and (max-width: 767px) {
   .container > header{
      text-align: center;
   }
   p.codrops-demos {
      position: relative;
      top: auto;
      left: auto;
   }
}

Merci d'avance pour le coup de main

[Invité]

Bonjour,

Tout simplement parce que vous avez inséré du jQuery dans la gestion des codes Javascript


Cordialement.

[angelejunior]

Ok, c'est donc pas possible???

[angelejunior]

Up

[angelejunior]

Up

[angelejunior]

up

[[Nihil]]

Hello AngeleJunior

Petite question, où souhaites tu installer ton slider sur ton forum ?

On va reprendre à 0, voici un code qui fonctionne pour moi si je le met dans la PA de mon forum.

On rajouter ceci dans le javascript (il faut cocher : activer sur l'index) :

Code:

/* jQuery cslider
 * http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
 */
 
 (function(c,l){c.Slider=function(a,b){this.$el=c(b);this._init(a)};c.Slider.defaults={current:0,bgincrement:50,autoplay:!1,interval:4E3};c.Slider.prototype={_init:function(a){this.options=c.extend(!0,{},c.Slider.defaults,a);this.$slides=this.$el.children("div.da-slide");this.slidesCount=this.$slides.length;this.current=this.options.current;if(0>this.current||this.current>=this.slidesCount)this.current=0;this.$slides.eq(this.current).addClass("da-slide-current");a=c('<nav class="da-dots"/>');for(var b=
0;b<this.slidesCount;++b)a.append("<span/>");a.appendTo(this.$el);this.$pages=this.$el.find("nav.da-dots > span");this.$navNext=this.$el.find("span.da-arrows-next");this.$navPrev=this.$el.find("span.da-arrows-prev");this.isAnimating=!1;this.bgpositer=0;this.cssAnimations=Modernizr.cssanimations;this.cssTransitions=Modernizr.csstransitions;this.cssAnimations&&this.cssAnimations||this.$el.addClass("da-slider-fb");this._updatePage();this._loadEvents();this.options.autoplay&&this._startSlideshow()},_navigate:function(a,
b){var c=this.$slides.eq(this.current),e,g=this;if(this.current===a||this.isAnimating)return!1;this.isAnimating=!0;var h,k,d;b?d=b:a>this.current?d="next":d="prev";this.cssAnimations&&this.cssAnimations&&("next"===d?(h="da-slide-toleft",k="da-slide-fromright",++this.bgpositer):(h="da-slide-toright",k="da-slide-fromleft",--this.bgpositer),this.$el.css("background-position",this.bgpositer*this.options.bgincrement+"% 0%"));this.current=a;e=this.$slides.eq(this.current);this.cssAnimations&&this.cssAnimations&&
(c.removeClass("da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright"),e.removeClass("da-slide-toleft da-slide-toright da-slide-fromleft da-slide-fromright"),c.addClass(h),e.addClass(k),c.removeClass("da-slide-current"),e.addClass("da-slide-current"));this.cssAnimations&&this.cssAnimations||(e.css("left","next"===d?"100%":"-100%").stop().animate({left:"0%"},1E3,function(){g.isAnimating=!1}),c.stop().animate({left:"next"===d?"-100%":"100%"},1E3,function(){c.removeClass("da-slide-current")}));
this._updatePage()},_updatePage:function(){this.$pages.removeClass("da-dots-current");this.$pages.eq(this.current).addClass("da-dots-current")},_startSlideshow:function(){var a=this;this.slideshow=setTimeout(function(){var b=a.current<a.slidesCount-1?b=a.current+1:b=0;a._navigate(b,"next");a.options.autoplay&&a._startSlideshow()},this.options.interval)},page:function(a){if(a>=this.slidesCount||0>a)return!1;this.options.autoplay&&(clearTimeout(this.slideshow),this.options.autoplay=!1);this._navigate(a)},
_loadEvents:function(){var a=this;this.$pages.on("click.cslider",function(b){a.page(c(this).index());return!1});this.$navNext.on("click.cslider",function(b){a.options.autoplay&&(clearTimeout(a.slideshow),a.options.autoplay=!1);b=a.current<a.slidesCount-1?b=a.current+1:b=0;a._navigate(b,"next");return!1});this.$navPrev.on("click.cslider",function(b){a.options.autoplay&&(clearTimeout(a.slideshow),a.options.autoplay=!1);b=0<a.current?b=a.current-1:b=a.slidesCount-1;a._navigate(b,"prev");return!1});if(this.cssTransitions)if(this.options.bgincrement)this.$el.on("webkitTransitionEnd.cslider transitionend.cslider OTransitionEnd.cslider",
function(b){b.target.id===a.$el.attr("id")&&(a.isAnimating=!1)});else this.$el.on("webkitAnimationEnd.cslider animationend.cslider OAnimationEnd.cslider",function(b){if("toRightAnim4"===b.originalEvent.animationName||"toLeftAnim4"===b.originalEvent.animationName)a.isAnimating=!1})}};var g=function(a){this.console&&console.error(a)};c.fn.cslider=function(a){if("string"===typeof a){var b=Array.prototype.slice.call(arguments,1);this.each(function(){var f=c.data(this,"cslider");f?c.isFunction(f[a])&&
"_"!==a.charAt(0)?f[a].apply(f,b):g("no such method '"+a+"' for cslider instance"):g("cannot call methods on cslider prior to initialization; attempted to call method '"+a+"'")})}else this.each(function(){c.data(this,"cslider")||c.data(this,"cslider",new c.Slider(a,this))});return this}})(jQuery);

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-cssanimations-csstransitions-shiv-cssclasses-testprop-testallprops-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function x(a){j.cssText=a}function y(a,b){return x(prefixes.join(a+";")+(b||""))}function z(a,b){return typeof a===b}function A(a,b){return!!~(""+a).indexOf(b)}function B(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function C(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:z(f,"function")?f.bind(d||b):f}return!1}function D(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+n.join(d+" ")+d).split(" ");return z(b,"string")||z(b,"undefined")?B(e,b):(e=(a+" "+o.join(d+" ")+d).split(" "),C(e,b,c))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m="Webkit Moz O ms",n=m.split(" "),o=m.toLowerCase().split(" "),p={},q={},r={},s=[],t=s.slice,u,v={}.hasOwnProperty,w;!z(v,"undefined")&&!z(v.call,"undefined")?w=function(a,b){return v.call(a,b)}:w=function(a,b){return b in a&&z(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=t.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(t.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(t.call(arguments)))};return e}),p.cssanimations=function(){return D("animationName")},p.csstransitions=function(){return D("transition")};for(var E in p)w(p,E)&&(u=E.toLowerCase(),e[u]=p[E](),s.push((e[u]?"":"no-")+u));return x(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._domPrefixes=o,e._cssomPrefixes=n,e.testProp=function(a){return B([a])},e.testAllProps=D,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+s.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,i){var j=b(a),l=j.autoCallback;j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2})))}function i(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var j,l,m=this.yepnope.loader;if(e(a))g(a,0,m,0);else if(w(a))for(j=0;j<a.length;j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);else Object(a)===a&&i(a,m)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

Une fois cela fait, dans ton CSS tu rajoutes ceci :

Code:

    .da-slider{
      width: 100%;
      min-width: 520px;
      height: 400px;
      position: relative;
      margin: 30px auto;
      overflow: hidden;
      background: transparent url('http://image.noelshack.com/fichiers/2014/38/1411035187-waves.gif') repeat 0% 0%;
      border-top: 8px solid #efc34a;
      border-bottom: 8px solid #efc34a;
      box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
      -webkit-transition: background-position 1.4s ease-in-out 0.3s;
      -moz-transition: background-position 1.4s ease-in-out 0.3s;
      -o-transition: background-position 1.4s ease-in-out 0.3s;
      -ms-transition: background-position 1.4s ease-in-out 0.3s;
      transition: background-position 1.4s ease-in-out 0.3s;
    }
    .da-slide{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
      text-align: left;
    }
    .da-slide-current{
      z-index: 1000;
    }
    .da-slider-fb .da-slide{
      left: 100%;
    }
    .da-slider-fb  .da-slide.da-slide-current{
      left: 0px;
    }
    .da-slide h2,
    .da-slide p,
    .da-slide .da-link,
    .da-slide .da-img{
      position: absolute;
      opacity: 0;
      left: 110%;
    }
    .da-slider-fb .da-slide h2,
    .da-slider-fb .da-slide p,
    .da-slider-fb .da-slide .da-link{
      left: 10%;
      opacity: 1;
    }
    .da-slider-fb .da-slide .da-img{
      left: 60%;
      opacity: 1;
    }
    .da-slide h2{
      color: #fff;
      font-size: 66px;
      width: 50%;
      top: 60px;
      white-space: nowrap;
      z-index: 10;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
      font-family: 'Economica', Arial, sans-serif;
      font-weight: 700;
    }
    .da-slide p{
      width: 45%;
      top: 155px;
      color: #916c05;
      font-size: 18px;
      line-height: 26px;
      height: 80px;
      overflow: hidden;
      font-style: italic;
      font-family: 'Economica', Arial, sans-serif;
      font-weight: 400;
      font-style: italic;
    }
    .da-slide .da-img{
      text-align: center;
      width: 30%;
      top: 70px;
      height: 256px;
      line-height: 320px;
      left: 110%; /*60%*/
    }
    .da-slide .da-link{
      top: 270px; /*depends on p height*/
      border-radius: 30px;
      box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
      border: 8px solid rgba(255,255,255,0.8);
      padding: 2px 20px 0px;
      font-size: 18px;
      line-height: 30px;
      width: 80px;
      text-align: center;
      background: rgba(255,255,255,0.2);
    }
    .da-slide .da-link:hover{
      background: rgba(255,255,255,0.3);
    }
    .da-dots{
      width: 100%;
      position: absolute;
      text-align: center;
      left: 0px;
      bottom: 20px;
      z-index: 2000;
      -moz-user-select: none;
      -webkit-user-select: none;
    }
    .da-dots span{
      display: inline-block;
      position: relative;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #e4b42d;
      margin: 3px;
      cursor: pointer;
      box-shadow:
          1px 1px 1px rgba(0,0,0,0.1) inset,
          1px 1px 1px rgba(255,255,255,0.1);
    }
    .da-dots span.da-dots-current:after{
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      top: 2px;
      left: 2px;
      border-radius: 50%;
      background: rgb(255,255,255);
      background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
      background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
      background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
      background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
      background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
    }
    .da-arrows{
      -moz-user-select: none;
      -webkit-user-select: none;
    }
    .da-arrows span{
      position: absolute;
      top: 50%;
      height: 30px;
      width: 30px;
      border-radius: 50%;
      background: #e4b42d;
      cursor: pointer;
      z-index: 2000;
      opacity: 0;
      box-shadow:
          1px 1px 1px rgba(0,0,0,0.1) inset,
          1px 1px 1px rgba(255,255,255,0.1);
      -webkit-transition: opacity 0.4s ease-in-out 0.2s;
      -moz-transition: opacity 0.4s ease-in-out 0.2s;
      -o-transition: opacity 0.4s ease-in-out 0.2s;
      -ms-transition: opacity 0.4s ease-in-out 0.2s;
      transition: opacity 0.4s ease-in-out 0.2s;
    }
    .da-slider:hover .da-arrows span{
      opacity: 1;
    }
    .da-arrows span:after{
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      top: 5px;
      left: 5px;
      background: transparent url('http://image.noelshack.com/fichiers/2014/38/1411035187-arrows.png') no-repeat top left;
      border-radius: 50%;
      box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    .da-arrows span:hover:after{
      box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
    }
    .da-arrows span:active:after{
      box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
    }
    .da-arrows span.da-arrows-next:after{
      background-position: top right;
    }
    .da-arrows span.da-arrows-prev{
      left: 15px;
    }
    .da-arrows span.da-arrows-next{
      right: 15px;
    }

    .da-slide-current h2,
    .da-slide-current p,
    .da-slide-current .da-link{
      left: 10%;
      opacity: 1;
    }
    .da-slide-current .da-img{
      left: 60%;
      opacity: 1;
    }
    .da-slide-fromright h2{-webkit-animation:fromRightAnim1 .6s ease-in .8s both;-moz-animation:fromRightAnim1 .6s ease-in .8s both;-o-animation:fromRightAnim1 .6s ease-in .8s both;-ms-animation:fromRightAnim1 .6s ease-in .8s both;animation:fromRightAnim1 .6s ease-in .8s both}.da-slide-fromright p{-webkit-animation:fromRightAnim2 .6s ease-in .8s both;-moz-animation:fromRightAnim2 .6s ease-in .8s both;-o-animation:fromRightAnim2 .6s ease-in .8s both;-ms-animation:fromRightAnim2 .6s ease-in .8s both;animation:fromRightAnim2 .6s ease-in .8s both}.da-slide-fromright .da-link{-webkit-animation:fromRightAnim3 .4s ease-in 1.2s both;-moz-animation:fromRightAnim3 .4s ease-in 1.2s both;-o-animation:fromRightAnim3 .4s ease-in 1.2s both;-ms-animation:fromRightAnim3 .4s ease-in 1.2s both;animation:fromRightAnim3 .4s ease-in 1.2s both}.da-slide-fromright .da-img{-webkit-animation:fromRightAnim4 .6s ease-in .8s both;-moz-animation:fromRightAnim4 .6s ease-in .8s both;-o-animation:fromRightAnim4 .6s ease-in .8s both;-ms-animation:fromRightAnim4 .6s ease-in .8s both;animation:fromRightAnim4 .6s ease-in .8s both}@-webkit-keyframes fromRightAnim1{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-webkit-keyframes fromRightAnim2{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-webkit-keyframes fromRightAnim3{0%{left:110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-webkit-keyframes fromRightAnim4{0%{left:110%;opacity:0}100%{left:60%;opacity:1}}@-moz-keyframes fromRightAnim1{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-moz-keyframes fromRightAnim2{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-moz-keyframes fromRightAnim3{0%{left:110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-moz-keyframes fromRightAnim4{0%{left:110%;opacity:0}100%{left:60%;opacity:1}}@-o-keyframes fromRightAnim1{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-o-keyframes fromRightAnim2{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-o-keyframes fromRightAnim3{0%{left:110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-o-keyframes fromRightAnim4{0%{left:110%;opacity:0}100%{left:60%;opacity:1}}@-ms-keyframes fromRightAnim1{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-ms-keyframes fromRightAnim2{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@-ms-keyframes fromRightAnim3{0%{left:110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-ms-keyframes fromRightAnim4{0%{left:110%;opacity:0}100%{left:60%;opacity:1}}@keyframes fromRightAnim1{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@keyframes fromRightAnim2{0%{left:110%;opacity:0}100%{left:10%;opacity:1}}@keyframes fromRightAnim3{0%{left:110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@keyframes fromRightAnim4{0%{left:110%;opacity:0}100%{left:60%;opacity:1}}.da-slide-fromleft h2{-webkit-animation:fromLeftAnim1 .6s ease-in .6s both;-moz-animation:fromLeftAnim1 .6s ease-in .6s both;-o-animation:fromLeftAnim1 .6s ease-in .6s both;-ms-animation:fromLeftAnim1 .6s ease-in .6s both;animation:fromLeftAnim1 .6s ease-in .6s both}.da-slide-fromleft p{-webkit-animation:fromLeftAnim2 .6s ease-in .6s both;-moz-animation:fromLeftAnim2 .6s ease-in .6s both;-o-animation:fromLeftAnim2 .6s ease-in .6s both;-ms-animation:fromLeftAnim2 .6s ease-in .6s both;animation:fromLeftAnim2 .6s ease-in .6s both}.da-slide-fromleft .da-link{-webkit-animation:fromLeftAnim3 .4s ease-in 1.2s both;-moz-animation:fromLeftAnim3 .4s ease-in 1.2s both;-o-animation:fromLeftAnim3 .4s ease-in 1.2s both;-ms-animation:fromLeftAnim3 .4s ease-in 1.2s both;animation:fromLeftAnim3 .4s ease-in 1.2s both}.da-slide-fromleft .da-img{-webkit-animation:fromLeftAnim4 .6s ease-in .6s both;-moz-animation:fromLeftAnim4 .6s ease-in .6s both;-o-animation:fromLeftAnim4 .6s ease-in .6s both;-ms-animation:fromLeftAnim4 .6s ease-in .6s both;animation:fromLeftAnim4 .6s ease-in .6s both}@-webkit-keyframes fromLeftAnim1{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-webkit-keyframes fromLeftAnim2{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-webkit-keyframes fromLeftAnim3{0%{left:-110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-webkit-keyframes fromLeftAnim4{0%{left:-110%;opacity:0}100%{left:60%;opacity:1}}@-moz-keyframes fromLeftAnim1{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-moz-keyframes fromLeftAnim2{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-moz-keyframes fromLeftAnim3{0%{left:-110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-moz-keyframes fromLeftAnim4{0%{left:-110%;opacity:0}100%{left:60%;opacity:1}}@-o-keyframes fromLeftAnim1{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-o-keyframes fromLeftAnim2{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-o-keyframes fromLeftAnim3{0%{left:-110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-o-keyframes fromLeftAnim4{0%{left:-110%;opacity:0}100%{left:60%;opacity:1}}@-ms-keyframes fromLeftAnim1{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-ms-keyframes fromLeftAnim2{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@-ms-keyframes fromLeftAnim3{0%{left:-110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@-ms-keyframes fromLeftAnim4{0%{left:-110%;opacity:0}100%{left:60%;opacity:1}}@keyframes fromLeftAnim1{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@keyframes fromLeftAnim2{0%{left:-110%;opacity:0}100%{left:10%;opacity:1}}@keyframes fromLeftAnim3{0%{left:-110%;opacity:0}1%{left:10%;opacity:0}100%{left:10%;opacity:1}}@keyframes fromLeftAnim4{0%{left:-110%;opacity:0}100%{left:60%;opacity:1}}.da-slide-toright h2{-webkit-animation:toRightAnim1 .6s ease-in .6s both;-moz-animation:toRightAnim1 .6s ease-in .6s both;-o-animation:toRightAnim1 .6s ease-in .6s both;-ms-animation:toRightAnim1 .6s ease-in .6s both;animation:toRightAnim1 .6s ease-in .6s both}.da-slide-toright p{-webkit-animation:toRightAnim2 .6s ease-in .3s both;-moz-animation:toRightAnim2 .6s ease-in .3s both;-o-animation:toRightAnim2 .6s ease-in .3s both;-ms-animation:toRightAnim2 .6s ease-in .3s both;animation:toRightAnim2 .6s ease-in .3s both}.da-slide-toright .da-link{-webkit-animation:toRightAnim3 .4s ease-in both;-moz-animation:toRightAnim3 .4s ease-in both;-o-animation:toRightAnim3 .4s ease-in both;-ms-animation:toRightAnim3 .4s ease-in both;animation:toRightAnim3 .4s ease-in both}.da-slide-toright .da-img{-webkit-animation:toRightAnim4 .6s ease-in both;-moz-animation:toRightAnim4 .6s ease-in both;-o-animation:toRightAnim4 .6s ease-in both;-ms-animation:toRightAnim4 .6s ease-in both;animation:toRightAnim4 .6s ease-in both}@-webkit-keyframes toRightAnim1{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-webkit-keyframes toRightAnim2{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-webkit-keyframes toRightAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:100%;opacity:0}}@-webkit-keyframes toRightAnim4{0%{left:60%;opacity:1}30%{left:55%;opacity:1}100%{left:100%;opacity:0}}@-moz-keyframes toRightAnim1{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-moz-keyframes toRightAnim2{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-moz-keyframes toRightAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:100%;opacity:0}}@-moz-keyframes toRightAnim4{0%{left:60%;opacity:1}30%{left:55%;opacity:1}100%{left:100%;opacity:0}}@-o-keyframes toRightAnim1{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-o-keyframes toRightAnim2{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-o-keyframes toRightAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:100%;opacity:0}}@-o-keyframes toRightAnim4{0%{left:60%;opacity:1}30%{left:55%;opacity:1}100%{left:100%;opacity:0}}@-ms-keyframes toRightAnim1{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-ms-keyframes toRightAnim2{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@-ms-keyframes toRightAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:100%;opacity:0}}@-ms-keyframes toRightAnim4{0%{left:60%;opacity:1}30%{left:55%;opacity:1}100%{left:100%;opacity:0}}@keyframes toRightAnim1{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@keyframes toRightAnim2{0%{left:10%;opacity:1}100%{left:100%;opacity:0}}@keyframes toRightAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:100%;opacity:0}}@keyframes toRightAnim4{0%{left:60%;opacity:1}30%{left:55%;opacity:1}100%{left:100%;opacity:0}}.da-slide-toleft h2{-webkit-animation:toLeftAnim1 .6s ease-in both;-moz-animation:toLeftAnim1 .6s ease-in both;-o-animation:toLeftAnim1 .6s ease-in both;-ms-animation:toLeftAnim1 .6s ease-in both;animation:toLeftAnim1 .6s ease-in both}.da-slide-toleft p{-webkit-animation:toLeftAnim2 .6s ease-in .3s both;-moz-animation:toLeftAnim2 .6s ease-in .3s both;-o-animation:toLeftAnim2 .6s ease-in .3s both;-ms-animation:toLeftAnim2 .6s ease-in .3s both;animation:toLeftAnim2 .6s ease-in .3s both}.da-slide-toleft .da-link{-webkit-animation:toLeftAnim3 .4s ease-in both;-moz-animation:toLeftAnim3 .4s ease-in both;-o-animation:toLeftAnim3 .4s ease-in both;-ms-animation:toLeftAnim3 .4s ease-in both;animation:toLeftAnim3 .4s ease-in both}.da-slide-toleft .da-img{-webkit-animation:toLeftAnim4 .6s ease-in .6s both;-moz-animation:toLeftAnim4 .6s ease-in .6s both;-o-animation:toLeftAnim4 .6s ease-in .6s both;-ms-animation:toLeftAnim4 .6s ease-in .6s both;animation:toLeftAnim4 .6s ease-in .6s both}@-webkit-keyframes toLeftAnim1{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-webkit-keyframes toLeftAnim2{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-webkit-keyframes toLeftAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:-50%;opacity:0}}@-webkit-keyframes toLeftAnim4{0%{left:60%;opacity:1}40%{left:70%;opacity:1}90%{left:0;opacity:0}100%{left:-50%;opacity:0}}@-moz-keyframes toLeftAnim1{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-moz-keyframes toLeftAnim2{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-moz-keyframes toLeftAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:-50%;opacity:0}}@-moz-keyframes toLeftAnim4{0%{left:60%;opacity:1}40%{left:70%;opacity:1}90%{left:0;opacity:0}100%{left:-50%;opacity:0}}@-o-keyframes toLeftAnim1{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-o-keyframes toLeftAnim2{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-o-keyframes toLeftAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:-50%;opacity:0}}@-o-keyframes toLeftAnim4{0%{left:60%;opacity:1}40%{left:70%;opacity:1}90%{left:0;opacity:0}100%{left:-50%;opacity:0}}@-ms-keyframes toLeftAnim1{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-ms-keyframes toLeftAnim2{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@-ms-keyframes toLeftAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:-50%;opacity:0}}@-ms-keyframes toLeftAnim4{0%{left:60%;opacity:1}40%{left:70%;opacity:1}90%{left:0;opacity:0}100%{left:-50%;opacity:0}}@keyframes toLeftAnim1{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@keyframes toLeftAnim2{0%{left:10%;opacity:1}30%{left:15%;opacity:1}100%{left:-50%;opacity:0}}@keyframes toLeftAnim3{0%{left:10%;opacity:1}99%{left:10%;opacity:0}100%{left:-50%;opacity:0}}@keyframes toLeftAnim4{0%{left:60%;opacity:1}40%{left:70%;opacity:1}90%{left:0;opacity:0}100%{left:-50%;opacity:0}}

Une fois que c'est bon, dans le code de ta PA tu rajoutes ce code :

Code:

<div id="da-slider" class="da-slider">
    <div class="da-slide">
        <h2>Warm welcome</h2>
        <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
        <a href="#" class="da-link">Read more</a>
        <div class="da-img"><img src="http://image.noelshack.com/fichiers/2014/38/1411033178-1.png" alt="image01" /></div>
    </div>
    <div class="da-slide">
        <h2>Easy management</h2>
        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
        <a href="#" class="da-link">Read more</a>
        <div class="da-img"><img src="http://image.noelshack.com/fichiers/2014/38/1411033178-2.png" alt="image01" /></div>
    </div>
    <div class="da-slide">
        <h2>Revolution</h2>
        <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
        <a href="#" class="da-link">Read more</a>
        <div class="da-img"><img src="http://image.noelshack.com/fichiers/2014/38/1411033179-3.png" alt="image01" /></div>
    </div>
    <div class="da-slide">
        <h2>Quality Control</h2>
        <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
        <a href="#" class="da-link">Read more</a>
        <div class="da-img"><img src="http://image.noelshack.com/fichiers/2014/38/1411033178-4.png" alt="image01" /></div>
    </div>
    <nav class="da-arrows">
        <span class="da-arrows-prev"></span>
        <span class="da-arrows-next"></span>
    </nav>
</div>

Et enfin dernière étape, dans un nouveau JS (il faut cocher : activer sur l'index) tu mets ceci :

Code:

$(function(){
    $('#da-slider').cslider()
});

Chez moi ça fonctionne sans problème
Il manque quelques images car je ne les ai pas hébergées, mais cela se règle rapidement ^^

[angelejunior]

Bonjour,
merci pour ta réponse Nihil

Alors c'est pour ma PA
Les codes fonctionne très bien, mais par contre l'animation n'est pas là, comment l'ajouter???
et j'aimerais également qu'il face toute la largeur du forum

un grand merci à toi pour le coup de pouce

[[Nihil]]

Pour l'installer correctement, vérifie que tout le CSS est bien présent car on dirait qu'il manque le CSS pour les animations.
Si tu avais bien copié / collé tout le CSS (celui que j'avais mis sur ma réponse), vérifie que tu as bien coché "Non" à "Optimiser votre CSS" (c'est juste en dessous de la zone où on peut mettre notre CSS).

EDIT : j'ai vu que tu allais opter pour la solution de l'iframe, tu peux donc enlever le CSS + le javascript + le HTML de ta pa PA sur ton forum, ils seront directement dans la page HTML dans le code d'Alzu

EDIT2 : Tout à l'heure j'ai été sur ton forum test et les animations marchaient correctement

[angelejunior]

Problème régler, merci beaucoup Nihil