J'ai crée un carrousel avec image et titre. Je rencontre plusieurs problèmes; je n'arrive pas à aligner mes images par le bas (ce qui donne un aspect désordonné). Et je ne parviens pas à adapter le texte pour plus de fluidité, il est beaucoup trop gros pour l'image centrale.
Merci de votre aide. Je suis à l'écoute de toute amélioration,
/* Aligner toutes les images par le bas */ .swiper-wrapper { display: flex; align-items: flex-end; /* Aligne les slides par le bas */ }
/* Style pour chaque slide */ .swiper-slide { display: flex; flex-direction: column; /* Permet de placer le texte sous l'image */ justify-content: flex-end; /* Aligne tout le contenu en bas */ text-align: center; /* Centre le texte horizontalement */ opacity: 0.6; transform: scale(0.6); transition: transform 0.3s, opacity 0.3s; }
/* Style spécifique pour l'image de la slide */ .swiper-slide img { display: block; margin: 0 auto; /* Centre l'image horizontalement */ max-height: 300px; /* Limite la hauteur pour un alignement plus net */ object-fit: contain; /* Assure un bon redimensionnement des images */ }
/* Texte sous chaque image */ .caption { margin-top: 10px; font-size: 1rem; /* Taille du texte */ color: #666; word-wrap: break-word; /* Assure le retour à la ligne si le texte est long */ max-width: 90%; /* Limite la largeur du texte */ }
document.addEventListener('DOMContentLoaded', () => {
const swiper = new Swiper('.swiper-container', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
effect: 'fade', // Change this for different effects like 'slide', 'cube', etc.n });n});
Je ne suis pas sûr de comprendre ce que tu souhaites changer dans cette démo mais je peux déjà te donner des pistes :
Tu utilises transform: scale(0.6) pour réduire les images. Par défaut, cette mise à l'échelle à lieu à partir du centre de l'élément. Si tu veux changer ce point d'ancrage, tu peux utiliser transform-origin en complément de transform
La diapo active reçoit la classe .swiper-slide-active, tu peux changer la taille du texte avec .swiper-slide-active p { font-size: ... }
N'hésite pas à partager une capture d'écran avec des annotations
Pour aligner les images par le bas dans ton carrousel et ajuster la taille du texte pour une meilleure fluidité, tu peux modifier ton code CSS comme suit :
1. Alignement des images par le bas : Assure-toi que les images ont une hauteur maximale uniforme et que leur conteneur est configuré pour les aligner en bas.
Cette configuration garantit que toutes les images auront une hauteur maximale de 300 pixels et conserveront leurs proportions, ce qui facilite leur alignement uniforme.
2. Ajustement de la taille du texte : Pour que le texte s'adapte mieux et soit plus fluide, tu peux réduire la taille de la police et limiter la largeur du texte.
Cette configuration garantit que le texte est centré sous chaque image, améliorant ainsi l'apparence générale du carrousel. En appliquant ces ajustements, tes images devraient s'aligner uniformément par le bas, et le texte associé sera mieux adapté, offrant une présentation plus harmonieuse dans ton carrousel.
Merci pour vos réponses, j'ai effectué quelques modifications.
J'ai désormais un problème au niveau de mon menu. Sur ma page d'accueil, le menu est sur deux lignes. Seulement, sur mes pages peintures, le menu est sur 3 lignes. Il doit y avoir une dysfonction avec le 2eme menu à l 'intérieur de ma page peinture. J'ai essayé de modifier plusieurs choses mais ça ne change rien.
Le problème vient peut-être d’une largeur insuffisante ou d’un style CSS différent appliqué au conteneur du menu dans la page en question. Voici comment résoudre :
1. Corriger la largeur du conteneur Assure-toi que la largeur est uniforme sur toutes les pages. Ajoute ceci dans le fichier CSS principal :
.menu {
width: 100%;
max-width: 1200px; /* Ajustez selon la largeur du site */
margin: 0 auto; /* Centrage */
display: flex;
justify-content: space-between;
}
2. Éliminer le retour à la ligne Ajoute la propriété white-space pour empêcher le menu de passer à plusieurs lignes :
.menu a {
white-space: nowrap;
font-size: 14px; /* Ajustez selon les besoins */
padding: 5px;
}
3. Inspecter les styles additionnels Vérifie s'il y a un style supplémentaire spécifique à .menu sur cette page en particulier qui pourrait forcer le passage à la ligne. Éliminez les différences pour harmoniser.
J'ai réussi à avoir une image centrale plus grande en augmentant le transform scale
j'ai ajouté ceci:
.swiper-wrapper {
align-items: center; /* Centre verticalement toutes les images */
height: 110vh;
margin-top: -40px;
}
le problème désormais est l'espace blanc entre mon menu est le swippe ainsi que l'espace sous le swippe. je n arrive pas à le réduire. De même, la taille de la police sous les images est trop grande et je n'arrive pas à le modifier
merci pour votre aide, je cherche de mon côté mais un ptit coup de pouce m'aiderait à avancer.
j'ai la taille du texte dans mon swippe qui se trouve ici :
/* Texte sous chaque image */
.caption {
margin-top: 10px;
font-size: 0.8rem; /* Taille du texte */
color: #666;
word-wrap: break-word; /* Retour à la ligne pour les légendes longues */
max-width: 90%; /* Limite la largeur du texte */
}
et l'attribut pour la visualisation sur smartphone ici:
@media (max-width: 768px)
.caption {
font-size: 0.5rem;
margin-top: 3px;
padding: 5px; /* Espace autour du texte */
color: #333; /* Améliore la lisibilité */
}
et même en modifiant le font-size, la taille reste grande. je ne comprends pas.
de même, quand je visualise ma page sur tablette, quand je regarde en format paysage, la présentation est parfaite. Par contre en quand je regarde en format portrait, les images sont toutes petites. Y a t il un attribut à ajouter du genre, @media (max-with: 480px) ?
Merci de vos lumières
- Edité par NovisCanvas 17 décembre 2024 à 16:24:44
Est ce que quelqu un pourrait m'aider s'il vous plaît. J'ai un problème avec l'affichage de mon swippe lorsque je visualise sur tablette en format portrait et sur smartphone lorsque je visualise en format paysage. Les images sont trop petites et le rendu pas terrible.
(et aussi dans un autre point de rupture au moins)
À quoi cela te sert-il ? Il me semble que le problème dans ton slider vient de là car en désactivant ces règles dans mon navigateur, le carrousel se comportait correctement (à ma connaissance).
Autre point : l'attribut alt des images sert à décrire l'image, pas à mettre des mots-clés. Imagine que tu ne voies pas les images (le réseau est nul parce que tu es dans le train, ou bien, plus simplement, tu es aveugle ou mal-voyant⋅e), comment voudrais-tu qu'on te les décrive ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Merci pour ta réponse. Effectivement cet attribut doit être présent dans un autre CSS pour ma page. Il doit venir contrarier mon swippe. Je vais regarder où il se trouve et le supprimer.
Par ailleurs, je ne comprends pas pourquoi le texte sous mes images du swippe est trop grand quand je regarde sur Smartphone. Comment faire pour l'adapter au mieux aux smartphones?
correspond à la citation en haut de mon site. Si je supprime ce css en visualisant sur mon smartphone ma citation est coupé en deux. On ne la voit pas correctement. Que puis je ajouter pour voir la citation complète.
Par ailleurs, je rencontre toujours un problème avec l 'affichage de mon texte sur smartphone. Il est trop grand est je ne parviens pas à l'adapter. Comment cela se fait il?
Vous devez surcharger cette règle avec un sélecteur d'un poids/spécificité plus grand. Si ceci ne vous parle pas, Lire ceci.
Utilisez l'inspecteur des éléments (F12 ou clique droit puis inspecter) pour analyser la priorité des règles CSS qui sont appliquées. Vous pourrez alors trouver le sélecteur approprié à écrire dans vos média queries.
Soit dit en passant, pour une légende d'une image il existe les éléments <figure> et <figcaption> qui sont plus sémantiquement correct qu'un <div> et un <p>.
Merci pour ces précisions. J'ai réussi à modifier la taille de mon texte sous les images du slide. Excepté le texte en format smartphone, là il est toujours trop grand et je ne parviens pas à le réduire.
Par ailleurs lorsque je visualise le slide sur smartphone en format paysage, les images sont trop petites, je ne comprends pas pourquoi selon l'écran mon slide ne s'adapte pas automatiquement. Sur ordi c'est bien ainsi que sur tablette en format paysage mais pas en format portrait.
Quelqu'un pourrait-il m'aider concernant la visualisation du slide dans différents formats (problème tablette format portrait et smartphone format paysage) . Ainsi que pour la taille du texte sur smartphone (il est trop grand et mes titres sont coupés). J'ai effectué quelques modifications comme précisé précédemment et là je ne trouve pas.
J'ai beau cherché, je n'ai toujours pas trouvé comment modifier la taille du texte sous les images du swippe pour les smartphones. Le texte est beaucoup trop grand, le rendu vraiment pas top. J'ai cherché différents moyens, je réussi bien à modifier la taille du texte mais seul le format smartphone bloque. Je ne comprends pas ce qui ne va pas.
Bonjour, désolé pour la réponse tardive, j'étais fort occupé cette semaine.
Je viens de regarder, et je ne vois pas de class sur le paragraphe dont le texte est trop grand en vue smartphone. Indiquez une class à l'élément que vous souhaitez styliser et créer cette class dans votre CSS.
Voici une capture écran de ce que je vois:
AbcAbc6 a écrit:
Soit dit en passant, pour une légende d'une image il existe les éléments <figure> et <figcaption> qui sont plus sémantiquement correct qu'un <div> et un <p>.
Je constate que vous ne tenez pas compte de cette observation concernant la sémantique!
effectivement, je mets un peu de temps à solutionner ces problèmes car je cherche beaucoup par moi-même, je n'ai pas de formation web.
Dans cette proposition, j'ai ajouté une une class pour ma description et j'aimerai comprendre si c'est la bonne manière de faire car le <p reste présent. merci pour les explications.
Bonjour, je viens de passer votre dernier code au validateur https://validator.w3.org/ et il y à une erreur. En réalité la balise <figcaption> doit être le premier ou le dernier enfant de <figure>.
J'ai fais en sorte que le paragraphe de class .description soit placé en dernier même si il ne l'est pas dans le HTML.
Attention également vous utilisez le selecteur img pour styliser les images. Cela impacte toutes les images du site. Si vous désirez appliquer un style au image de swiper faite précéder d'une class parente spécifiant cet élément. Exemple :
.swiper-slide img {}
De cette façon vous ciblez uniquement les images de ce module d'animation et pas les autres images du site.
Je me demande si la description ne devrait pas être aussi dans le figcaption… La spec HTML donne des exemples qui contiennent titre et description, ou titre et crédits.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Merci pour votre aide. Voilà, j'ai testé le code sur codepen. Et je dois faire une erreur quelque part, je ne trouve pas malgré les analyses de l html de codepen.
Vous devez utilisez une class "swiper" englobant le module et nom plus "swiper-container" comme auparavant . Ceci est à modifier dans le nom de le HTML mais également dans le JS que vous utilisez. Soit en L2 et L145 de l'HTML du codepen mais également en L2 du JS du codepen (puisque vous dupliquer le code JS dans le HTML et dans le panel JS de ce codepen.
L16 du JavaScript du codepen, les fermetures des accolades et parenthèses ce trouvent dans le commentaire, ce qui crée une erreur JS dans le codepen. Rectifier ceci pour ne plus avoir d'erreurs.
Autre chose pour votre titre <h1>, la balise <font> est obsolète depuis plus de 25ans. Elle n'est plus à utiliser. C'est en CSS que l'on stylise la taille des polices pas en HTML!!!
Vous devez utilisez une class "swiper" englobant le module et nom plus "swiper-container" comme auparavant . Ceci est à modifier dans le nom de le HTML mais également dans le JS que vous utilisez. Soit en L2 et L145 de l'HTML du codepen mais également en L2 du JS du codepen (puisque vous dupliquer le code JS dans le HTML et dans le panel JS de ce codepen.
NovisCanvas a écrit:
AbcAbc6 a écrit:
Bonjour, erreur de nommage de class. Vérifier la version de la librairie JavaScript que vous utilisez avec la documentation de celle-ci.
Vous devez utilisez une class "swiper" englobant le module et nom plus "swiper-container" comme auparavant . Ceci est à modifier dans le nom de le HTML mais également dans le JS que vous utilisez. Soit en L2 et L145 de l'HTML du codepen mais également en L2 du JS du codepen (puisque vous dupliquer le code JS dans le HTML et dans le panel JS de ce codepen.
Pardon pour cette question mais je ne comprends pas pourquoi il faut changer cette class. Effectivement lorsque j'utilisais l'effet swippe avant, avec ces mêmes class , cela fonctionnait. Je souhaite juste changer la taille du texte et des images et je ne comprends pas pourquoi l'effet ne fonctionne plus dans ce nouveau code. Voici le codepen avec l'ancienne version, et malgré le "swiper-container" cela fonctionne.
Merci pour vos explications
- Edité par NovisCanvas 16 janvier 2025 à 11:07:59
>> Pardon pour cette question mais je ne comprends pas pourquoi il faut changer cette class.
Parce que la documentation de la librairie que vous utilisez l'indique.
Effectivement cela fonctionne. Certainement une erreur JS dans votre codepen soit du fait du commentaire ou soit du fait de la duplication de code JS. On ne peut pas réaffecter de valeur à une variable définie en tant que constante.
j'ai effectué un nouveau test sur mon site. voici ce que cela donne ici
La taille de la description est bien réduite. Les images par contre sont trop petites sur smartphone. Je ne trouve pas où se situe la taille des images afin de les augmenter.
je continue de chercher de mon coté
Merci de votre aide
NovisCanvas
- Edité par NovisCanvas 19 janvier 2025 à 11:39:55
Effectivement cela pourrait aller. Seulement je préfèrerai que la taille de mes images soient plus grandes sur smartphone. Et ça, je n'ai toujours pas trouvé. Voici mon test sur codepen : ici
@media (max-width: 480px) (orientation: landscape)
img {
width: 100%;
max-height: 90vh;
}
.swiper-slide-active p { font-size: 70%; }
{.swiper-slide {
transform: scale(0.85); /* Ajuste la taille des slides latérales */
}
.swiper-slide-active {
transform: scale(4.5); /* Agrandit l'image centrale */
opacity: 1;
}
.description {
font-size: 0.6rem;
}
.swiper-slide img {
width: 90%; /* Limite l'image à 90% de la largeur du conteneur */
height: auto; /* Maintient les proportions */
max-height: 80vh; /* Limite la hauteur à 80% de la hauteur visible de l'écran */
margin: 0 auto; /* Centre les images */
object-fit: contain; /* Assure un redimensionnement propre */
box-shadow: 3px 8px 10px rgba(0, 0, 0, 0.2); /* Conserve une ombre élégante */
}
.swiper-wrapper {
align-items: center; /* Centre verticalement toutes les images */
height: 140vh;
margin-top: -40px;
}
#caption {
text-align: center;
font-size: 0.2rem;
margin-top: 3px;
padding: 3px; /* Espace autour du texte */
color: #333; /* Améliore la lisibilité */
}}
j'ai beau modifier les éléments de l'image, cela n'est pas satisfaisant. Que dois-je ajouter?
Bonsoir, vous avez des erreurs CSS, passer votre code au validateur pour voir et corriger les erreurs de syntaxes. => https://jigsaw.w3.org/css-validator/
L1 Il me semble qu'entre deux conditions il faille un opérateur, par exemple "and" pour dire que les deux conditions doivent valoir true ensemble.
L2 Il manque une accolade ouvrante avant le sélecteur html img et ce pour délimiter le block de code de la media queries.
L8 Pourquoi une accolade ouvrante devant le sélecteur de class .swiper-slide?
L38 Je ne vois pas dans votre codepen dans le HTML un identifiant "caption". Donc je pense que vous avez confondu le sélecteur d'identifiant avec un sélecteur de class.Car vous avez des class "caption" dans votre code.
Graphiste Paris - Mathieu Orenge
Créer un logo - Graphiste à Paris
Graphiste Paris - Mathieu Orenge
Créer un logo - Graphiste à Paris
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)