We are implementing owl carousel It is fine on desktop view on all resolutions, but flickering complete page which contains that owl carousel on tablet view (ipad).
HTML Code:
<div class="col-md-12">
<div class="row">
<div class="text-center" id='answersheet_status'></div>
<div class="col-sm-12 col-md-12">
<div class="text-center" id='assessment_feedback'>
<!--<i class="fa fa-times">y</i>-->
</div>
</div>
</div>
<div class="row" id="main_div_section">
<div class="col-md-12 question-section">
<div id="section_div" class="col-md-12 owl-carousel owl-theme" style="padding:0 20px;"></div>
</div>
</div>
<div class="alernate_div_section hide" id="alernate_div_section"></div>
<div class="col-md-12 no-padding mt15">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="section-result"></div>
<div class="col-md-12 no-padding mt15" id="questions_div">
</div>
<div class="clearfix"></div>
<div class="question-footer"></div>
</div>
</div>
</div>
</div>
Js code:
var carousel = $('.owl-carousel');
carousel.owlCarousel({
rtl: false,
margin: 10,
nav: true,
loop: false,
mergeFit: true,
startPosition: start_pos,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 3
},
1200: {
items: 4
},
1400: {
items: 5
}
}
});
Note: If we remove that owl carousel, then the page works fine at all. We don't want that flickering on ipad (tabletview), why this happens? any solution? please suggest.
(owl carousel Version used : version 2.0.0)
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
z-index: 1; // added this
}
Please add the above code in your css file , and see that the class are define in html code ...
This works fine with me ....
Related
I'm using Owl Carousel 2, center. I need help for something as shown on picture. Basically I have 6 items, 2 of them under same category
Title 1: 1 and 1a
Title 2: 2 and 2a
Title 3: 3 and 3a
When click on "Title 1", it will move to 1, but not 1a, click on "Title 2" will move to 2 and so on.
Hoping that some of you could provide me with some advice. Thank you!
$(document).ready(function($) {
$('.loop').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
nav: true,
responsive: {
600: {
items: 5
}
}
});
});
h4{
border: 1px solid black;
text-align: center;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
Title 1
TItle 2
TItle 3
<div class="loop owl-carousel owl-theme">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>1a</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>2a</h4>
</div>
<div class="item">
<h4>3a</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
</div>
Change items code in your Carousel in this way:
<div class="loop owl-carousel owl-theme">
<div class="item" data-hash="one">
<h4>1</h4>
</div>
<div class="item">
<h4>1a</h4>
</div>
<div class="item" data-hash="two">
<h4>2</h4>
</div>
<div class="item">
<h4>2a</h4>
</div>
<div class="item">
<h4>3a</h4>
</div>
<div class="item" data-hash="three">
<h4>3</h4>
</div>
</div>
Titles change in this way:
Title 1
TItle 2
TItle 3
And Carousel initialization in this way:
$(document).ready(function($) {
$('.loop').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
nav: true,
URLhashListener: true, //1. this string added
startPosition: 'URLHash', //2. this string added
responsive: {
600: {
items: 5
}
}
});
});
More details see in oficial docs: https://owlcarousel2.github.io/OwlCarousel2/demos/urlhashnav
I am working on a website and there seems to be conflicting elements.
I started with a template that contains a lot of "borrowed" CSS and JS elements from different places, and now I am trying to add a Slick slideshow, and there are conflicts in either the JS or the CSS that prevent me from editing the Slick slider (parts of the slick-slider code were already present in the "Organic Farm" template).
Right now I have js/core.min.js, js/script.js and js/slick.js being loaded into the page, and then at the bottom of the index page:
<script type="text/javascript">
$(document).ready(function(){
$('.swiper-slide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true,
});
});
</script>
The HTML portion is:
<section class="section">
<div class="swiper-container swiper-slider swiper-custom" data-height="35.10416666666667%" data-min-height="375px" data-index-bullet="false" data-slide-effect="swipe" data-autoplay="5000">
<div class="swiper-wrapper swiper-wrapper-custom">
<div class="swiper-slide" data-slide-bg="images/ergfer1.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide" data-slide-bg="images/gdrger.jpg">
<div class="swiper-slide-caption">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-9 col-lg-8 top">
</div>
</div>
</div>
</div>
</div>
Is there a way to find out why my custom script is not active? The arrows are also not showing up. For anything HTML and CSS I use the Inspector of Firefox, but here I'm really stumped.
Two things to consider:
1) When using slick.js, it is customary to add it to the element which is the parent of a set of elements which are then converted into slides. For example:
<div id="slide-wrapper">
<div class="my-slide">...</div>
<div class="my-slide">...</div>
<div class="my-slide">...</div>
</div>
$('.slide-wrapper').slick({
...
});
In your case, that would mean adding Slick to swiper-wrapper:
$('.swiper-wrapper').slick({
...
});
2) More likely the problem is that you have a conflict with the setup of a different slide show library altogether, Swiper.js (https://swiperjs.com/api/), which uses classes like swiper-container, swiper-wrapper and swiper-slide. To implement that slideshow, you would have to include that library on your page and initialize the slideshow with something like:
var mySwiper = new Swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});
is it possible to change an image dependent on the current slide in owl carousel?
I know that there are events within owl carousel but I didn't found what I wanted.
Thanks in advance to everyone who takes the time to answer the questions.
Screenshot
HTML:
<div class="row">
<div class="col-lg-3 hidden-md hidden-sm hidden-xs">
<div>
<img src="image1.png"/> <!-- change to image2.png if slide 2 is active -->
</div>
</div>
<div class="owl-carousel-team">
<div class="col-lg-9 col-md-12 item">
<h3>Slide 1</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
<div class="col-lg-9 col-md-12 item">
<h3>Slide 2</h3>
<div class="row">
<div class="content"></div>
</div>
</div>
</div>
Javascript:
var teamCarousel = function(){
var owl = $('.owl-carousel-team');
owl.owlCarousel({
loop:true,
margin:0,
autoHeight:false,
smartSpeed: 500,
responsiveClass:true,
responsive:{
0:{
items:1,
},
1000:{
items:1,
nav:false,
dots: true,
}
}
});
};
$(function(){
fullHeight();
sliderMain();
centerBlock();
responseHeight()
mobileMenuOutsideClick();
offcanvasMenu();
burgerMenu();
toggleBtnColor();
contentWayPoint();
teamCarousel();
});
You can detect your slide movement by
owl.on('translated.owl.carousel', function(event) {
// Your code here
})
use translated.owl.carousel for after slider moved
Give an id to your image tag, then get the active slider image source and set to <img/>
e.g.
owl.on('translated.owl.carousel', function(event) {
var now_src = $('.owl-carousel').find('.owl-item.active img').attr('src');
$('#you_img_id').attr('src', now_src);
})
Here's the demo https://jsfiddle.net/566j4jsf/
i'm trying to make captions in owl carousel. i'm using animate.css.
I've added animation to captions in carousel but it's not working for all. Only first slides caption have animation. Here is my code;
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/900x1200">
<div class="caption"><h1 class="animated bounce">Fourth Caption</h1></div>
</div>
</div><!-- End Carousel -->
<style>
.caption {
position: absolute;
font-size: 1.5em;
top: 0;
left: 15px;
border:1px solid;
color:orange;
text-shadow: 2px 2px 1px #000;
padding-top: 60vh;
}
</style>
<script>
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
items:1,
loop:true,
autoplay:true,
autoplayTimeout:3500,
nav:true,
})
});
</script>
I'm waiting your help about that. I'm stuck
The animation is only applied once when the class is applied to a div. Therefore all of your slides animate once at the start only, but you can only see the first div, and so nothing else happens.
If you watch for slide changes in the carousel and then remove the 'animate bounce' classes from all divs before instantly re-applying it to the one on screen then you can see each one animate.
Try this jquery:
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3500,
nav: true,
margin: 10,
});
owl.on('changed.owl.carousel', function(event) {
var item = event.item.index - 2; // Position of the current item
$('h1').removeClass('animated bounce');
$('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated bounce');
});
});
and then in your html only use the 'animate bounce' classes for the first slide (remove it from the others):
<div id='monitor'>
</div>
<div class="owl-carousel owl-theme">
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="animated bounce">First Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Second Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Third Caption</h1></div>
</div>
<div class="item"><img src="http://placehold.it/200x200">
<div class="caption">
<h1 class="">Fourth Caption</h1></div>
</div>
</div>
<!-- End Carousel -->
This is working infinite. Look at this example of owl.carousel : http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/ You had to remove class animated after change but this function is missing in owl.carousel 2: afterMove and beforeMove
in latest owlCarousel v 2.0.0 , I want to slide all items visible in viewport, clicking on prev/next buttons like the dots nav do . However I want the same functionality in prev/next button while loop value is true. I have created a pen : Codepen Please look into. Anyhelp using available option will be great help.
HTML:
<div class="owl-carousel">
<div class="item">
<h2>Swipe</h2>
</div>
<div class="item">
<h2>Drag</h2>
</div>
<div class="item">
<h2>Responsive</h2>
</div>
<div class="item">
<h2>CSS3</h2>
</div>
<div class="item">
<h2>Fast</h2>
</div>
<div class="item">
<h2>Easy</h2>
</div>
<div class="item">
<h2>Free</h2>
</div>
<div class="item">
<h2>Upgradable</h2>
</div>
<div class="item">
<h2>Tons of options</h2>
</div>
<div class="item">
<h2>Infinity</h2>
</div>
<div class="item">
<h2>Auto Width</h2>
</div>
</div>
JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
})
slideBy option in owl carosel is handy. It solves the issues.
Included it as follows.
Updated JS:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
loop: true,
dots:true,
nav:true,
navRewind:true,
responsive: {
0: {
items: 1,
slideBy: 1
},
600: {
items: 2,
slideBy: 2
},
1000: {
items: 5,
slideBy: 5
}
}
})