Responsive Carousel Templates Free Download

Responsive image carousel templates
Responsive image carousel templates
Responsive image carousel templates

Hello Guys here in this article we will learn how to create responsive and mobile friendly carousel. Here in this article i will provide complete source code of Multi column responsive carousel free download.

HTML CODE

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/gallery1.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery2.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery3.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery4.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery5.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery6.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery7.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery8.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery9.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery10.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery11.jpg" /></div>
      <div class="swiper-slide"><img src="img/gallery12.jpg" /></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
     <div class="swiper-button-prev"></div>
  </div>

CSS

<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<style type="text/css">
  .swiper-slide img
  {
	  width:250px;
	  height:160px;
	  opacity:0.7;
  }
  
  .swiper-slide:hover img
  {
	  -webkit-box-shadow: 0px 0px 17px -4px rgba(3,3,3,1);
-moz-box-shadow: 0px 0px 17px -4px rgba(3,3,3,1);
box-shadow: 0px 0px 17px -4px rgba(3,3,3,1);
cursor:pointer;
  }
  
  .swiper-button-next
  {
	  color:#000;
  }
  
  .swiper-button-prev
  {
	  color:#000;
  }
  
  @media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and  only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	  
	.swiper-slide
{
	min-width:250px;
	height:140px;
}
	  
  }
  
</style>

Java Script

<script src="js/swiper.min.js"></script>
  <!-- Initialize Swiper -->
   <script>
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 5,
      spaceBetween: 5,
      slidesPerGroup: 2,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

Here you can modify the swiper slider by changing in javascript code, like space between slides, slider display per row .

Leave a Reply

avatar
  Subscribe  
Notify of