Small Responsive Carousel Plugin In Vanilla JavaScript – slidedoom

Preview:

Description:

slidedoom is a small, responsive, mobile-friendly, cross-browser slider carousel library created for Vanilla JavaScript and Angular app.

How to use it:

To get started, include the slidedoom’s JavaScript and Stylesheet on the webpage.

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

Create the slides following these steps:

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>

Set the background colors for the slides. If you want to specify background image instead of background color, specify it as object with property name set to the image name along with the 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
],

Specify the width and height for each slide.

//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],

Now we are going to merge the slide containers.

slidesgroup = [1]

specify the maximum number of slides you are going to use in a single slide container.

maxSlides = 18;