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 .
