Slider 3D: Carrusel de imágenes responsive en css3

2018-03-23 12:58:10

Carrusel de imágenes con transiciones y efectos en 3d, totalmente creado con css3 y responsive para funcionar en todo tipos de dispositivos.
Alemania






Ejemplos

Ejemplo básico Ejemplo con touch events

Descarga

Descargar slider3d

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
  • Muy ligero: 10Kb el css y 2Kb el js para los eventos
  • Configuración para el aspecto

Limitaciones

  • Solo es posible incluir un slider por página
  • Un máximo de 10 imágenes dentro del slider aunque facilmente ampliable incluyendo los css slider3d_expand_20.css

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

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=""/> 
    <input type="radio" name="slider" id="slider3"/> 
    
    <!-- Bloques con las imágenes del slider-->
    <div class="thumbs"> 
        <div class="thumb"> 
            <div class="img" style="background-image: url(fondo1.jpg)"> 
        </div> 
    </div> 

    <div class="thumbs"> 
        <div class="thumb"> 
            <div class="img" style="background-image: url(fondo1.jpg)"> 
        </div> 
    </div> 

    <div class="thumbs"> 
        <div class="thumb"> 
            <div class="img" style="background-image: url(fondo1.jpg)"> 
        </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> 
        <label for="slider3"> </label> 
    </div>

</div> 

Opciones

Clase en que se aplicaClaseFunción
sliderlightcambia los colores del slider por colores claros
slidernoshadowdescativa el efecto de sombra
slidershoadowimagela sombra refleja la imagen
slidernav-roundbotones de navegacion circulares
sliderslowvelocidad de transición lenta
sliderfastvelocidad de transición rápida

Comentar

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