Owl Carousel Javascript Issue

#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 →

intnded effect.gif1488x121 283 KB

#2

Check this JSFiddle Carousel

#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">
#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.