I am trying to determine the drag direction of a slider, how do i achieve this? I need it since i am syncing 2 sliders, so i need to change the synced slider whenever the other one does. So far it works as long as you use the buttons to navigate, like this:
$('.owl-next').click(function() {
sync2.trigger('next.owl.carousel');
})
$('.owl-prev').click(function() {
sync2.trigger('prev.owl.carousel');
})
And these events are on the sync1 slider, so whenever you go one or the other way, it will also move the sync2 the same way. I just need to do this when the user DRAGS the slider to change it. I can listen to the dragged event, but i have no way to determine if it was a left or right drag?
In owl carousel 1 there was a dragDirection property, but that seems to be gone.
Below is my solution which seems to be working fine with code below -
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
}).on("dragged.owl.carousel", function (event) {
console.log('event : ',event.relatedTarget['_drag']['direction'])
});
JS fiddle
This can also be achived by comparing the start and current values of the owl stage element's X position like this :
var owl = $(".owl-carousel").owlCarousel({
items: 1,
loop: true,
autoplay: true
});
owl.on("change.owl.carousel", function (e) {
if (e.relatedTarget._drag["stage"]["start"].x < e.relatedTarget._drag["stage"]["current"].x) {
console.log("move right");
} else {
console.log("move left");
}
});
This is my solution using relatedTarget.state to get the direction.
var owl = $(".owl-carousel").owlCarousel({
items: 1,
loop: true,
autoplay: true
});
owl.on("dragged.owl.carousel", function (event) {
if (event.relatedTarget.state.direction === "left") {
$(".owl-carousel").not(this).trigger("next.owl.carousel");
} else {
$(".owl-carousel").not(this).trigger("prev.owl.carousel");
}
});
Note that my carousels are using the same .owl-carousel class.
I have two owl carousel - owl1 and owl2. When something happened with owl1 - owl2 have to do the same.
The solution is:
owl1.on("change.owl.carousel", function(event){
setTimeout(function(){
if (event.relatedTarget['_drag']['direction'] == "right") {
owl2.trigger('prev.owl.carousel');
event.relatedTarget['_drag']['direction'] = null;
} else {
owl2.trigger('next.owl.carousel');
}
}, 0);
});
It's important check event.relatedTarget['_drag']['direction'] in setTimeout function, because change.owl.carousel event fires before event.relatedTarget['_drag']['direction'] is changed
Related
I'm really stumped. I copied the mousewheel code directly from the owl carousel site (here). The only thing I changed was the id & variable names so I can have 2 carousels that scroll independently.
The problem is, the scroll is only calling prev.owl and not next.owl. I have a fiddle here. (I know having everything in the html is problematic, but for my site it has to be this way).
Any help would be greatly appreciated!
Code for the mousewheel bit:
(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
var owl1= $('#c1');
owl1.owlCarousel({
loop:true,
nav:true,
margin:10,
responsive:{
0:{
items:1
},
600:{
items:3
},
960:{
items:5
},
1200:{
items:6
}
}
};
owl1.on('mousewheel', '.owl-stage', function(e){
if(e.deltaY>0){
owl1.trigger('next.owl');
} else {
owl1.trigger('prev.owl');
}
e.preventDefault();
});
Do not know why but this code does help me to solve this issue.
owl[0].addEventListener('mousewheel', e => {
if (e.deltaY > 0) {
$('.owl-carousel').trigger('next.owl');
} else {
$('.owl-carousel').trigger('prev.owl');
}
e.preventDefault();
}, false);
I am using bootstrap carousel slider on my website. I want slides to change on mouseScroll.how can I do this.this code works fine but I want to change slides on mouseScroll
this is my code
<script>
$(document).ready(function() {
$("#product_slider").owlCarousel({
rtl:true,
loop:true,
margin:4,
autoplay:false,
autoplayTimeout:10000,
autoplayHoverPause:true,
lazyLoad : true,
pagination:false,
nav:true,
dots: false,
navText:false ,
responsive:{
0:{
items:1
},
500:{
items:1
},
768:{
items:4
},
1200:{
items:5
}
}
});
});
</script>
This will make the carousel change when you scroll the mouse wheel over it. I think it would be wise to prevent the whole page from scrolling while your mouse is over the carousel, but I haven't taken the time to do that here.
Fiddle https://jsfiddle.net/mikeferrari/z34m1wbo/
// select the carousel container
var myelement = document.getElementById("myCarousel");
// this function is called every time the mouse wheel is scrolled
function makeItSo() {
// this is where you tell it to go to the next slide
$('.carousel').carousel('next')
}
myelement.addEventListener('wheel', function(e) {
makeItSo();
});
// start your carousel on page load
$('.carousel').carousel({
interval: 2000
})
I've decided to give the JavaScript library iScroll a try. I've run into some problems though. I just don't seem to get things to work as they are intended to. The basic setup is not written with jQuery in mind but this is how I believe it should be called.
$(document).ready(function () {
var myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
});
myScroll();
});
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
The documentation tells me this is the way add options to the code but somehow I can't get the scroll bars to render at all. I would also like to add a fade-out of a div based on the momentarily position of the scroll, ie. not the position when the scroll stops. This is how the scrollEnd position is called, but how do I get the position on the fly, ie. How do I trigger the fade-out when scrolling passes left -10, regardless if the scroll has stopped or not?
myScroll.on('scrollEnd', function () {
if ( this.x < -10 ) {
$('#logo').stop(true,true).fadeOut('fast');
} else {
$('#logo').stop(true,true).fadeIn('fast');
}
});
I know in the first version of owl carousel we do it like this :
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.reinit({touchDrag: false, mouseDrag: false;});
Ok, but how we do it in the second version, i don't know how they renamed it.
For some reasons $('#your_carousel').trigger('destroy.owl.carousel') is not working correctly. it does not remove all classes which are needed to reinit the plugin again.
You'll need to remove them completely to destroy the "owl carousel 2". like described here in this issue on github: https://github.com/smashingboxes/OwlCarousel2/issues/460
To destroy the owl function use:
$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();
This worked perfect for me:
// find element
$owl = $('body').find('#your_carousel');
// set the owl-carousel otions
var carousel_Settings = {
touchDrag: false,
mouseDrag: false
};
function initialize(){
var containerWidth = $('body').find('.navbar').outerWidth();
if(containerWidth <= 767) {
// initialize owl-carousel if window screensize is less the 767px
$owl.owlCarousel( carousel_Settings );
} else {
// destroy owl-carousel and remove all depending classes if window screensize is bigger then 767px
$owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$owl.find('.owl-stage-outer').children().unwrap();
}
}
// initilize after window resize
var id;
$(window).resize( function() {
clearTimeout(id);
id = setTimeout(initialize, 500);
});
// initilize onload
initialize();
You can do that with destroy but you have to use latest develop branch:
$('#carousel').owlCarousel('destroy');
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
Or with direct access to the plugin:
$('#carousel').data('owl.carousel').destroy();
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
Now, you can destroy it like that:
var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed
This definitly works:
if (container.hasClass("owl-carousel")) {
container.owlCarousel({
touchDrag: false,
mouseDrag: false
});
container.data('owlCarousel').destroy();
container.removeClass('owl-carousel owl-loaded');
container.find('.owl-stage-outer').children().unwrap();
container.removeData();
}
And the plugin itself:
if (this.settings.responsive !== false) {
window.clearTimeout(this.resizeTimer);
$(window).off('resize.owl.carousel');
this.off(window, 'resize', this.e.onThrottledResize);
}
in Owl.prototype.destroy = function()
I am not sure, have you tried the replace?
As per the OwlCarousel documentation, listed here http://www.owlcarousel.owlgraphic.com/docs/api-events.html, the event to trigger is "replace.owl.carousel". You can implement it like this :
var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel');
owl.trigger('replace.owl.carousel', [{touchDrag: false, mouseDrag: false;}]);
Hope that helps!
If use v1.3 I make next
$('#OwlWrapper').owlCarousel({option...});
$('#OwlWrapper').append('<div><img class="img-fluid" src="demo_files/images/1200x800/5-min.jpg" alt=""></div>');
$('#OwlWrapper').data('owlCarousel').reinit();
It's work for me.
$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel
owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();
Just do this to destroy the owl carousel and then use the general init function to reinit.
For Owl Carousel v2.3.4 version,
// Slider element.
let sliderElement = $('#msg-slider');
// Destroy first.
sliderElement.trigger('destroy.owl.carousel');
// Then empty whole owl div.
sliderElement.empty();
// Re-init owl slider.
sliderElement
.owlCarousel({
loop:true,
margin:0,
nav:false,
dots:true,
responsive:{
0: {
items: 1
},
600: {
items:1
},
1000: {
items:1
}
}
});
Hopefully, this will help someone. Thanks.
I can get the tabs to auto rotate, and pause on hover, but can't seem to get them started again when you mouse out. Also, is "fadeInSpeed" done correctly? the Please take a look and see if you can help, it's much appreciated! Really glad to see jQueryTools doing well again!
$(function() {
var rotateDelay = 3500;
var rotateTabs=true;
var $tabItems = $('#flowtabs li a').hover(function(){
rotateTabs=false;
});
var tabs = $("ul#flowtabs").tabs('#flowpanes > div', {api:true, effect:'fade', fadeInSpeed: 100, rotate: true});
function doRotateTabs(){
if (rotateTabs) {
setTimeout(function(){
if (!rotateTabs) return;
if(tabs.getIndex() == $tabItems.length-1){
tabs.click(0);
}
else {
tabs.next();
}
doRotateTabs();
}, rotateDelay);
}
}
doRotateTabs();
});
Did you ever solve this problem
Why are you writing your own code to make it auto play I just passed the configuration for sideshow and it works. It seems to be pausing on mouse over and works like a charm.
My code is below
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({
autoplay: 'true'
});
});
I hope this helps Adity Bajaj