marquisina.js is a simple and lightweight jQuery plugin that makes it easy to loop/slider for infinitely looped images on your web page.

image carousel html, automatic image slider in html css, carousel slider jquery, image slider html css, jquery multiple image slider, responsive automatic image slider in html

Carousel Vertical Slider with Vanilla Javascript

How to make use of it:

1. Insert a list of images into the container element as shown below.

<div id="carousel">
  <ul>
    <li><img src="https://lorempixel.com/230/167/city" alt=""></li>
    <li><img src="https://lorempixel.com/230/167/food" alt=""></li>
    <li><img src="https://lorempixel.com/230/167/animals" alt=""></li>
    <li><img src="https://lorempixel.com/230/167/cats" alt=""></li>
    <li><img src="https://lorempixel.com/230/167/fashion" alt=""></li>
  </ul>
</div>

2. Create pre/post controls for the image carousel.

<a href="#" id="prev">&laquo;</a>
<a href="#" id="next">&raquo;</a>

3. Load the jQuery marquisina.js plugin after loading the jQuery library.

#carousel {
  display: inline-block;
  vertical-align: middle;
}

#carousel {
  background-color: #88BC40;
  border-radius: 4px;
  border: 10px solid white;
  box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
  width: 460px;
  z-index: 5;
}

#carousel ul {
  margin: 0;
  padding: 0;
  position: relative;
  width: 1200px;
}

#carousel li {
  float: left;
  font-size: 30px;
  height: 167px;
  line-height: 167px;
  list-style: none;
  margin: 0;
  position: relative;
  width: 230px;
}

#next { left: -35px; }

#next:hover { left: -25px; }

#prev { right: -35px; }

#prev:hover { right: -25px; }

4. Required CSS Styles to carousel Images.

#carousel {
  display: inline-block;
  vertical-align: middle;
}

#carousel {
  background-color: #88BC40;
  border-radius: 4px;
  border: 10px solid white;
  box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
  width: 460px;
  z-index: 5;
}

#carousel ul {
  margin: 0;
  padding: 0;
  position: relative;
  width: 1200px;
}

#carousel li {
  float: left;
  font-size: 30px;
  height: 167px;
  line-height: 167px;
  list-style: none;
  margin: 0;
  position: relative;
  width: 230px;
}

#next { left: -35px; }

#next:hover { left: -25px; }

#prev { right: -35px; }

#prev:hover { right: -25px; }

5. Call the plugin in the document ready and specify the CSS selectors for the previous/next controls.

$('#carousel').marquesina('#prev', '#next');

Basic Image Carousel Slider with jQuery, marquisina.js Plugin/Github

See Demo And Download

Official Website(fmrojas): Click Here

This superior jQuery/javascript plugin is developed by fmrojas. For extra Advanced Usages, please go to the official website.