image, textes, alignement et carrousel

Sleurp

Bonjour,
J'ai découvert ce projet via le podcast "Projets Libres !" du 8 avril dernier.
Bravo pour ce projet ! Il est vraiment bien fait !

J'avais quelques bases en html et css mais ça date de 4-5 ans sans pratiquer.
J'aimerais aligner une photo avec un texte sur la même ligne et décider de centrer le texte haut, milieu ou bas selon le rendu.
Que dois je faire ? Je ne suis pas tombé ou je n'ai pas su interpréter les infos dans les docs.

Y a t'il un effet carrousel possible pour des images ?

Merci à vous !

lexoyo

Salut, bienvenue sur le forum et merci pour ton message.

Pour aligner une image et du texte sur la même ligne avec un alignement vertical personnalisé, tu peux recréer cette structure dans l'interface de Silex :

<div style="display: flex; align-items: center;">
  <img src="image.jpg" style="height: 100px; margin-right: 10px;">
  <p style="margin: 0;">Texte ici</p>
</div>

Tu n’as pas besoin d’écrire ce code, utilises l'interface hein

Pour l'alignement vertical, joue avec les valeurs de align-items

Pour le carrousel : il existe un bloc slide show, je sais si c'est ce que tu cherches? Et je ne l’ai pas encore utilisé personnellement. D’autres ici pourront sûrement t’en dire plus si besoin cc @Jeaan-phi @ceubri @jonas

N'hésite pas si tu je peux aider d'avantage

Jeaan-phi

Bonjour, voici un code pour un slider:

Perso, les style CSS, je les mets dans la section Page --> roue crantée --> code

<style>
     .slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    margin: 50px auto; /* Permet d'espacer le slider sans affecter le reste du site */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .slide {
            min-width: 100%;
          position: relative;
        }
        .slide img {
            width: 100%;
            display: block;
            border-radius: 10px;
          max-height: 400px;
          max-width: 400px;
          object-fit: cover;
        }
  
 
.text-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
}

    </style>

Jeaan-phi

Le HTML dans un container Custom code comme ceci:
Container --> Custom code

  <div class="slider">
    <div class="slide">
      <img src="assets/img1.webp" alt="Description de ton img1">
      <div class="text-overlay">Titre de ton image</div>
    </div>
    <div class="slide">
      <img src="assets/img2.webp" alt="Description de ton img2">
      <div class="text-overlay">Titre de ton image</div>
    </div>
  </div>
</div>

lexoyo

ah ok mais ca te fait un slideshow ? sans js sans block silex ?

Jeaan-phi

lexoyo

En effet il manque ceci dans Page --> roue crantée --> code

document.addEventListener("DOMContentLoaded", function() {
    const slider = document.querySelector('.slider');
    const slides = document.querySelectorAll('.slide');
    let index = 0;

    if (!slider || slides.length === 0) {
        console.error("Le slider ou les slides sont introuvables.");
        return;
    }

    // Définir la largeur totale du slider
    slider.style.width = `${slides.length * 100}%`;

    function updateSlider() {
        slider.style.transform = `translateX(-${index * 100}%)`;
    }

    setInterval(() => {
        index = (index + 1) % slides.length;
        updateSlider();
    }, 4000);
});

</script>