Je crée un code avec un menu adapté pour les smartphones et il y a un parasite avec mon code de carroussel. Lorsque je mets les deux codes ensemble, une bande rouge apparait sur le mot "boutique en ligne". je n'arrive pas à identifier le problème, j'ai essayé plusieurs codes, modifié plusieurs fois les éléments, rien n'y fait. Séparément les deux codes fonctionnent mais ensemble, il ne fonctionnent pas.
/* carroussel */
.subtituloh1 {
font-size: auto;
color: grey;
text-align: center;
font-family: 'Dancing Script', cursive;
margin-bottom: 0;
display: block;
margin-top: 0px;
}
.subtituloh2 {
margin: 0;
display: inline;
font-size: auto;
text-transform: uppercase;
display: inline-block;
font: caption;
margin-top: -0px;
}
.conteneur-texte {
display: block;
margin-top: -5px;
}
.descripcion {
font-size: 18px;
margin: 7px 0;
color: grey;
margin-top: -5px;
}
.carousel .carousel-item {
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
display: block;
margin-top: 150px;
}
.carousel .carousel-item img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: .5s ease;
object-fit: cover;
}
/* menu mobile */
.wr-fdgrs {
display:none!important;
}
/* Styles pour le menu avec la classe "menu" */
nav.menumobile ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column; /* Affiche les éléments en colonne */
}
nav.menumobile ul li {
margin: 10px;
}
nav.menumobile ul li:first-child {
border-bottom: 1px solid black; /* Ajoute une bordure inférieure au premier élément */
}
nav.menumobile ul li a {
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
font-size: 4vw; /* Utilisez une unité de mesure relative comme vw */ text-decoration: none;
color: black;
}
le js:
document.addEventListener('DOMContentLoaded', function() {
//--- CAROUSEL---------------
var elementosCarrousel = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elementosCarrousel, {
// ----Opciones
duration: 150, //Duración de la transición en milisegundos.
dist: -80, // Distacia de perspectiva (de profundidad) entre cada imagen.
shift: 5, // Distancia entre cada imagen a los costados
padding: 5, //Distacia dentro
numVisible: 5, //Numero de lementos visibles
indicators: false, //Indicadores. Valor: boolean
noWrap: false //Desplazarse a partir del primer articulo/imagen
});
// ---- MEDIA---------------
var media = document.querySelectorAll('.materialboxed');
var instancesMedia = M.Materialbox.init(media,{
inDuration: 450, // Duración de la transición de entrada
outDuration: 350 // Duración de la transición de salida
});
});
Merci beaucoup pour votre aide car là je suis perdu!!
Ce fond rouge clair (c'est bien ça dont tu parles ?) vient de materialize.min.css, que tu charges. Materialize est un framework front-end complet ; est-ce que tu l'utilises comme base de ton travail ou bien tu l'as ajouté pour le carrousel ? Si c'est la seconde option, change de carrousel : tu ne vas pas charger un framework entier avec son style non-neutre, juste pour un élément.
merci pour ta réponse. oui c'est bien cette bande là! Effectivement je charge cela pour mon carroussel. Par quoi puis je remplacer ce framework pour avoir toujours cet effet de carroussel?
Tu ne peux pas. De ce que je comprends, c'est littéralement le carrousel du framework, donc il ne fonctionnera pas sans. Je t'invite à trouver un autre script.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Merci pour vos messages. Je ne parviens pas à télécharger le fichier materialize car il est trop lourd... donc mon hébergeur bloque le téléchargement.
Si j'ai bien compris il faudrait que je change carrément de carrousel. C'est dommage, celui là me plaisait bien, j'aimais bien le tactile du carrousel; dommage qu'il y ait cette fameuse bande rouge.
Où pourrais je trouver des carrousels pour m'inspirer? celui là je l'avais travaillé sur codepen mais je n'en ai pas trouvé d'autres qui me plaise. je recherche vraiment le tactile et la fluidité du carrousel.
J'avais bien le bon fichier mais la réponse est toujours la même, le fichier est trop long
ou sinon j'avais déjà créer mon propre carrousel mais il n'y a pas cette fonction tactile. Donc peut etre comment faire pour ajouter cette fonction à mon carrousel existant.
Alors j'ai testé le code sur ma page. Effectivement la bande rouge n'apparait plus , ça c'est top! Par contre le carrousel ne se met pas en action. donc il y a forcément quelque chose que je ne fais pas bien et un code que je ne mets pas au bon endroit.
Je récapitule pour être sûr:
Dans le Head:
<meta charset="utf-8">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<script>
// Powered by https://materializecss.com
document.addEventListener('DOMContentLoaded', function() {
//--- CAROUSEL---------------
var elementosCarrousel = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elementosCarrousel, {
// ----Opciones
duration: 150, //Duración de la transición en milisegundos.
dist: -80, // Distacia de perspectiva (de profundidad) entre cada imagen.
shift: 5, // Distancia entre cada imagen a los costados
padding: 5, //Distacia dentro
numVisible: 5, //Numero de lementos visibles
indicators: false, //Indicadores. Valor: boolean
noWrap: false //Desplazarse a partir del primer articulo/imagen
});
// ---- MEDIA---------------
var media = document.querySelectorAll('.materialboxed');
var instancesMedia = M.Materialbox.init(media,{
inDuration: 450, // Duración de la transición de entrada
outDuration: 350 // Duración de la transición de salida
});
});
</script>
j'ai donc mis un lien vers mon css en haut de la page html
et j'ai mis un lien vers mon js dans le head
comme je le faisais pour mon autre carrousel.
Est ce qu'il y a quelque chose que je fasse incorrectement?
et si j'ajoute la fonction tactile à mon contentflow qui fonctionne et dont je t'ai présenté le code plus haut. Comment intégrer le code tactile dans le js et le html?
Alors en ce qui concerne le js, perso , j'y entend rien.
Donc ca tu devrais peut être demander dans le fofo js.
Dès que j'ai le temps je regarde ton contentflow.
Bonjour Uniuc,
Avez vous pu regarder mon code afin de créer un carrousel adapté à mon site?
supprimer une bande rouge
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
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 :)