Owl Carousel Javascript Issue

JavaScript
1

This is the JS →

$(".newscarosal").owlCarousel({
			loop: true,
			margin: 50,
			items: 3,
			nav: true,
			dots:false,
			navText : ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
			responsiveClass:true,
			responsive:{
			0:{
				items:1,
			},
			600:{
			   items:2,
			},
			1020:{
			   items:3,
			   margin: 20,
			},
		}
	});

but the owl carousel is not working. The intended effort is something like this →

1488×121 283 KB

2

Check this JSFiddle Carousel

1 Like
3

How di you do that what wwas the error?

4

First you must wrap the elements in a div and then you didnt have theme.css link

5

I didnt get this part?

6

I didn’t see it in your codepen.If you see the JSfiddle resources I have the theme.css link

7

Now check.

8

I am still unable to find out that why my code is not working?

9

Check this code and the series of the scripts and links

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
	
	
	<style>
	  body {
  background: #ddd;
  font-family: tahoma, sans-serif;
}
.newscarosal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2em;
  background: #fff;
  list-style: none; /* Remove default numbering */
  counter-reset: number; /* Reset a counter */
}
.newscarosal li {
  margin: 1em;
  Flex: 1 1 22em;
}

/* Add a pseudo element to replace the default numbering */
.newscarosal li::before { 
	content: counter(number); /* Insert the number */
	counter-increment: number; /* Increment the counter */
  /* Style the number as you like */
  float: left;
  padding: 0.15em 0.5em;
  margin-right: 1em ;
  color: #bbb;
  outline: 1px solid #bbb;
  font-size: 1.5em;
}
.newscarosal a {
  color: #666;
  text-decoration: none;
}
	</style>
</head>
<body>
	<div class="newscarosal">
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div>
<div><li><a href="">Supreme Count Wonn’t Revive Camaign Probe Of Wisconsin Governor Walker</a></li></div> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<script>
  $(".newscarosal").owlCarousel({
			loop: true,
			margin: 50,
			items: 3,
			nav: true,
			dots:true,
			navText : ["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
			responsiveClass:true,
			responsive:{
			0:{
				items:1,
			},
			600:{
			   items:2,
			},
			1020:{
			   items:3,
			   margin: 20,
			},
		}
	});
</script>
</body>
</html>
10

we are using this but still arrows are not coming up as shown in the example I posted in my first post in this thread.

11

Check this link JSFiddle carousel V 2.0
You must include

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
1 Like
12

Including that doesn’t solves the problem.

13

You are using 1.3.3 versions of CSS and JS not the latest one with the latest one it doesn’t seems to work.

14

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