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);
Related
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 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
I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});
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
For a current project i need to trigger the Start/Stop Event of the jCarousel Plugin.
carousel.stopAuto();
carousel.startAuto();
I'm not that JavaScript addicted to solve the problem myself. A short explaination what i'm trying to do:
The carousel is a fancy product slider and works already as i expected. But the point is the product-description should be available as a tooltip. So i have to stop the carousel if an tooltip is shown and to restart it after the tooltip is closed. FYI: The tooltip Plugin is Cluetip. Does anyone have any suggestions for me?
Found a solution. Use the following function as init callback for your carousel setup.
function initCarousel (carousel) {
jQuery('#cluetip').live('mouseover mouseout', function(event) {
// Disable default action
event.preventDefault();
// Stop carousel at mouseover
if (event.type == 'mouseover') {
carousel.stopAuto();
};
// Restart carousel at mouseout
if (event.type == 'mouseout') {
carousel.startAuto()
};
});
};
Try below code. It works fine for me :)
Ex :
function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
$(document).ready(function() {
$('#mycarousel').jcarousel({
initCallback: mycarousel_initCallback
});
});