Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017 ·

Slider automático y responsive, solo con CSS

Un sencillo "Slider" automático y responsive utilizando sólo CSS y sin emplear javascript ni ningúnn otro framework. También he implementado un botón de pausa.

Vista SLIDER:

slider auto1

slider auto2

código

Elementos HTML


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="(cc) 3con14" content="Slider automático solo con CSS" />
    <title>Slider automático</title>
    <link rel="stylesheet" href="/css/normalize.css">    
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<div class="container">
  <h3>Slider automático solo con CSS</h3>
  <input type="checkbox" id="pausa">
  <div class="slider">
    <div class="show">
      <img src="/img2/wpp1_02.jpg" alt="">
      <img src="/img2/wpp1_03.jpg" alt="">
      <img src="/img2/wpp1_16.jpg" alt="">
      <img src="/img2/wpp1_05.jpg" alt="">
    </div>
  </div>
  <label for="pausa">Stop</label>
</div>
</body>
</html>

Reglas CSS


/**
 * Slider automático de 4 imágenes
 * Solo CSS, responsive
 * (cc) 3con14.pro
 */

:root {
  --base  : 480px;
  --ancho : calc(var(--base) * 1);
}
* {
  margin     : 0;padding: 0;
  box-sizing : border-box;
}
html {
  font-size  : 16px;
  color      : #fff;
  text-align : center;
  background : tan;
}
body {
  min-height : 100vh;
  display    : flex;
}
.container {
  max-width        : var(--ancho);
  width            : 96%;
  margin           : auto;
  background-color : rgba(0,0,0,0.1);
}
.slider {
  max-width : var(--ancho);
  height    : calc(var(--ancho) / (16 / 9) );
  outline   : 2px solid hsla(0, 100%, 100%, 1);
  position  : relative;
  margin    : auto;
  overflow  : hidden;
  background-color: #000;
}
.show {
  position    : absolute;
  top         : 0;
  left        : 0;
  line-height : 0;
  display     : table;
  width       : 100%;
  height      : 400%;
  animation   : ani 16s ease-out infinite alternate;
}
/*
 .show:hover {
  cursor               : pointer;
  animation-play-state : paused;
}  */
img {
  max-width : 100%; /* 24.84% en FF */
  height    : auto;
  opacity   : 1;
  /* display   : table-cell; */  /* para FF */
}

@keyframes ani {
  0%,20%   { top: 0; opacity: 1;}
  25%      { top: 0; }
  26%      { opacity: 0; }
  27%,47%  { top: -100%; opacity: 1;}
  52%      { top: -100%; }
  53%      { opacity: 0; }
  54%,74%  { top: -200%; opacity: 1;}
  79%      { top: -200%; }
  80%      { opacity: 0;}
  81%,100% { top: -300%; opacity: 1;}
}

h3 { margin: 0.2em 0; }
input[type="checkbox"] { display: none; }
label { 
  margin      : 1em;
  line-height : 2em;
  cursor      : pointer;
}
input[type="checkbox"]:checked ~ label { 
  color: red; font-weight: 900;
}
input[type="checkbox"] + div.slider > div.show { 
  animation-play-state: running;
}
input[type="checkbox"]:checked + div.slider > div.show { 
  animation-play-state: paused;
}

 

Etiquetas: HTML5, CSS3

Imprimir

En línea...

Hay 23 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png5.png5.png8.png9.png
Hoy ........31
Ayer .......16
Mes ........347

Domingo, 25 Junio 2017