I am using owl carousel to display product.The problem is that next and previous buttons are not showing up.
Here are the files I have included
owl.carousel.min.css
owl.theme.default.min.css
owl.carousal.min
In main.js
jQuery(document).ready(function ($) {
$('.owl-carousel-featured-product').owlCarousel({
loop:true,
margin:10,
nav:true,
dots:false,
items:4,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});
Below is generated HTML
<div class="owl-carousel-featured-product featured-product">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 7410px; left: 0px; display: block;">
<div class="owl-item" style="width: 285px;">
<div class="productslide">
</div>
</div>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
<div class="owl-page">
<span class=""></span>
</div>
</div>
</div>
Although the nav:true option is set and still not showing up the prev & Next button html is not rendered.
Related
I want to find center item, in owl carousel 2 (in native) not select by class like $('.owl-item.center') I want to find it by owl carousel native function and result, now I can get event, and there are bunch of results, I can get any value related to center
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log(e);
if (e.itemClass === 'center') {
alert('it is center one!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>
how can I detect owl carousel 2 center item in native? again, I don't want to find jquery find items by center class with find each or any other selector, I want to owl give it to me.
I don't think owl carousel provide such option to get center item in event result. you can do this littly tricky like this, just get e.item.index it is current active item, then +1 to get centered item. check example below:
$('.owl-carousel').owlCarousel({
center: true,
items: 3,
loop: false,
margin: 10,
});
$('.owl-carousel').on("dragged.owl.carousel", function(e) {
console.log('center item is:'+ (e.item.index + 1));
});
.item {
border: 1px solid;
text-align: center;
}
.owl-item.active.center {
background: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha256-UhQQ4fxEeABh4JrcmAJ1+16id/1dnlOEVCFOxDef9Lw=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<div class="owl-carousel">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
</div>
I am using Owl carousel in my html desing. It is working fine but not displaying next and previous button. Then I have added button in my page still it is not displaying. And I have also implemented in same way in my Laravel blade template in it's working fine with next previous button. I have added Owl carousel version 2.3.4.
Here is my code which I have done in my Html:
I have added pictures of it. in first picture it is working fine with laravel blade. And in second it is not displaying arrow button for next and previous.
I have searched it but I didn't got any proper solution. Does anyone knows what is wrong with it? Did I missed something? Thanks for the help in advance.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/boxicons.min.css">
<link rel="stylesheet" href="css/datepicker.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="features">
<img src="images/features -bg.jpg" alt="Fitzoh" class="features-bg">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6 text-center text-lg-left">
<h6 class="text-light-green">Standout with Fitzoh</h6>
<div class="divider-sm"></div>
<h2>Take your fitness business to the next level</h2>
<p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
Know More
<div class="features-list mt48 text-left">
<a href="#one" class="feature mb24 active">
<p class="mb0">Add value to your brand through your own application</p>
</a>
<a href="#two" class="feature mb24">
<p class="mb0">Enhance client experience through virtual training</p>
</a>
<a href="#three" class="feature mb24">
<p class="mb0">Create your own excercise and diet plans</p>
</a>
<a href="#four" class="feature mb24">
<p class="mb0">Easy Scheduling & performance tracking</p>
</a>
</div>
</div>
<div class="col-12 col-lg-6 text-center text-lg-right">
<div class="owl-carousel">
<div class="item" data-hash="one">
<img class="block-image" src="images/feature1.png" alt="image">
</div>
<div class="item" data-hash="two">
<img class="block-image" src="images/feature2.png" alt="image">
</div>
<div class="item" data-hash="three">
<img class="block-image" src="images/feature3.png" alt="image">
</div>
<div class="item" data-hash="four">
<img class="block-image" src="images/feature1.png" alt="image">
</div>
</div>
</div>
<div class="owl-nav">
<!-- thess buttons I have added manually -->
<button type="button" role="presentation" class="owl-prev">
<span aria-label="Previous">‹</span>
</button>
<button type="button" role="presentation" class="owl-next">
<span aria-label="Next">›</span>
</button>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/datepicker.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/common.js"></script>
<script src="js/script.js"></script>
</body>
</html>
$(document).ready(function(e) {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 0,
autoplay: true,
smartSpeed: 500,
nav: true,
dots: false,
navText: ['<span aria-label="Previous">‹</span>','<span aria-label="Next">›</span>'],
lazyLoad:true,
});
});
.owl-carousel .owl-nav button{width:25px; text-align:center; border:1px solid #ccc !important;}
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
<section class="features">
<!-- <img src="images/features -bg.jpg" alt="Fitzoh" class="features-bg"> -->
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-lg-6 text-center text-lg-left">
<h6 class="text-light-green">Standout with Fitzoh</h6>
<div class="divider-sm"></div>
<h2>Take your fitness business to the next level</h2>
<p>With Fitzoh, adopting a better client experience has been made easier than ever.</p>
Know More
<div class="features-list mt48 text-left">
<a href="#one" class="feature mb24 active">
<p class="mb0">Add value to your brand through your own application</p>
</a>
<a href="#two" class="feature mb24">
<p class="mb0">Enhance client experience through virtual training</p>
</a>
<a href="#three" class="feature mb24">
<p class="mb0">Create your own excercise and diet plans</p>
</a>
<a href="#four" class="feature mb24">
<p class="mb0">Easy Scheduling & performance tracking</p>
</a>
</div>
</div>
<div class="col-12 col-lg-6 text-center text-lg-right">
<div class="owl-carousel">
<div class="item" data-hash="one">
<img class="block-image" src="https://png.pngtree.com/thumb_back/fw800/20151028/pngtree-Design-Light-Texture-Wallpaper-background-photo-674871.jpg" alt="image">
</div>
<div class="item" data-hash="two">
<img class="block-image" src="https://blog.sonicwall.com/wp-content/uploads/2018/05/SNWL-image-412.jpg" alt="image">
</div>
<div class="item" data-hash="three">
<img class="block-image" src="http://www.rishtiindia.com/wp-content/uploads/2016/01/Background-Image-of-Flyer-Brochure.jpg" alt="image">
</div>
<div class="item" data-hash="four">
<img class="block-image" src="https://ane4bf-datap1.s3-eu-west-1.amazonaws.com/wmocms/s3fs-public/news/featured_media/featured-image-index.png?4t5V5QpQ.h.L2MpEUHsgfJM_lASy4dbb" alt="image">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
nav:true -> Enable arrow navigation,
dots:true -> Enable dot navigation
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true,
dots: true
},
600:{
items:3,
nav:true,
dots: true
},
1000:{
items:5,
nav:true,
dots: true
}
}
})
how to responsive owl carousel with data attributes?
some thing like this...
<div class="owl-carousel data-carousel" data-carousel='{"responsive": {0:{"items":1},768:{"items":2},992:{"items":3}}}'>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
</div>
and
var $carousel = $('.data-carousel[data-carousel]');
if ($carousel.length) {
$carousel.each(function() {
$(this).owlCarousel($(this).data('carousel'));
});
}
in owl carousel documentations we have like this ...
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
});
but in my way, i want a new way to responsive owl carousel with data attributes. i see some snippets like this ...
<div class="owl-carousel" data-carousel='{"breakpoint":"0:1,992:2"}'></div>
We can do this like
<div class="your-custom-class">
<ul class="tab-list owl-carousel nav-style5" data-nav="true" data-autoplay="true" data-dots="false" data-loop="true"
data-margin="30" data-responsive='{"0":{"items":1},"600":{"items":2},"1000":{"items":6}}'>
<li class="custom-class2">
<div class="custom-class3">
<div class="custom-class4">
<img src="/src/images/img1.png" alt="">
<div class="gorup-button">
<a href="#" class="wishlist">
<i class="fa fa-heart"></i>
</a>
</div>
</div>
<div class="product-info">
<h3 class="product-name">
Product Name
</h3>
<span class="price">
<ins>₹300</ins>
<del>₹400</del>
</span>
ADD TO WISHLIST
</div>
</div>
</li>
</ul>
</div>
I want to use Slick carousel on my website but i can't make the first example (single item) from kenwheeler.github.io/slick/ to work. Maybe i forgot something but i cannot find what.
Here is my code (also on jsfiddle) :
HTML
<div class="slider single-item slick-initialized slick-slider">
<div class="slick-list draggable" tabindex="0">
<div class="slick-track" style="opacity: 1; width: 4480px; transform: translate3d(-560px, 0px, 0px);">
<div class="slick-slide slick-cloned" index="-1" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-active" index="0" style="width: 560px;"><h3>1</h3></div>
<div class="slick-slide" index="1" style="width: 560px;"><h3>2</h3></div>
<div class="slick-slide" index="2" style="width: 560px;"><h3>3</h3></div>
<div class="slick-slide" index="3" style="width: 560px;"><h3>4</h3></div>
<div class="slick-slide" index="4" style="width: 560px;"><h3>5</h3></div>
<div class="slick-slide" index="5" style="width: 560px;"><h3>6</h3></div>
<div class="slick-slide slick-cloned" index="6" style="width: 560px;"><h3>1</h3></div>
</div>
</div>
<button type="button" data-role="none" class="slick-prev" style="display: block;">Previous</button>
<button type="button" data-role="none" class="slick-next" style="display: block;">Next</button>
<ul class="slick-dots" style="display: block;">
<li class="slick-active"><button type="button" data-role="none">1</button></li>
<li><button type="button" data-role="none">2</button></li>
<li><button type="button" data-role="none">3</button></li>
<li><button type="button" data-role="none">4</button></li>
<li><button type="button" data-role="none">5</button></li>
<li><button type="button" data-role="none">6</button></li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Thanks.
Edit : When i check event listeners on buttons with the developper tools, i've nothing, contrary to the same carousel on slick documentation (http://kenwheeler.github.io/slick/#demos).
On the Slick website, there is a click event listener on the next arrow button, as you can see on the screen :
I don't know why this event listener doesn't exist in local (jquery is correctly loaded by the way).
Many mistakes on your jsfiddle
Your HTML was a copy-paste that is already marked up by the library
You need to load jQuery before slick
You included a 1.12 jquery that doesnt exist(didn't matter but worth pointing out)
HTML:
<section id="features" class="blue">
<div class="content">
<div class="single-item">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</section>
JS:
$(document).ready(function() {
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
Here's a jsfiddle.
end developer. I have little problem with sliders in tabs. My sliders work but while i switch to second slider I can't see it. slider lost width and height If I resize site by responsive tools of firefox slider generates width and height. I used resizeFix() and reInit() but doesn't work
Can Anybody Help Me?
HTML
<ul id="tabs-wrapper" class="nav nav-tabs" data-tabs="tabs">
<li id="tabs-button" class="active">Projects</li>
<li id="tabs-button">Shots</li>
</ul>
</div>
<!-- Tab panes -->
<div class="tab-content">
<!-- First slider -->
<div class="tab-pane fade in active" id="home">
<div class="device">
<div class="arrows">
<a class="arrow-left al1" href="#"></a>
<a class="arrow-right ar1" href="#"></a>
</div>
<div class="swiper-container s1">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p1"></div>
</div>
</div>
<!-- Second slider -->
<div class="tab-pane fade" id="profile">
<div class="device">
<div class="arrows">
<a class="arrow-left al2" href="#"></a>
<a class="arrow-right ar2" href="#"></a>
</div>
<div class="swiper-container s2">
<div class="swiper-wrapper" style="width:100%; height:100%;">
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/drop1.jpg">
</div>
<div class="swiper-slide">
<div class="content-slide">
<h3 class="title">Slide with HTML</h3>
website
</div>
<img class="img-work" src="images/nu.jpg">
</div>
</div>
</div>
<div class="pagination p2"></div>
</div>
</div>
CSS
.swiper-container {
width: auto;
height: auto;
cursor: default !important;
min-height: 729px !important;
}
JS
<script>
var Swiper1 = new Swiper('.s1',{
pagination: '.p1',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al1').on('click', function(e){
e.preventDefault()
Swiper1.swipePrev()
})
$('.ar1').on('click', function(e){
e.preventDefault()
Swiper1.swipeNext()
})
var Swiper2 = new Swiper('.s2',{
pagination: '.p2',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.al2').on('click', function(e){
e.preventDefault()
Swiper2.swipePrev()
})
$('.ar2').on('click', function(e){
e.preventDefault()
Swiper2.swipeNext()
})
$('#shots_button').on('click', function() {
Swiper2.resizeFix() ;
Swiper2.reInit() ;
});
</script>
You need to use 'update' method on Swiper instance for latest versions of Swiper in place of something like reInit() or resizeFix().
Tested on Swiper 3.4.2:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider.update();
}
Ok i did the porblem was it bootstrap tabs i used this code
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
slider2.resizeFix(true);
slider1.resizeFix(true);