Implementando un carousel con CSS Scroll Snap

Clase 15 de 21 • Diseño web con PostCSS, el futuro de CSS

Fernando Rivas Palomo

student•

Excelente alternativa hacerlo con javascript.

Al definir el overflow en auto a la clase u-scrollContainer me muestra con Chome una barra de scroll horizontal, que esta siempre visible. ¿Cómo hago para ocultarla?

Un saludo.

Ricardo Azpeitia P.

student•

overflow:hidden; // ambas

overflow-y:hidden; // vertical

overflow-x:hidden; // horizontal

Miguel Rivas

student•

Como estan soportando los browsers a dia de hoy Css Scroll Snap.

Miguel Rivas

student•

http://caniuse.com/#search=Scroll%20Snap

Usuario anónimo

user•

Buenas tardes lo que pasa es que a mi no me aparecen las imagenes de las guitarras ni el logo del footer y ya tengo la carpeta “images” dentro de la carpeta “dist”. Alguien me podria ayudar.

MUCHAS GRACIAS.

Diego Forero

Team Platzi•

Hola, puedes compartir el código que estas haciendo, probablemente tienes un error de digitación y por esto no cargan las imágenes.

Usuario anónimo

user•

@GOLLUM23 esto es lo que estoy haciendo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>imvie las mejores guitarras</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Allerta" rel="stylesheet">
    <link rel="stylesheet" href="css/invie.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  </head>
  <body>
    <section id="portada" class="InvieHero">  <!-- portada -->
      <header id="header" class="InvieHero-header u-wrapper"><!-- encabezado -->
        <figure class="InvieHero-logo"><!-- logotipo -->
          <img src="images/invie.png" srcset="images/invie.png 1x, images/invie2x.png 2x" width="186" height="60" alt="invie logotipo" />
        </figure>
        <span class="InvieHero-btn icon-menu" id="menuicono"></span>
        <nav class="InvieHero-navbar" id="manuactivo"><!-- menu -->
          <ul class="InvieHero-menu"><!-- lista desordenada -->
            <li class="InvieHero-menu-item"><!-- elementos listas -->
              <a href="index.html"><!-- enlaces -->
                home
              </a>
            </li>
            <li class="InvieHero-menu-item"><!-- elementos listas -->
              <a href="precios.html"><!-- enlaces -->
                precios
              </a>
            </li>
            <li class="InvieHero-menu-item"><!-- elementos listas -->
              <a href="#guitarras"><!-- enlaces -->
                guitarras
              </a>
            </li>
          </ul>
        </nav>
      </header>
      <div class="InvieHero-copy u-wrapper">
        <h1 class="InvieHero-copy-title">Guitarras <span>Invie</span>sibles</h1>
        <h3 class="InvieHero-copy-subtitle">se la estrella de rock que siempre quisiste ser</h3><!-- resumen -->
        <a href="precios.html" class="enlacebot"><button class="InvieHero-copy-bot">conoce mas</button></a>
      </div>
    </section>
    <section id="guitarras" class="InvieGuitars u-wrapper"><!-- guitarras -->
      <h2 class="InvieGuitars-title">nuestras guitarras</h2>
      <div class="u-scrollcontainer">
        <article class="u-scrollcontainer-itemcontainer"><!-- articulo1 -->
        <div class="u-scrollcontainer-itemcontent">
          <img class="InvieGuitars-item-img" data-src="images/invie-acustica.png|images/invie-acustica2x.png" alt="guitarra invie acustica" width="350" />
          <div class="InvieGuitars-item-container">
            <h3 class="InvieGuitars-item-title">invie acustica</h3>
            <ol class="InvieGuitars-item-list">
              <li>estilo vintage</li>
              <li>madera pura</li>
              <li>incluye estuche de aluminio</li>
            </ol>
          </div>
        </div>
        </article>
        <article class="u-scrollcontainer-itemcontainer"><!-- articulo2 -->
        <div class="u-scrollcontainer-itemcontent">
          <img class="InvieGuitars-item-img" data-src="images/invie-classic.png|images/invie-classic2x.png" alt="guitarra invie classic" width="350" />
          <div class="InvieGuitars-item-container">
            <h3 class="InvieGuitars-item-title">invie classic</h3>
            <ol class="InvieGuitars-item-list">
              <li>estilo vintage</li>
              <li>liviana</li>
              <li>inicia tu camino como rockstars</li>
            </ol>
          </div>

        </div>
        </article>
      </div>

      <div class="u-grid u-wrapper">
        <div class="u-grid-column"><p>Col1</p></div>
        <div class="u-grid-column"><p>Col2</p></div>
        <div class="u-grid-column"><p>Col3</p></div>
        <div class="u-grid-column"><p>Col4</p></div>
        <div class="u-grid-column"><p>Col5</p></div>
      </div>

    </section>

    <footer class="InvieFooter">
      <div class="InvieFooter-container u-wrapper">
      <div class="InvieFooter-contact">
        <img class="InvieFooter-logo" data-src="images/invie-white.png|images/invie-white2x.png" alt="logo invie blanco">
        <a class="InvieFooter-link" href="tel:+573024456678"><strong>Telefono</strong><span>3024456678</span></a class="InvieFooter-link">
        <a class="InvieFooter-link" href="mailto:ramirezandrew172@gmail.com"><strong>E-mail</strong><span>contacto@invie.com</span></a>
      </div>
      <form class="InvieFooter-form">
        <div class="InvieFooter-form-colum">
        <label class="InvieFooter-form-label" for="nombre">Nombre</label>
          <input class="InvieFooter-form-input InvieFooter-form-input--text" type="text" required id="nombre" name="nombre" />
        <label class="InvieFooter-form-label" for="email">Correo</label>
          <input class="InvieFooter-form-input InvieFooter-form-input--text" type="email" required id="email" name="email" />
          <div class="sexo">
        <label class="InvieFooter-form-label" for="mujer">
          <input class="InvieFooter-form-input InvieFooter-form-input--radio" type="radio" id="mujer" name="sexo" value="mujer" />mujer
        </label>
        <label  class="InvieFooter-form-label"for="hombre">
          <input class="InvieFooter-form-input InvieFooter-form-input--radio" type="radio" id="hombre" name="sexo" value="hombre" />hombre
        </label>
      </div>
      <div class="intereses">
        <label class="InvieFooter-form-label" for="cotizacion">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="cotizacion" name="cotizacion" value="cotizacion" />cotizacion
        </label><br>
        <label class="InvieFooter-form-label" for="reclamos">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="reclamos" name="reclamos" value="reclamos" />reclamos
        </label><br>
        <label class="InvieFooter-form-label" for="comentarios">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="comentarios" name="comentarios" value="comentarios" />comentarios
        </label><br>
        <label class="InvieFooter-form-label" for="otros">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="otros" name="otros" value="otros" />otros
        </label>
      </div>
    </div>
      <div class="InvieFooter-form-colum">
        <label class="InvieFooter-from-label" for="comentarios">comentarios</label>
        <textarea class="InvieFooter-form-input InvieFooter-form-input--textarea" name="comentarios" id="casilla" cols="21" rows="7"></textarea>
        <input class="InvieFooter-form-btn" type="submit" value="enviar" class="boton" />
      </div>
      </form>
    </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.8.2/blazy.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="accion.js"></script>
  </body>
</html>

Alexander Marenco

student•

Alguien sabe si ahora chrome soporta el scroll snap. No pude hacer prueba de ello u.u

Diego Forero

Team Platzi•

Hola, por el momento no tiene soporte, puedes verificar el soporte de esta característica en caniuse

Renato Colarusso

student•

no me cargan las imagenes, en el video anterior puse el codigo. Alguien podria ayudar?

Diego Forero

Team Platzi•

Lo mejor es que subas tu código a github y compartas el enlace, la parte de código que pusiste esta bien, pero no conocemos la estructura del proyecto.

Como tienes el código debes tener la carpeta de images en la misma carpeta que el archivo index.html, revisa que no tengas mal el nombre de la carpeta o la imagen.

Renato Colarusso

student•

ok, revisaré todo, muchas gracias

Erick Neftalí Sarmiento Cortes

student•

Wooow la voy a implementar de inmediato en una pagina que estoy desarrollando. Gracias Carlos Azaustre

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>imvie las mejores guitarras</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Allerta" rel="stylesheet">
    <link rel="stylesheet" href="css/invie.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  </head>
  <body>
    <section id="portada" class="InvieHero">  <!-- portada -->
      <header id="header" class="InvieHero-header u-wrapper"><!-- encabezado -->
        <figure class="InvieHero-logo"><!-- logotipo -->
          <img src="images/invie.png" srcset="images/invie.png 1x, images/invie2x.png 2x" width="186" height="60" alt="invie logotipo" />
        </figure>
        <span class="InvieHero-btn icon-menu" id="menuicono"></span>
        <nav class="InvieHero-navbar" id="manuactivo"><!-- menu -->
          <ul class="InvieHero-menu"><!-- lista desordenada -->
            <li class="InvieHero-menu-item"><!-- elementos listas -->
              <a href="index.html"><!-- enlaces -->
                home
              </a>
            </li>
            <li class="InvieHero-menu-item"><!-- elementos listas -->
              <a href="precios.html"><!-- enlaces -->
                precios
              </a>
            </li>
            <li class="InvieHero-menu-item"><!-- elementos listas -->
              <a href="#guitarras"><!-- enlaces -->
                guitarras
              </a>
            </li>
          </ul>
        </nav>
      </header>
      <div class="InvieHero-copy u-wrapper">
        <h1 class="InvieHero-copy-title">Guitarras <span>Invie</span>sibles</h1>
        <h3 class="InvieHero-copy-subtitle">se la estrella de rock que siempre quisiste ser</h3><!-- resumen -->
        <a href="precios.html" class="enlacebot"><button class="InvieHero-copy-bot">conoce mas</button></a>
      </div>
    </section>
    <section id="guitarras" class="InvieGuitars u-wrapper"><!-- guitarras -->
      <h2 class="InvieGuitars-title">nuestras guitarras</h2>
      <div class="u-scrollcontainer">
        <article class="u-scrollcontainer-itemcontainer"><!-- articulo1 -->
        <div class="u-scrollcontainer-itemcontent">
          <img class="InvieGuitars-item-img" data-src="images/invie-acustica.png|images/invie-acustica2x.png" alt="guitarra invie acustica" width="350" />
          <div class="InvieGuitars-item-container">
            <h3 class="InvieGuitars-item-title">invie acustica</h3>
            <ol class="InvieGuitars-item-list">
              <li>estilo vintage</li>
              <li>madera pura</li>
              <li>incluye estuche de aluminio</li>
            </ol>
          </div>
        </div>
        </article>
        <article class="u-scrollcontainer-itemcontainer"><!-- articulo2 -->
        <div class="u-scrollcontainer-itemcontent">
          <img class="InvieGuitars-item-img" data-src="images/invie-classic.png|images/invie-classic2x.png" alt="guitarra invie classic" width="350" />
          <div class="InvieGuitars-item-container">
            <h3 class="InvieGuitars-item-title">invie classic</h3>
            <ol class="InvieGuitars-item-list">
              <li>estilo vintage</li>
              <li>liviana</li>
              <li>inicia tu camino como rockstars</li>
            </ol>
          </div>

        </div>
        </article>
      </div>

      <div class="u-grid u-wrapper">
        <div class="u-grid-column"><p>Col1</p></div>
        <div class="u-grid-column"><p>Col2</p></div>
        <div class="u-grid-column"><p>Col3</p></div>
        <div class="u-grid-column"><p>Col4</p></div>
        <div class="u-grid-column"><p>Col5</p></div>
      </div>

    </section>

    <footer class="InvieFooter">
      <div class="InvieFooter-container u-wrapper">
      <div class="InvieFooter-contact">
        <img class="InvieFooter-logo" data-src="images/invie-white.png|images/invie-white2x.png" alt="logo invie blanco">
        <a class="InvieFooter-link" href="tel:+573024456678"><strong>Telefono</strong><span>3024456678</span></a class="InvieFooter-link">
        <a class="InvieFooter-link" href="mailto:ramirezandrew172@gmail.com"><strong>E-mail</strong><span>contacto@invie.com</span></a>
      </div>
      <form class="InvieFooter-form">
        <div class="InvieFooter-form-colum">
        <label class="InvieFooter-form-label" for="nombre">Nombre</label>
          <input class="InvieFooter-form-input InvieFooter-form-input--text" type="text" required id="nombre" name="nombre" />
        <label class="InvieFooter-form-label" for="email">Correo</label>
          <input class="InvieFooter-form-input InvieFooter-form-input--text" type="email" required id="email" name="email" />
          <div class="sexo">
        <label class="InvieFooter-form-label" for="mujer">
          <input class="InvieFooter-form-input InvieFooter-form-input--radio" type="radio" id="mujer" name="sexo" value="mujer" />mujer
        </label>
        <label  class="InvieFooter-form-label"for="hombre">
          <input class="InvieFooter-form-input InvieFooter-form-input--radio" type="radio" id="hombre" name="sexo" value="hombre" />hombre
        </label>
      </div>
      <div class="intereses">
        <label class="InvieFooter-form-label" for="cotizacion">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="cotizacion" name="cotizacion" value="cotizacion" />cotizacion
        </label><br>
        <label class="InvieFooter-form-label" for="reclamos">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="reclamos" name="reclamos" value="reclamos" />reclamos
        </label><br>
        <label class="InvieFooter-form-label" for="comentarios">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="comentarios" name="comentarios" value="comentarios" />comentarios
        </label><br>
        <label class="InvieFooter-form-label" for="otros">
          <input class="InvieFooter-form-input InvieFooter-form-input--check" type="checkbox" id="otros" name="otros" value="otros" />otros
        </label>
      </div>
    </div>
      <div class="InvieFooter-form-colum">
        <label class="InvieFooter-from-label" for="comentarios">comentarios</label>
        <textarea class="InvieFooter-form-input InvieFooter-form-input--textarea" name="comentarios" id="casilla" cols="21" rows="7"></textarea>
        <input class="InvieFooter-form-btn" type="submit" value="enviar" class="boton" />
      </div>
      </form>
    </div>
    </footer>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.8.2/blazy.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script src="accion.js"></script>
  </body>
</html>

Implementando un carousel con CSS Scroll Snap

El futuro de CSS con PostCSS y CSSNext

Bienvenidos al modulo de PostCSS

¿Qué es PostCSS ?

Nomenclatura BEM ( Bloque, Elemento, Modificador )

Configurando nuestras tareas en Gulp: Servidor, Procesamiento de CSS y Watch

Autoprefixer: Cómo añadir vendor prefixes usando CSS standard

Anidando clases de CSS con Nested

Configurando CSSNext en nuestro archivo Gulp

Propiedades personalizadas

Usando Calc

Media queries personalizadas

Manejo de color

Manejo de filtros

Mixins: Cómo reutilizar estilos de CSS

Separando nuestros archivos CSS y uso de @import

Implementando un carousel con CSS Scroll Snap

Grids responsive con Lost

Minificando archivos con CSSWring

Fuentes responsive con rucksack

Unificando media-queries con Mqpacker

Conclusiones de PostCSS

Desafio 1

Desafio 2