Slider

Me dio hambre a medio curso, perdón

para ocultar los botones de radius usé display none:

#radio1,
#radio2,
#radio3 {
  display: none;
}

para el botón de “Lo quiero” lo metí dentro de su propio contenedor:

.modalbutton input {
  background: var(--secondaryColor);
  color: var(--white);
  font-size: 1.7rem;
  border: 0;
  outline: none;
  padding: 15px 35px;
}

Y para colocar la “x” a la izquierda, la saque del contenedor donde esta el Slider y la coloque en un contenedor superior, de forma que la flexbox no me alterara los estilos de la “x”:

 <section class="modal hidden">
        <div class="modalContainer">
          <p>
            <a class="closeButton">X</a>
          </p>
          <div class="modalContent">
            <div class="modalContentSlider">
              <input type="radio" name="slider1" id="radio1" checked />
              <input type="radio" name="slider1" id="radio2" />
              <input type="radio" name="slider1" id="radio3" />
              <div class="cards">
                <label for="radio1" class="card card1">
                  <img src="./assets/spidermancard1.png" alt="Spiderman 1" />
                </label>
                <label for="radio2" class="card card2">
                  <img src="./assets/spidermancard2.png" alt="Spiderman 2" />
                </label>
                <label for="radio3" class="card card3">
                  <img src="./assets/spidermancard3.png" alt="Spiderman 3" />
                </label>
              </div>
            </div>
            <div class="modalbutton">
              <input type="button" value="Lo Quiero!" />
            </div>
          </div>
        </div>
      </section>

Mi HTML

<div class="modal-container">
                <img class="modal-container__close" src="https://img.icons8.com/plumpy/50/000000/macos-close.png" alt="close"/>

                <div class="modal-container__slider">
                    <input type="radio" name="slider-1" id="radio-1" 
                    checked>
                    <input type="radio" name="slider-1" id="radio-2" >
                    <input type="radio" name="slider-1" id="radio-3" >

                    <div class="cards">
                        <label for="radio-1" id="card-1" class="card">
                            <img src="" alt="">
                        </label>
                        <label for="radio-2"id="card-2" class="card">
                            <img src="" alt="">
                        </label>
                        <label for="radio-3" id="card-3" class="card">
                            <img src="" alt="">
                        </label>
                    </div>
                </div>
                <button>I want it!</button>
            </div>

.
Mi CSS

.modal-container {
    background: white;
    width: 50%;
    border-radius: 20px;
    height: 50%;
    display: grid;
    flex-direction: column;
    place-items: center;
    grid-template-columns: 60px 1fr 60px;
}

.modal-container__close {
    cursor: pointer;
    transform: translatey(-27px);
    grid-column: 3 / 4;
}

.modal-container__slider {
    width: 300px;
    height: 200px;
    transform-style: preserve-3d;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.modal-container__slider input {
    visibility: hidden;
}

.modal-container button {
    grid-column: 2 / 3;
    width: 250px;
    height: 50px;
    border: none;
    background: var(--red);
    color: white;
    font-size: 1.8rem;
    border-radius: 3px;
}

.modal-container button:hover {
    background: var(--blue);
}

Slider Retos

Código: https://github.com/paolojoaquin/lego-superheroes/tree/Clase/11-slider

Me costo subir este aporte pero aqui les comparto mi resultado, los retos, y el código de la clase.
1.- Para ocultar los “radios” checks:

input[type="radio"] {
    visibility: hidden;
}

2.- Alinear el icono de cerrar (x):
Añadi la clase y los estilos:

.modal__content--close {
    place-self: end;
    align-self: start;
}

Pd: esto porque nuestro componente padre en .modal__content tiene display:grid
3.- Añadir "botón Lo quiero!"
Agregue un button en el html:

 <div class="modal__content--slider">
	....
 </div>
 <!--  Debajo de .modal__content--slider -->
 <button class="button-red">Lo quiero!</button>

Y le dí estilos:

.button-red {
    box-sizing: border-box;
    padding: 5px 10px;
    border: 3px solid var(--primary-blue);
    background: var(--primary-red);
    font-size: 1rem;
    color: white;
    border-radius: 20px;
    margin: 20px 0 0 0;
}

~
Por si alguien lo necesita 😃

Ese carrusel me costó, pero logré terminarlo

Usé display: none; para quitar los input radio y que no me descuadrara los espacios de cada elemento, ya que si se usa visibility: hidden; queda ahí el espacio usado y con el display desaparece acomodando muy bien el diseño.

Para el botón “!Lo quiero¡” usé la etiqueta “a” fuera del contenedor modal__content–slider.

Les comparto mi resultado publicado en la siguiente link
demo
acá el repo con el código

¡un carousel y sin javascript!, a veces subestimo CSS

Así quedó el mío:

Para ocultar los inputs utilicé la clase hidden que ya teníamos definida.

Estaría genial más adelante un proyecto más completo con más inventario y funcionalidades.
Pero este está bien para empezar. La profesora explica muy bien

Una breve explicación de por qué se aplican estos selectores a las cards:
Antes que nada el selector #radio-x:checked es para aplicar el estilo cuando una card este seleccionada así que tenemos que fijarnos en este selector y el último selector #card-x porque este indica cuales cartas serán afectadas. Así que vamos a ver que hace cada grupo de selectores:

• El primer grupo es para posicionar una card seleccionada en el centro, es por eso que los números de las cards coinciden
• El segundo grupo es para mover las cards adecuadas a la derecha, es por eso que la card seleccionada es un número mas que la card que esta checkeada
• El ultimo grupo es para mover las cards adecuadas a la izquierda, es por eso que la card se reduce en uno con respecto a la card checkeada

Bueno lo dejo por aca para que puedan leerlo con calma 🌊 ya que me tomo tiempo entenderlo

/** Estilos para cuando una card este seleccionada **/
#radio-1:checked ~ .cards #card-1,
#radio-2:checked ~ .cards #card-2,
#radio-3:checked ~ .cards #card-3 {
        transform: translateX(0) scale(1);
        opacity: 1;
        z-index: 1; 
}

/** Cuando una card este seleccionada tirar las otras para el costado derecho **/
#radio-1:checked ~ .cards #card-2,
#radio-2:checked ~ .cards #card-3,
#radio-3:checked ~ .cards #card-1 {
        transform: translateX(40%) scale(0.8);
        opacity: 0.5;
        z-index: 0; 
}
    
/** Cuando una card este seleccionada tirar las otras para el costado izquierdo **/
#radio-1:checked ~ .cards #card-3,
#radio-2:checked ~ .cards #card-1, 
#radio-3:checked ~ .cards #card-2 {
        transform: translateX(-40%) scale(0.8);
        opacity: 0.5;
        z-index: 0; 
}
	

genial el curso acá les dejo mi idea
mi repo

Muy interesante aprender como hacer tan bonito slider!

Les dejo mi repo y mi la pagina web, trate agregar algunas animaciones más para practicar.

Para poder posicionar la X en la esquina hice los siguiente (por si alguien esta batallando)

1.-A la clase .modal__content le puse "position:relative"
2.-La imagen la puse dentro de un div pero ese div lo deje dentro de la clase .modal__content
3.- Al div de la imagen le puse “position: absolute” , “top:10%” y "right:5%"
4.- Al div donde esta el carousel le puse “position: absolute” y “top:50%”

Saludos ✌🏼

Simbolo ( ~ ) 😮

Si quieres aplicar este símbolo debes proseguir con el siguiente comando.

Alt + 126
Que el 126 es su código en la representación ASCII