Carrusel de imágenes con efectos de transiciones en puro css

2018-04-02 16:37:39

Carrusel de imágenes con efectos de transiciones diseñado en puro css y sin ningún javascript o jquery.





















































Ejemplos

Ejemplo Carrusel

Descarga

Descargar Carrusel

Características principales

  • Totalmente diseñado en css
  • Sin jquery ni javascript
  • Compatible con la mayoria de navegadores web con soporte de css3
  • Soporte touchs para dispositivos móviles y mouse events incluyendo el archivo js
  • Ligero: 18Kb el css y 2Kb el js para los eventos
  • Configuración para el aspecto y transiciones

Limitaciones

  • Solo es posible incluir un carrusel por página
  • Un máximo de 10 bloques de imágenes dentro del slider

Compatibilidad con los principales navegadores webs

  • Internet explorer 10 o superior. Aunque la propiedad filter no es soportada por la versión 10
  • Firefox Gecko (versión 5.0 año 2011). Aunque la propiedad flter no es soportada hasta la versión 35 del año 2015
  • Chrome (versión 1.0), aunque la propiedad filter no es soportada hasta la versión 18.0
  • Safari (versión 4.0), aunque la propiedad filter no es soportada hata la versión 6.0
  • Opera (version 12.0), aunque la propiedad filter no es soportada hasta la versión 15.0

Soporte 3d: compatibilidad de navegadores webs

  • Internet explorer 10 o superior
  • Firefox version 10.0 o superior
  • Chrome version 12.0 o superior
  • Safari version 4.0 o superior
  • Opera version 15.0 o superior

Código: ejemplo de uso

<div class="slider"> 
    <!-- radios buttons para cambiar de imágenes -->
    <input type="radio" name="slider" id="slider1"/> 
    <input type="radio" name="slider" id="slider2" checked=""/> 

    <!-- Bloques con las imágenes del slider-->
    <div class="thumbs"> 

        <!-- bloque con 10 imagenes con la clase thumb10 -->
        <div class="thumb thumb10"> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo1.jpg)"> </div> 
        </div> 

        <!-- bloque con 5 imagen por defecto -->
        <div class="thumb"> 
            <div class="img" style="background-image: url(fondo2.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo2.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo2.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo2.jpg)"> </div> 
            <div class="img" style="background-image: url(fondo2.jpg)"> </div> 
        </div> 
    </div>

    <!-- labels que controlan los radio buttons y se visualizan en el slider -->
    <div class="control"> 
        <label for="slider1"> </label> 
        <label for="slider2"> </label> 
    </div> 
</div> 

Opciones

Clase en que se aplicaClaseFunción
slidersliderBounceTransición con efecto de rebote
slidersliderFallTransición con efecto de tablas cayendo 
slidersliderWaveTransición con efectos de ondas
slidersliderSlideTransición con efecto de tablas desde la izquierda
sliderfastVelocidad alta en las transiciones
sliderslowVelocidad lenta en las transiciones
slidernav-roundBotones de navegacion circulares
sliderlightcambia los colores del slider por colores claros
thumbthumb10Para incluir 10 divs que forman la imagen

Comentar

Para poder realizar comentarios. Primero debes inicar sesión o crear una cuenta.