Como hacer un slideshow en html y css
Presentación de diapositivas sólo css
Un concepto de presentación de diapositivas puramente CSS y HTML. Para añadir o eliminar diapositivas: 1. añadir una nueva plantilla de diapositivas en el HTML; 2. actualizar la variable SCSS $slide-count; 3. colores de las pestañas: actualizar la variable SCSS $c-slides 4. imágenes emergentes de las diapositivas: actualizar la variable SCSS $b-slides. Utiliza las pestañas de abajo para cambiar las diapositivas.
Esta es una versión extendida de la galería de diapositivas CSS pura http://codepen.io/alexerlandsson/pen/RaZdox que viene con más y más fácil personalización y botones anteriores/siguientes. Hecho por Alexander Erlandsson 24 de octubre de 2016
Código html de la presentación de diapositivas
Utiliza el enfoque de usar fotogramas clave de animación para desplazarse a través de cada una de las diapositivas modificando cada una de las propiedades del margen izquierdo de la diapositiva durante la animación. El tipo de animación puede ser especificado para que las diapositivas puedan ser animadas según la duración y el efecto requerido. Dividiremos la tarea en dos secciones, es decir, en la primera, decoraremos la estructura utilizando únicamente HTML y en la segunda, decoraremos la estructura utilizando CSS.
Segunda sección: Esta sección consiste en todos los estilos que se utilizarán para hacer la presentación de diapositivas. La animación que se utilizará para mover cada una de las diapositivas se define estableciendo la propiedad margin-left como se requiere para cada diapositiva. Esto le da una apariencia de transición suave entre cada una de las diapositivas.
Slider en javascript
<style> .slider { width: 500px; height: 300px; background-color: yellow; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: center; overflow: hidden; } . image-container { width: 1500px; background-color: pink; height: 300px; clear: both; position: relative; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; transition: left 2s; } .slide { float: left; margin: 0px; padding: 0px; position: relative; } #slide-1:target ~ .image-container { left: 0px; } #slide-2:target ~ .image-container { left: -500px; } #slide-3:target ~ .image-container { left: -1000px; } .buttons { position: relative; top: -20px; } .buttons a { display: inline-block; height: 15px; width: 15px; border-radius: 50px; background-color: lightgreen; } </style>
<style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: «Helvetica», sans-serif; } img { max-width: 100%; } .slider-container { height: 100%; width: 100%; position: relative; overflow: hidden; text-align: center; } .menu { position: absolute; left: 0; z-index: 900; width: 100%; bottom: 0; } .menu label { cursor: pointer; display: inline-block; width: 16px; height: 16px; background: #fff; border-radius: 50px; margin: 0 0.2em 1em; } .menu label:hover, .menu label:focus { background: #1c87c9; } .slide { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-size: cover; background-position: 50% 50%; transition: left 0s 0.75s; } [id^=»slide»]:checked + .slide { left: 0; z-index: 100; transition: left 0.65s ease-out; } .slide-1 { background-image: url(«/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg»); } . slide-2 { background-image: url(«/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg»); } .slide-3 { background-image: url(«/uploads/media/default/0001/03/b87b29b6ca67b64b76651037dc16f5a46e73b42a.jpeg»); } </style>
Presentación de diapositivas html sin javascript
Actualmente estoy aprendiendo desarrollo web con el plan de estudios de OdinProject. Hay una tarea que consiste en crear un sencillo carrusel de imágenes. Debe contener flechas en cada lado para avanzar la imagen hacia adelante o hacia atrás. Debe avanzar automáticamente cada 5 segundos. Debe contener los pequeños círculos de navegación en la parte inferior que indican en qué diapositiva estás (y deben ser clicables para avanzar a esa diapositiva en particular).
Luego creamos una función llamada init que acepta un parámetro n. El parámetro será currentSlide pasado a ella. Dentro de la función, iteramos a través de las diapositivas y establecemos la propiedad display de cada diapositiva a none. Mientras iteramos a través de las diapositivas, también iteramos a través de los puntos y eliminamos la clase active de cada do. Cuando terminamos de establecer la propiedad display de cada diapositiva a none y de eliminar la clase active de cada punto, entonces establecemos el display del índice actual de acuerdo a la currentSlide, para bloquear y añadir la clase active al punto del índice actual usando la variable currentSlide.