Problema al usar Sliders en divs en auto o 100%

[Amnoon]

Hola buenas. Estoy haciendo una web/portfolio como trabajo para una asignatura y tengo un problema con una zona delicada que básicamente son seis divs en auto que forma esto:



Básicamente este es el código html de cada div:

Código HTML:

<div class="mosaic-block fade" >
           <div class="mosaic-block-secondary" style="background-image: url(imagenes/Menu_Mosaico/6.png);">
            <a href="http://buildinternet.com/project/mightyicons/" target="_blank" class="mosaic-overlay blue">
               <div class="details fonts-display clearfix text-center">
                   <p>Work</p>
                        <hr class="grid-1 center">
                        <p>Clear portfolio</p> 
                    </div>
            </a> 
          </div>
      </div>
 

y en el css, las clases están pensadas para que los backgrounds se adapten como quiero a los divs al hacer zoom con un:

Código CSS:

background-position:center
 

en esencia para conseguirlo.

Lo que quiero es poner un Slider (o Carrousel) vertical de divs y continuo en cada div de los grandes, para que, básicamente vayan pasando varios divs y conseguir como tablón de noticias. El problema está en que no encuentro ningún código que me valga (ya que aun no me he puesto a profundizar en javascript y no se mucho para hacerlo de 0) y los que si funcionan me enfrento al problema de que no se adaptan bien al div como quiero (como podéis ver en las imágenes) y hacen un escalado junto al div en vez de que el div actúe como una especie de mascara que es lo que se ve en la imagen al estar este en auto. Esto se debe a que los Sliders que encuentro son de listas y no de divs y lo necesito de divs, para hacer otras cosas en el código a parte de que se adapten.

Mi pregunta es si es posible tener un Slider como digo, con un div en scroll en cada div en auto o este debe estar completamente marcado con un ancho y largo fijo (como pasa en la mayoría de los que he visto). Y si si es posible, si alguno conoce algún código o una pagina donde pueda verlo, ya que me sería de una gran ayuda.

Gracias por todo;

Amnoon.

[ztgst]

En primero, no te recomiendo agregar el background, directamente dentro del html, por que no es una buena practica, entre otras cosas, agregalo por medio de tu hoja de estilos (css).

En la mayoría de los slides, usan listas como referencia, pero tu puedes animar cualquier elemento, cycle2 es una buena opcion asi como bxslider, ambos tienen funciones responsivas.

Pero donde si vas a tener que cambiar un poco, es que a menos que todo sea estatico y sepas que background asignarle a cada div (por decir si un contener tiene 4 divs dentro, que son el numero de slides que tienes), tendras que agregar la imagen dentro de estos "<div class="slide"><img></div>

Saludos.