Overflow-x et overflow-y

Version imprimable

Bonjour à toutes et tous !

Voilà je suis en train de faire un diaporama avec défilement des images de la gauche vers la droite, ce n'est pas la 1ère fois que je fais ce genre de chose et je procède toujours de la même manière :
1. je créer une div <div id="imagesbox"> ou je place mes images : chaque <img> l'une après l'autre dans le sens du défilement;
2. j'applique un attribut css "float: left;" à mes images pour quelles soit positionnées l'une à côté de l'autre;
3. j'applique <div id="imagesbox"> une largeur css "width" dont la valeur est égale à la largeur des images multipliée par le nombre d'image (les images ayant toute la même largeur);
4. je place le tout dans une <div id="slider"> parente dont la largeur css "width" est égale à la largeur d'une seul image ainsi qu'un "overflow:hidden;" pour cacher ce qui dépasse;
5. je déplace mes images en appliquant dynamiquement (via mon pote jquery) une "margin-left" négative sur <div id="imagesbox">;

Jusqu'ici tous va bien, mais cette fois j'aimerais m'autoriser une petite originalité en rendant visible ce qui dépasse à gauche et à droite.
Tout de go et plein d’enthousiasme j'applique les attributs css "overflow-x: visible;" et "overflow-y: hidden;" à ma div parente <div id="slider"> (point 4).

C'est là que ça se gâte, plutôt que d’afficher ce qui déborde, le navigateur (tous les navigateurs de FF à Safari et les autres...) affiche une scrollbar comme si j'avais mis "overflow-x: scroll;",
par contre ce qui dépasse en hauteur est bien caché...

Voici le code de tout ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* CSS Div parente */ div#slider { width: 1200px; height: 600px; display: block; margin: auto; overflow-x: visible; overflow-y: hidden; position: relative; } /* CSS des images */ div#imagesbox > img { width: 1200px; float: left; opacity: 0.5; }
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <div id="slider"> <span id="sliding-prev">prev</span> <div id="imagesbox"> <img id="slide1" class="first-slide" src="/images/Chrysanthemum.jpg" /> <img id="slide2" src="/images/Desert.jpg" /> <img id="slide3" src="/images/fauve.jpg" /> <hr class="clear" /> </div> <div class="text-box"> inutilisé pour l'instant </div> <span id="sliding-next">next</span> </div>
EDIT : Ajout de l'attribut position à div#slider qui ne fais rien avancer...

Merci d'avance pour votre aide et très bonne journée !

Mickael

Bonjour,
J'ai récemment mis en place un diaporama avec jQuery, exactement de la même manière que tu le décris voici son code:

Partie HTML:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="wrapper">
     <div id="carousel">
        <img src="img/building1.jpg" />
        <img src="img/building2.jpg" />
        <img src="img/building3.jpg" />
        <img src="img/building4.jpg" />
        <img src="img/building5.jpg" />
        <img src="img/building6.jpg" />
    </div>
    <a href="#" id="prev" title="Photo précédente"></a>
    <a href="#" id="next" title="Photo suivante"></a>
    <div id="pager"></div>
</div>

Partie CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
#wrapper {
    background-color: #fff;
    width: 100%;
    height: 450px;
    margin-top: -225px;
    overflow: hidden;
    position: absolute;
    top: 43%; /* 50% pour mettre au milieu vertical de la page */
    left: 0;
    box-shadow: 0 0 4px #8c8c8c;
}
#carousel img {
    display: block;
    float: left;
    width: 990px;
    height: 450px;
}
#prev, #next {
    background-color: rgba(255, 255, 255, 0.7);
    display: block;
    height: 450px;
    width: 50%;
    top: 0;
    position: absolute;
}
#prev:hover, #next:hover {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.8);
}
#prev { left: -495px; } /* 495 * 2 = 990px (taille de l'image) */
#next { right: -495px; }
#pager {
    margin-left: -470px;
    position: absolute;
    left: 50%;
    bottom: 10px;
}
#pager a {
    border: 2px solid #fff;
    border-radius: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}
#pager a:hover { background-color: rgba(255, 255, 255, 0.5); }
#pager a span { display: none; }
#pager a.selected { background-color: #fff; }

Partie jQuery:

Code:

1
2
3
4
5
6
7
8
9
10
$(function() {
$('#carousel').carouFredSel({
    width: '100%',
    items: { visible: 3, start: -1 },
    scroll: { items: 1, duration: 1000, timeoutDuration: 3000 },
    prev: '#prev',
    next: '#next',
    pagination: { container: '#pager', deviation: 1 }
    });
});

La balise "pager" n'est pas obligatoire c'est simplement pour mon intérêt personnel, je voulais pouvoir aller directement à la X ième slide.

Bien à toi,

13/06/2014, 07h25
CCyrillus

Bonjour,

pour l'overflow, si tu cherche a l'appliquer aux images, c'est probablement plus aisée . Voici un exemple basic avec des boite en lignes plutôt que flottante et text-indent. http://codepen.io/gc-nomade/pen/KoeCG pour le test , le slide est effectué via une transition CSS. Ce n'est pas une soluce mais une démo sans réglage particulier.

Ou bien avec un overflow vertical http://codepen.io/gc-nomade/pen/ActpB , toujours sans réglages particuliers.

Voici une page pour tester les melanges de regles possible avec overflow-y et overflow-x http://codepen.io/gc-nomade/pen/evEiL (bouton radio a cliquer pour appliquer les valeur css correspondantes)
13/06/2014, 10h01
Soundboy39

Bonjour à tous !

D'abord merci pour vos interventions !

En fait j'ai réussis à régler mon problème en imbriquant la grande div (celle de 3600px) dans une div parente à laquelle j'ai attribué la hauteur de la grande div ainsi qu'un overflow:hidden. Cette div parente prend toute la largeur de la page.

L'overflow de la div de 3600px de large passe lui en visible.

Du coup je vois bien toute mes photos sans dépassement sur la hauteur.

Finalement l'effet est pas aussi mirobolant que je l’espérait (il faut avoir assez d'image pour couvrir la totalité de la largeur de l'écran sinon c'est moche...) mais le principe peut servir dans d'autres contextes.