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 →
Check this JSFiddle Carousel
1 Like
How di you do that what wwas the error?
First you must wrap the elements in a div and then you didnt have theme.css link
I didn’t see it in your codepen.If you see the JSfiddle resources I have the theme.css link
I am still unable to find out that why my code is not working?
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>
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.
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
Including that doesn’t solves the problem.
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.
system
Closed
14
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.