Month: January 2019

Here am going to show you how to add Multi Item Carousel slide in your website here is the Multi Item Carousel slide sample code

1) Script files to include in the header

<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js" type="90e6e4b8e06878c6e6ff42b7-text/javascript"></script>

2)  CSS Part

<style type="text/css">
 .carousel-wrap {
 width: 1000px;
 margin: auto;
 position: relative;
 }
 .owl-carousel .owl-nav{
 overflow: hidden;
 height: 0px;
 }

 .owl-theme .owl-dots .owl-dot.active span, 
 .owl-theme .owl-dots .owl-dot:hover span {
 background: #2caae1;
 }


 .owl-carousel .item {
 text-align: center;
 }
 .owl-carousel .nav-btn{
 height: 47px;
 position: absolute;
 width: 26px;
 cursor: pointer;
 top: 100px !important;
 }

 .owl-carousel .owl-prev.disabled,
 .owl-carousel .owl-next.disabled{
 pointer-events: none;
 opacity: 0.2;
 }

 .owl-carousel .prev-slide{
 background: url(img/icon.png) no-repeat scroll 0 0;
 left: -33px;
 }
 .owl-carousel .next-slide{
 background: url(img/icon.png) no-repeat scroll -24px 0px;
 right: -33px;
 }
 .owl-carousel .prev-slide:hover{
 background-position: 0px -53px;
 }
 .owl-carousel .next-slide:hover{
 background-position: -24px -53px;
 }

 span.img-text {
 text-decoration: none;
 outline: none;
 transition: all 0.4s ease;
 -webkit-transition: all 0.4s ease;
 -moz-transition: all 0.4s ease;
 -o-transition: all 0.4s ease;
 cursor: pointer;
 width: 100%;
 font-size: 23px;
 display: block;
 text-transform: capitalize;
 }
 span.img-text:hover {
 color: #2caae1;
 }
</style>

 

3) JQuery script to initialize

 

 <script type="text/javascript">
 $(document).ready(function() {

 $('.owl-carousel').owlCarousel({
 loop: true,
 dots: false,
 margin: 10,
 nav: true,
 navText:["<div class='nav-btn prev-slide'></div><div class='nav-btn next-slide'></div>"],
 responsive: {
 0: {
 items: 1
 },
 600: {
 items: 3
 },
 1000: {
 items: 3
 }
 }
 });
 });
 </script>

4) Finally HTML

 

<div class="carousel-wrap" style="text-align: center;">
<div class="owl-carousel owl-theme">
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item"><img src="/img/tutorialshore.jpeg" />
<span class="img-text">tutorialshore</span></div>
<div class="item"><img src="/img/tutorialshore.jpeg" />
<span class="img-text">tutorialshore</span></div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
<div class="item">

<img src="/img/tutorialshore.jpeg" /><span class="img-text">tutorialshore</span>

</div>
</div>
<script src="https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js" ></script>

</div>

See Demo>