Problème installation slider
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Problème installation slider
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 :
Le css :
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;
}
}
Dernière édition par angelejunior le Ven 19 Sep 2014 - 13:17, édité 1 fois
Re: Problème installation slider
Bonjour,
Tout simplement parce que vous avez inséré du jQuery dans la gestion des codes Javascript
Cordialement.
Tout simplement parce que vous avez inséré du jQuery dans la gestion des codes Javascript
Cordialement.
Invité- Invité
Re: Problème installation slider
Ok, c'est donc pas possible???
Re: Problème installation slider
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) :
Une fois cela fait, dans ton CSS tu rajoutes ceci :
Une fois que c'est bon, dans le code de ta PA tu rajoutes ce code :
Et enfin dernière étape, dans un nouveau JS (il faut cocher : activer sur l'index) tu mets ceci :
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 ^^
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 ^^
Re: Problème installation slider
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
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
Re: Problème installation slider
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
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
Re: Problème installation slider
Problème régler, merci beaucoup Nihil
Sujets similaires
» Problème installation Nivo slider
» Installation Wow Slider
» WOW slider probleme.
» Problème qeel en slider
» Problème de Widget (Slider)
» Installation Wow Slider
» WOW slider probleme.
» Problème qeel en slider
» Problème de Widget (Slider)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum