Develop Reference

event listener not working in owl carousel

i want lo listen to event but it's not working for me
as you can see i try to use console.log(pages); to listen to number of pages but when i open console i don't get any response
var owl = $('.owl-carousel');
owl.owlCarousel({
onDragged: callback,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items: 1,
loop: true,
autoplay: false,
nav: true,
dots: true
});
function callback(event) {
var pages = event.page.count; // Number of pages
console.log(pages);
}
Could you please help?

Callbacks
Instead of attaching an event handler you can also just add a callback to the options of Owl Carousel.
$('.owl-carousel').owlCarousel({
onDragged: callback
});
function callback(event) {
...
}
Data
Each event passes very useful information within the event object . Based on the example above:
function callback(event) {
// Provided by the core
var element = event.target; // DOM element, in this example .owl-carousel
var name = event.type; // Name of the event, in this example dragged
var namespace = event.namespace; // Namespace of the event, in this example owl.carousel
var items = event.item.count; // Number of items
var item = event.item.index; // Position of the current item
// Provided by the navigation plugin
var pages = event.page.count; // Number of pages
var page = event.page.index; // Position of the current page
var size = event.page.size; // Number of items per page
}
From:
http://www.owlcarousel.owlgraphic.com/docs/api-events.html
Your example looks fine to me, just print after and before to make sure your property will be taken by owlCarroussel. Did you add the right jQuery header?
jQuery
<script src="jquery.js"></script>
<script>
var owl = $('.owl-carousel');
alert('before')
owl.owlCarousel({
onDragged: callback,
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items: 1,
loop: true,
autoplay: false,
nav: true,
dots: true
});
alert('After')
function callback(event) {
var pages = event.page.count; // Number of pages
console.log(pages);
}
</script>

JQuery Don't work after using BxSlider plugin

I am using BxSlider plugin of jQuery in my page, but it behaves very strange, when I use this code to make slider using BxSlider only the slider works nothing else work even my custom functions. Meaning all the other functions stop working without throwing errors in console. I am stuck! I have tried many things but no success, Is there anything wrong my this BxSlider code or something else?
Code for my BxSlider is:
var perLink = jQuery('#qc-per');
var nextLink = jQuery('#qc-next');
var CustomPager = jQuery('#qc-custom-pager');
var BxSlider;
var ActualPager;
window.onload = function() {
console.log('ready');
BxSlider = jQuery('.bxslider').bxSlider({
infiniteLoop: false,
touchEnabled: true,
pager: true,
pagerType: 'short',
pagerShortSeparator: ' de ',
nextText: 'SIGUIENTE',
prevText: 'ANTERIOR',
hideControlOnEnd: true,
slideWidth: 690,
adaptiveHeight: true,
autoControls: true,
onSlideAfter: function (slideElement, oldIndex, newIndex) {
var total = BxSlider.getSlideCount();
var current = newIndex + 1;
if (total == current) {
nextLink.css('visibility', 'hidden');
} else {
nextLink.css('visibility', 'visible');
}
if (current <= 1) {
perLink.css('visibility', 'hidden');
} else {
perLink.css('visibility', 'visible');
}
CustomPager.text(ActualPager.text());
}
});
ActualPager = jQuery('.bx-default-pager');
CustomPager.text(ActualPager.text());
perLink.css('visibility', 'hidden');
}
function doNext() {
BxSlider.goToNextSlide();
}
function doPerv() {
var slideNr = BxSlider.getCurrentSlide() - 1;
BxSlider.goToSlide(slideNr);
}
I have included the "jquery.bxslider.js" also, but the other functions stops working only if I use/insert the above code to make the slider.
I am using jquery-1.11.3.min.js and BxSlider v4.1.2. Also I have Mootools in the site too.
Thank you and please let me know if my question is not clear.

After spending 2 days on the same code and same page I found that the first slide of BxSlider was replecating all the page in it everytime and it was causing the js libraries load again within each time slider load.
The first slide or BxSlider was looking something like
<img src="...." >WHOLE PAGE WAS LOADING AGAIN IN IT WAS CAUSING PROBLEM</img>
I still do not know if its a bug of BxSlider or due to my both libraries, I a using Mootools and Jquery at the same time due to some reasons.
To resolve this I used
window.onload = function() {
//CODE ------
}
Instead of
jQuery(document).ready(function () {
//CODE ------
});
I hope it will help someone.

Owl carousel 2 - drag direction

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

Trying to insert jquery-mousewheel pluginin in to jquery cycle2

I'm trying to integrate jquery-mousewheel plugin (https://github.com/jquery/jquery-mousewheel) with the plugin - jquery cycle2 plugin.
Everything was fine until I discovered that mouse scrolling triggers a lot of scrolling events, especially with the new "magic" trackpads and mice that create a lot of inertia in the wheel.
On GitHub I found a plugin (https://github.com/amondit/jquery.scrollsteps.js) designed specifically for this plugin to handle with this problem.
I used the file jquery.scrollsteps-full-min.js.
That's how I call the plugin:
$(function() {
var $slider = $('.slider_overlay');
// slider initialize
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list',
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
// initialize scrollsteps plugin
$slider.scrollsteps({
up: $slider.cycle('prev'),
down: $slider.cycle('next')
});
});
And, when I start to scroll the page up and down, I get the following error message from firebug console:
"TypeError: i.down is not a function" or "TypeError: i.up is not a function"
Perhaps someone has any ideas or thoughts why this error may occur?
If I use a default mousewheel init (without scrollsteps plugin) - everything worked fine:
$slider.mousewheel(function(e) {
if (e.deltaY > 0) {
$slider.cycle('prev');
} else {
$slider.cycle('next');
}
});
but as I mentioned it triggers a lot of scrolling events.
Maybe I'm solve this problem incorrectly ? If somebody knows other solutions - will be very grateful for the help.

Аnswer )
$(function() {
var $slider = $('.slider_overlay');
$slider.cycle({
fx: 'scrollVert',
timeout: 0,
pager: '.slider_list'
pagerTemplate: '',
pagerActiveClass: 'active_slide',
slides: '> div',
centerHorz: true,
centerVert: true,
speed: 1000
});
function prev() {
$slider.cycle('prev')
}
function next() {
$slider.cycle('next')
}
$slider.scrollsteps({
up: prev,
down: next
});
});

Unslider add .active class to active elements?

I am using JQuery Unslider. How can I make it add an active class to the current slider element?
http://unslider.com/
I am trying to use this, but it is not working:
$('#slider').unslider({
delay: 3000,
keys: false,
fluid: true,
dots: false,
complete: function(){
$(this).addClass('active');
},
});

JsFiddle
var slider = $('.banner').unslider({
complete: function(el) {
if(sliderData)
{
sliderData.items.removeClass('active');
$(sliderData.items[sliderData.current]).addClass('active');
}
}
});
var sliderData = slider.data('unslider');

That didnt work for me.
I did this on line 187 of unslider.js
just make sure you add the class "active" to your fist slide.
good permanent fix.
if (o.fade) {
_.i = index;
ul.find("li:visible").fadeOut(speed);
ul.find("li:visible").removeClass('active');
ul.find("li").eq(index).addClass('active');
ul.find("li").eq(index).fadeIn(speed);
}