A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Slider

11/12
Recursos

Aportes 18

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

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 鈥淟o 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 鈥渪鈥 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 鈥渪鈥:

 <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 鈥渞adios鈥 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 鈥渁鈥 fuera del contenedor modal__content鈥搒lider.

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 鈥減osition: absolute鈥 , 鈥渢op:10%鈥 y "right:5%"
4.- Al div donde esta el carousel le puse 鈥減osition: absolute鈥 y 鈥渢op: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