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

Slider manual y responsive, solo con CSS

Un sencillo "Slider" manual responsive utilizando sólo CSS y sin emplear javascript ni ningón otro framework.

Vista SLIDER:

slider1

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="author" content="Slider manual solo con CSS" />
    <title>Slider</title>
    <link rel="stylesheet" href="/css/normalize.css">    
    <link rel="stylesheet" href="/css/estilos.css">
</head>
<body>
<main>

  <div class="slider">

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton1" checked>
      <label for="boton1"></label>
      <img src="/img/1g.jpg">
    </div>

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton2">
      <label for="boton2"></label>
      <img src="/img/2g.jpg">
    </div>

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton3">
      <label for="boton3"></label>
      <img src="/img/3g.jpg">
    </div>

    <div class="diapositiva">
      <input type="radio" name="boton" id="boton4">
      <label for="boton4"></label>
      <img src="/img/4g.jpg">
    </div>

  </div>

</main>
</body>
</html>

Reglas CSS


:root {
  --ancho: 500px;
}
* { 
  margin: 0; padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background-color: tan;
  display: flex;
}
main {
  max-width: 800px;
  width: 96%;
  min-height: 500px;
  margin: auto;
  background-color: rgba(255,0,0,0.1);
}

.slider {
  max-width: var(--ancho);
  height: calc(var(--ancho) / 1.78);
  margin: 5% auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  background-color: #333;
}
.slider input[type="radio"] {
  display: none;
}
.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transform: scale(0);
  opacity: 0;
  transition: all 0.5s ease-in;
  outline: 1px solid transparent;
}

.slider input[type="radio"]:checked ~ img {
    transform: scale(1);
    opacity: 1;
}
.slider input[type="radio"] + label {
  position: relative;
  z-index: 100;
  margin: 10px;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #000;
  background-color: hsla(0, 0%, 100%, 1);
}
.slider input[type="radio"]:checked + label {
  box-shadow: 0 0 0 2px #000,
              0 0 0 2px #fff inset;
  background-color: hsla(0, 100%, 50%, 1);
}
label:hover {
  cursor: pointer;
}

 

Etiquetas: HTML5, CSS3

Imprimir

En línea...

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

Prácticas...

aulav

Visitas...

0.png5.png5.png4.png7.png
Hoy ........5
Ayer .......15
Mes ........305

Sábado, 24 Junio 2017