Bonjour,
Je viens à vous car j'aimerais implémenter plusieurs slider dans une page html unique dans différentes div; mais en utilisant le même code js et si possible en limitant le code css.
J'utilise le slider Hammer.js
http://eightmedia.github.io/hammer.js/
Après de nombreuses recherches je n'ai pas trouvé la solution à mon problème; et pourtant je pense que j'y suis presque.
Voici mon code:
HTML
CSS
Ma partie JS se trouve pour le moment dans mon html à l'intérieur de balise script mais je compte le déplacer dans un fichier js externe par la suite.
Pour info le slider de la partie2 marche bien par contre celui de la partie 1 est non fonctionnelle, les divs sont placés bizarrement et il n'y a aucun slide.
J'ai bien mis un "id" différent pour chacun des slider et j'ai déclaré mes 2 variables à la fin du js; mais rien ne fait j'ai un slider qui marche sur 2 et j'aimerais pouvoir en rajouter d'autres sur ma page html...
c'est mal barré!
Est-ce possible d'avoir plusieurs slider utilisant le même script sur une seule et même page? Si oui qu'elle est la partie à modifier et / ou rajouter?
Merci infiniment pour votre aide
Modifié par xavierk (23 Apr 2013 - 22:16)
Je viens à vous car j'aimerais implémenter plusieurs slider dans une page html unique dans différentes div; mais en utilisant le même code js et si possible en limitant le code css.
J'utilise le slider Hammer.js
http://eightmedia.github.io/hammer.js/
Après de nombreuses recherches je n'ai pas trouvé la solution à mon problème; et pourtant je pense que j'y suis presque.
Voici mon code:
HTML
<section class="lorem" id="partie1">
<div id="carousel">
<ul>
<li class="pane1">
<h2>Swipe...</h2>
</li>
<li class="pane2">
<h2>...or drag...</h2>
</li>
<li class="pane3">
<h2>...or swipe...</h2>
</li>
<li class="pane4">
<h2>..or drag...</h2>
</li>
<li class="pane5">
<h2>Dit is het einde!</h2>
</li>
</ul>
</div>
</section>
<section class="lorem" id="partie2">
<div id="carousel1">
<ul>
<li class="pane6">
<h2>Swipe...</h2>
</li>
<li class="pane7">
<h2>...or drag...</h2>
</li>
<li class="pane8">
<h2>...or swipe...</h2>
</li>
<li class="pane9">
<h2>..or drag...</h2>
</li>
<li class="pane10">
<h2>Dit is het einde!</h2>
</li>
</ul>
</div>
</section>
CSS
#carousel, #carousel ul, #carousel li {
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
cursor:pointer;
}
#carousel1, #carousel1 ul, #carousel1 li {
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
cursor:pointer;
}
#debug {
position: fixed;
background: #fff;
padding: 5px;
color: #000;
top: 0;
left: 0;
z-index: 1337;
}
#carousel {
background: silver;
overflow: hidden;
width:1280px;
height:100%;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform-style: preserve-3d;
}
#carousel1 {
background: silver;
overflow: hidden;
width:1280px;
height:100%;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform-style: preserve-3d;
}
#carousel ul.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#carousel1 ul.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#carousel ul {
transform: translate3d(0%,0,0) scale3d(1,1,1);
-o-transform: translate3d(0%,0,0) scale3d(1,1,1);
-ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
-moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
#carousel1 ul {
transform: translate3d(0%,0,0) scale3d(1,1,1);
-o-transform: translate3d(0%,0,0) scale3d(1,1,1);
-ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
-moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
#carousel ul {
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
box-shadow: 0 0 20px rgba(0,0,0,.2);
position: relative;
}
#carousel1 ul {
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
box-shadow: 0 0 20px rgba(0,0,0,.2);
position: relative;
}
#carousel li {
float: left;
overflow: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
}
#carousel1 li {
float: left;
overflow: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0,0,0);
}
#carousel, #carousel1 li h2 {
color: #fff;
font-size: 30px;
text-align: center;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-shadow: -1px -1px 0 rgba(0,0,0,.2);
}
#carousel1 li h2 {
color: #fff;
font-size: 30px;
text-align: center;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-shadow: -1px -1px 0 rgba(0,0,0,.2);
}
#carousel li.pane1 { background: #42d692; }
#carousel li.pane2 { background: #4986e7; }
#carousel li.pane3 { background: #d06b64; }
#carousel li.pane4 { background: #cd74e6; }
#carousel li.pane5 { background: #9fe1e7; }
#carousel1 li.pane6 { background: #42c742; }
#carousel1 li.pane7 { background: #49r798; }
#carousel1 li.pane8 { background: #a06b64; }
#carousel1 li.pane9 { background: #fd74e6; }
#carousel1 li.pane10 { background: #9ee009; }
Ma partie JS se trouve pour le moment dans mon html à l'intérieur de balise script mais je compte le déplacer dans un fichier js externe par la suite.
<script src="js/jquery.hammer.js"></script>
<script>
var debug_el = $("#debug");
function debug(text) {
debug_el.text(text);
}
/**
* requestAnimationFrame and cancel polyfill
*/
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
/**
* super simple carousel
* animation between panes happens with css transitions
*/
function Carousel(element)
{
var self = this;
element = $(element);
var container = $(">ul", element);
var panes = $(">ul>li", element);
var pane_width = 0;
var pane_count = panes.length;
var current_pane = 0;
/**
* initial
*/
this.init = function() {
setPaneDimensions();
$(window).on("load resize orientationchange", function() {
setPaneDimensions();
//updateOffset();
})
};
/**
* set the pane dimensions and scale the container
*/
function setPaneDimensions() {
pane_width = element.width();
panes.each(function() {
$(this).width(pane_width);
});
container.width(pane_width*pane_count);
};
/**
* show pane by index
* @param {Number} index
*/
this.showPane = function( index ) {
// between the bounds
index = Math.max(0, Math.min(index, pane_count-1));
current_pane = index;
var offset = -((100/pane_count)*current_pane);
setContainerOffset(offset, true);
};
function setContainerOffset(percent, animate) {
container.removeClass("animate");
if(animate) {
container.addClass("animate");
}
if(Modernizr.csstransforms3d) {
container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
}
else if(Modernizr.csstransforms) {
container.css("transform", "translate("+ percent +"%,0)");
}
else {
var px = ((pane_width*pane_count) / 100) * percent;
container.css("left", px+"px");
}
}
this.next = function() { return this.showPane(current_pane+1, true); };
this.prev = function() { return this.showPane(current_pane-1, true); };
function handleHammer(ev) {
console.log(ev);
// disable browser scrolling
ev.gesture.preventDefault();
switch(ev.type) {
case 'dragright':
case 'dragleft':
// stick to the finger
var pane_offset = -(100/pane_count)*current_pane;
var drag_offset = ((100/pane_width)*ev.gesture.deltaX) / pane_count;
// slow down at the first and last pane
if((current_pane == 0 && ev.gesture.direction == Hammer.DIRECTION_RIGHT) ||
(current_pane == pane_count-1 && ev.gesture.direction == Hammer.DIRECTION_LEFT)) {
drag_offset *= .4;
}
setContainerOffset(drag_offset + pane_offset);
break;
case 'swipeleft':
self.next();
ev.gesture.stopDetect();
break;
case 'swiperight':
self.prev();
ev.gesture.stopDetect();
break;
case 'release':
// more then 50% moved, navigate
if(Math.abs(ev.gesture.deltaX) > pane_width/2) {
if(ev.gesture.direction == 'right') {
self.prev();
} else {
self.next();
}
}
else {
self.showPane(current_pane, true);
}
break;
}
}
element.hammer({ drag_lock_to_axis: true })
.on("release dragleft dragright swipeleft swiperight", handleHammer);
}
var carousel = new Carousel("#carousel"), carousel = new Carousel("#carousel1");
carousel.init();
</script>
Pour info le slider de la partie2 marche bien par contre celui de la partie 1 est non fonctionnelle, les divs sont placés bizarrement et il n'y a aucun slide.
J'ai bien mis un "id" différent pour chacun des slider et j'ai déclaré mes 2 variables à la fin du js; mais rien ne fait j'ai un slider qui marche sur 2 et j'aimerais pouvoir en rajouter d'autres sur ma page html...
c'est mal barré!Est-ce possible d'avoir plusieurs slider utilisant le même script sur une seule et même page? Si oui qu'elle est la partie à modifier et / ou rajouter?
Merci infiniment pour votre aide
Modifié par xavierk (23 Apr 2013 - 22:16)
