Pequeño plugin responsive Carousel en Vanilla JavaScript-slidedoom

Vista prévia

Descripción

slidedoom es un pequeño, sensible, móvil amigable, navegador cruzado carrusel de slider biblioteca creada para Vanilla JavaScript y aplicación angular.

Funcionamiento

Para empezar, incluya el JavaScript y la hoja de estilo de slidedoom en la Página Web.

<link href="Slidedoom.min.css" rel="stylesheet">
<script src="Slidedoom.min.js"></script>

Cree las diapositivas siguiendo estos pasos:

1. A single container mentioned by div with CSS class 'slidecontainer'. There may be many slidecontainers in a single page, each having the different number of slides.
2. Then inside of that div with 'slidecontainer' css class, place another div with CSS class as 'slidezimple'
3. Inside the div with CSS class 'slidezimple', we are going to create few slides.
4. Create a div with CSS classes 'slides slide0' inside the 'slidezimple' div. This completes our first slide.
5. Create a div with CSS classes 'slides slide1' inside the same 'slidezimple' div. This completes our second slide.
6. You can add as many slides you can by repeating the step4 or step5 again.

<div class="slidecontainer"> ---- Step1


<div class="slidezimple"> ---- Step2




<div class="slides slide0"> ----Step4




<div>




<div class="slides slide1"> ----Step5




<div>


</div>

</div>

<div class="slidecontainer"> ---- Step1


<div class="slidezimple"> ---- Step2




<div class="slides slide0"> ----Step4




<div>




<div class="slides slide1"> ----Step5




<div>


</div>

</div>

Defina los colores de fondo de las diapositivas. Si desea especificar la imagen de fondo en lugar del color de fondo, especifíquese como objeto con el nombre de la propiedad establecido en el nombre de la imagen junto con la Extenstion.

var backgrounds = [


"rgba(0,0,0,0.8)",//Slide0 background


"#687792",//Slide1 background


"#121212",//Slide2 background


"#888eee",//Slide3 background


"#a77756",//Slide4 background


"#444777"//Slide5 background
],

Especifique la anchura y la altura de cada diapositiva.

//array of slidecontainer Height in proportion to Browser Client Height
// first slidecontainer height is 1/2 =50%
of Browser Client Height
// second slidecontainer height is 1/2 =50%
of Browser Client Height
// third slidecontainer height is 1/2 =50%
of Browser Client Height
// fourth slidecontainer height is 1/2 =50%
of Browser Client Height
// fifth slidecontainer height is 1/2 =50%
of Browser Client Height
aspectRatioHeight = [1],

//array of slidecontainer width in proportion to Browser Client Width
// first slidecontainer width is 1/1= 100%
of Browser Client Width
// second slidecontainer width is 1/2= 50%
of Browser Client Width
// third slidecontainer width is 1/2= 50%
of Browser Client Width
// fourth slidecontainer width is 1/1= 100%
of Browser Client Width
// fifth slidecontainer width is 1/1= 100%
of Browser Client Width
aspectRatioWidth = [1],

Ahora vamos a fusionar los contenedores de diapositivas.

slidesgroup = [1]

Especifique el número máximo de diapositivas que va a utilizar en un único contenedor de diapositivas.

maxSlides = 18;