I am using owl slider in my page. I have total 4 owl slider which comes dynamically on page. Problem is if I click on particular slider next then it also slides other 3 sliders blocks as well. below is my complete code. For understanding purpose here I have kept only 2 sliders.
<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<div class="category-block-inner">
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="box">boxes</div>
<div class="owl-navigation">
<div class="previous arrows" id="previous">
<i class="fa fa-angle-left"></i>
</div>
<div class="next arrows" id="twonxt1">
<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var category1 = $(".category-block-inner");
category1.owlCarousel({
pagination: false,
items: 2,
itemsDesktop: [1199, 2],
itemsDesktopSmall: [1024, 2],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
});
$(".next").click(function () {
$(category1).trigger('owl.next');
});
$(".previous").click(function () {
$(category1).trigger('owl.prev');
});
});
</script>
Owl-carousel allows you to customize the "next- prev" buttons with a simple option:
navText: ["yourPrevButton","yourNextButton"]
Also html is permitted, so you can do everything you want. See all the options: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
For your problem, you have to do multiple owl-carousel instance, not only 1. A solution could be to create a loop of owl-carousel istances (be careful: this solution works only if all carousel have same options.
Joining these 2 points you have a solution like this:
$(".category-block-inner").each(function(){
$(this).owlCarousel({
dots:false, // your pagination?
items: 2,
nav:true,
navText: ["MyPrevButton","MyNextButton"],
itemsDesktop: [1199, 2],
itemsDesktopSmall: [1024, 2],
itemsTablet: [768, 1],
itemsMobile: [479, 1],
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<div class="category-block-inner owl-carousel owl-theme">
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
</div>
<div class="category-block-inner owl-carousel owl-theme">
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
<div class="item">boxes</div>
</div>
Related
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>
CONTEXT:
I'm trying to move between different slides within a section of fullpage.js by clicking one of 5 elements.
PROBLEM:
The first moveTo() - from first slide to any of the other 4 works perfectly. However, once on any other slide, I cannot navigate to other slides by clicking any of the elements. Any help would be appreciated!
My JS:
$(document).ready(function() {
// move to quality
$( "#q" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
$( "#d" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 2);
});
$( "#p" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 3);
});
$( "#z" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 4);
});
$( "#e" ).click(function() {
$.fn.fullpage.silentMoveTo('why', 5);
});
});
$('#fullpage').fullpage({
css3: true,
sectionsColor: ['white', 'grey', '#fff', '#fff'],
anchors:['m', 'why',],
navigation: true,
navigationPosition: 'right',
// verticalCentered:false
// 'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple'],
// 'showActiveTooltip': true,
}
);
My Html:
<div id="fullpage" class="fullpage-wrapper">
<div class="section" id="section1">
<div class="slide" id="slide1-1">
</div> <!-- End slide -->
</div>
<!-- Start section 2 - why -->
<div class="section" id="section2">
<div class="slide" id="slide2-1"> <!-- Start Why -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2 class="master-side side-default"><span>Why ?</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Why -->
<div class="slide" id="slide2-2"> <!-- Start Quality -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2><span>Quality</span></h2>
<div class="col-md-8 col-center">
<a id="q" class="square img-thumbnail"> </a>
<a id="d" class="square"> </a>
<a id="p" class="square"> </a>
<a id="d" class="square"> </a>
<a id="e" class="square"> </a>
</div>
</div> <!-- End col-md-12 -->
</div> <!-- End Row -->
</div> <!-- End Container -->
</div> <!-- End Quality -->
Don't you get any errors in your javascript console?
In the code you posted there's a mistake here:
// move to quality
$( "#q").click(function() {
$.fn.fullpage.silentMoveTo('why', 1);
});
You forgot to close the string "#q".
Also, you can not have more than one id element with the same value... You can not have two <a id="d" class="square"> </a> like you do now.
If that's not the problem, you should add a reproduction of the issue online, because otherwise nobody will be able to know where the problem is and therefore how to help you.
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);