18041 sujets

Questions générales et questions de débutants

Problème dimensions images slider (CSS/HTML only)

Bonjour,

Je suis actuellement en train de crée mon premier site web et je rencontre un problème concernant mon slider. (Slider se voulant être full-width)

Lien : https://bsteven-srv7.formations-web.alsace

En effet, les images de mon slider sont trop grandes (1920x500) ou trop petite selon les écrans. Après avoir tenté divers manipulation, j'en ai conclu qu'il était impossible de rendre les images de mon slider, responsive en utilisant uniquement du CSS/HTML...



Est-ce qu'il existe une solution à mon problème ? (Faire en sorte que les images de mon slider prennent toute la taille de l'écran, et pas plus, pas moins)


<div class="slider">
            <div class="slides">
                <slide class='slide"'><img src="img/slider_test_1.png" alt="#"></slide><slide class='slide"'><img src="img/slider_test_1.png" alt="#"></slide><slide class='slide"'><img src="img/slider_test_1.png" alt="#"></slide>

            </div>

        </div>



/* --------------------
_______________________

         SLIDER

-----------------------
---------------------*/


.slider{
    height: 500px;
    width: 100%;
    overflow: hidden;
}
.slides{
    width: calc(1920px * 3);
    animation: glisse 20s infinite;
}

.slide{
    float: left;
}

@keyframes glisse{
    0%{
        transform: translateX(0)
    }
    10%{
        transform: translateX(0)
    }
    33%{
        transform: translateX(-1920px)
    }
    43%{
        transform: translateX(-1920px)
    }
    66%{
        transform: translateX(-3840px)
    }
    76%{
        transform: translateX(-3840px)
    }
    100%{
        transform: translateX(0)
    }
  }

Modifié par Ploping (13 Nov 2018 - 16:40)
Démo :
https://kazimentou.fr/divers/alsacreations/test181113.php
Taper Ctrl-U au clavier dans le navigateur pour afficher le source HTML
CSS pour 5 photos :
@keyframes glisse {
	 0%, 7%		{ left:  0; }
	20%, 27%	{ left:  -100vw; }
	40%, 47%	{ left:  -200vw; }
	60%, 67%	{ left:  -300vw; }
	80%, 87%	{ left:  -400vw; }
	100%		{ left:  -500vw; }
}

* { margin:0; padding: 0; }
.slider{
	position: relative;
    width: 100vw;
    overflow: hidden;
}
.slides {
	position: absolute;
	top: 0;
	display: flex;
	flex-wrap: nowrap;
    width: calc(100vw * 5);
    animation: glisse 20s infinite;
}
Note que la première et la dernière photos doivent être identiques
Modifié par bazooka07 (14 Nov 2018 - 00:43)
Meilleure solution
Bonjour,
veux-tu que je te donne le html et le css (pas de js) d'un slider que j'ai sur l'un de mes sites ? Il date un peu, défile automatiquement, mais il est responsive, testé et fonctionne bien. Il s'adapte parfaitement à toutes les résolutions, y compris les mobiles. De plus, le html est tout prêt, avec l'option srcset, comme en parle un autre intervenant. Tu auras juste à y mettre tes images, après les avoir redimensionnées pour chaque résolutions (trois en tout). Il est bloqué sur six images, mais j'ai effectué les calculs pour en ajouter ou en enlever.
Généralement, on ne donne pas de code tout fait ici, mais comme tu as déjà bien planché...

A plus.
Un bon bout de code vaut mieux qu'un long discours!! Smiley biggrin

Bonsoir PnomPeng, ce que tu veux savoir est comment maitriser les VH et VW, c'est un apprentissage!!! Pour ta gouverne il s'agit de mettre le viewport en pleine page, comme dans FrontPage. Ensuite tu peux ancrer aux bornes du VIEWPORT et ainsi responsiver le tout!! C'est pas difficile!
Bonjour Bongota, c'est très gentil de ta part, et je veux bien ! Avant de l'intégrer à mon site, si je l’intègre, je veux d'abord m'assurer de bien comprendre le code et être certain de pouvoir le reproduire. J'espère qu'il n'est pas trop compliqué. Smiley lol

Je vous remercie tous encore une fois pour votre contribution.

@plus
Sujet clos
Aller à