Does anyone has experience handling Owl Carousel

codeispoetry · May 22, 2018, 3:59pm

This is the code I wanted to create a slider like this with the owl carousel help →

computerbarry · May 22, 2018, 5:32pm

I suggest posting your code below or create a jsfiddle or codepen so people can view things easier and advise. Nobody wants to download stuff.

Barry

PaulOB · May 22, 2018, 7:05pm

It’s not working because you don;t have jquery in place and you don;t have the trigger class on the correct element.

This works:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<style>
.video {
	max-width:1400px;
	margin: auto;
}
ul {
	margin:0;
	padding:0;
	list-style: none;
}
.ulclass {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.class1 {
	flex-basis: calc(50% - 5px);
	align-items: center;
	position: relative;
	/* margin-top: 40px; */
                    margin-bottom: 80px;
	max-width: 600px;
}
.class2 img {
	width: 100%;
}
</style>
</head>
<body>
<div class="video">
  <ul class="ulclass owl-carousel">
    <li class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </li>
    <li class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </li>
    <li class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </li>
    <li class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </li>
    <li class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </li>
    <li class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </li>
    <li class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </li>
  </ul>
</div>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
<script type="text/javascript">
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 45,
                items: 2,
                nav: true,
                dots:true,
                navText : ["<i class='fa fa-angle-left fa-2X'></i>","<i class='fa fa-angle-right fa-2X'></i>"],
                responsiveClass:true,
                responsive:{
                    0:{
                        items:1,
                        nav:true
                    },
                    600:{
                        items:3,
                        nav:false
                    },
                    1000:{
                        items:2,
                        nav:true,
                        loop:false
                    }
                }
            });
        </script>
</body>
</html>

As the owl carousel adds inner divs you would have been better of with a div structure rather than a list because the generated content is invalid although it will probably do no harm.

codeispoetry · May 22, 2018, 8:55pm

Thanks, @PaulOB sir Noted for future.

And, also converted them into the div structure as suggested by you →

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.video {
	max-width:1400px;
	margin: auto;
}
ul {
	margin:0;
	padding:0;
	list-style: none;
}
.ulclass {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.class1 {
	flex-basis: calc(50% - 5px);
	align-items: center;
	position: relative;
	/* margin-top: 40px; */
                    margin-bottom: 80px;
	max-width: 600px;
}
.class2 img {
	width: 100%;
}
</style>
</head>
<body>
<div class="video">
	<div class="ulclass owl-carousel">
		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->

		<div class="class1 item">
			<div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
			<div class="class3">
				<h4>Fashion</h4>
				<h3><a>The great title begins here.</a></h3>
			</div>
		</div><!-- class1 item -->
	</div>
</div>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript">
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 45,
                items: 2,
                nav: true,
                dots:true,
                navText : ["<i class='fa fa-angle-left fa-2X'></i>","<i class='fa fa-angle-right fa-2X'></i>"],
                responsiveClass:true,
                responsive:{
                    0:{
                        items:1,
                        nav:true
                    },
                    600:{
                        items:3,
                        nav:false
                    },
                    1000:{
                        items:2,
                        nav:true,
                        loop:false
                    }
                }
            });
        </script>
</body>
</html>

Any suggestions how to achieve those sliding arrows at two extremes(left and right). I belive we have to use CSS or perhaps there are some better ways given by owl carousel.

PaulOB · May 23, 2018, 8:39am

I’m not back at my computer until this evening so will take a look then. I’m sure the carousel has the nav options in place ( or available) and you probably just need to tweak to suit.

PaulOB · May 23, 2018, 3:39pm

Here are the basics but I will leave it to you to fine tune this as you need to use more media queries to cater for the different sizes. There is no automatic vertical centre of the image only as the owl carousel adds the arrows at the end of the html so we can only find a percentage position in regard to the whole block and not the image height alone.

Here are the basics.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.video {
	max-width:1400px;
	margin: auto;
}
ul {
	margin:0;
	padding:0;
	list-style: none;
}
.ulclass {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	box-sizing:border-box;
	padding:0 45px;
}
.class1 {
	flex-basis: calc(50% - 5px);
	align-items: center;
	position: relative;
	/* margin-top: 40px; */
    margin-bottom: 80px;
	max-width: 600px;
}
.class2 img {
	width: 100%;
}
.owl-nav{
    position:absolute;
    top:30%;
    left:0;
    right:18px;
	font-size:80px;
    color:#999;
}
.owl-prev{
   left:0;
    position:absolute;
}
.owl-next{
   right:0;
    position:absolute;
}
.owl-carousel .owl-nav  .owl-next:focus,
.owl-carousel .owl-nav .owl-prev:focus{outline:0;color:#000;text-shadow:1px 1px rgba(30,30,30,0.3)}

@media screen and (max-width:999px){
	.class1{margin-left:auto;margin-right:auto;}

}


</style>
</head>
<body>
<div class="video">
  <div class="ulclass owl-carousel">
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item -->
    
    <div class="class1 item">
      <div class="class2"><img src="https://blogs-images.forbes.com/ceciliarodriguez/files/2018/01/Meghan-Harry-e1515335561487.jpg" alt=""></div>
      <div class="class3">
        <h4>Fashion</h4>
        <h3><a>The great title begins here.</a></h3>
      </div>
    </div>
    <!-- class1 item --> 
  </div>
</div>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
<script type="text/javascript">
            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 45,
                items: 2,
                nav: true,
                dots:true,
                navText : ["<i class='fa fa-angle-left fa-2X'></i>","<i class='fa fa-angle-right fa-2X'></i>"],
                responsiveClass:true,
                responsive:{
                    0:{
                        items:1,
                        nav:true
                    },
                    1000:{
                        items:2,
                        nav:true,
                        loop:false
                    }
                }
            });
        </script>
</body>
</html>

Adjust to suit

system · August 22, 2018, 10:39pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Owl Carousel Javascript Issue JavaScript	13	7499	July 23, 2018
(JavaScript) Carousel and animating CSS - doesn't work JavaScript bootstrap	4	5295	January 27, 2019
Why isn't the owl carousel showing up? HTML & CSS	2	1060	July 14, 2016
Synced Carousels JavaScript	5	6460	December 9, 2014
Update carousel code to work on owl Carousel 2.3.4 JavaScript	2	1825	June 5, 2019

Does anyone has experience handling Owl Carousel

Related topics