Develop Reference

Mousewheel Scroll Only Calling Previous

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);

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

Jquery LightSlider does not resume playback after thumbnail is clicked

I realised that lightSlider does not have a resume playback function and will stop playing once any slide is clicked. Is there any way we can add in this functionality?
$(document).ready(function() {
var slider = $('#demo').lightSlider({
item:1,
slideMargin:0,
pause:8000,
enableTouch:true,
auto:true,
loop:true,
controls:false,
pauseOnHover: true,
});
$('#demo').parent().on('mouseenter',function(){
slider.pause();
});
$('#demo').parent().on('mouseleave',function(){
slider.play();
});
});
I tried adding a resume play functionality with the mouseleave function but it does not work on mobile. Will appreciate if any one of you gurus has any suggestion. Thanks in advance.

i Found the solution.
01.use this lightSlider.js file link : http://raw.githack.com/sachinchoolur/lightslider/1.1.2/src/js/lightslider.js
02.script on the page:
$(window).load(function(){
$('#lightSlider').lightSlider({
item: 4,
auto:true,
slideMargin: 2,
loop :true,
pause: 4000,
speed: 1000,
onAfterSlide: function () {
$('#lightSlider iframe').remove();
$('#lightSlider li').removeClass('hasIframe');
}
});
});
found from this

Cycle once and stop on the first slide

I am trying to make the bxslider cycle through three slides and then return to the first slide and stop the slideshow in that position. I've tried different bits of code but I can't find anything that specifically addresses this kind of action. Any help is appreciated.
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
slideMargin: 0
});
});

The simplest way I can think of would be to insert a second copy of the first slide at the end so you have three slides and then another copy of the first and you tell it not to auto-repeat.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false, // don't auto-repeat
slideMargin: 0
});
});
Beyond that, you could specify a callback and after the third slide finishes displaying, you could stop the auto-advance and then tell it to goto the first slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideNext: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 3) {
slider.stopAuto();
slider.goToSlide(0);
}
}
});
});
If you only have three slides (a fact you haven't included that would have helped us), then perhaps you won't get an onSlideNext event when infiniteLoop is off. In that case, you could use the onSlideAfter method and trigger after showing the third slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 2) {
slider.stopAuto();
setTimeout(function() {
slider.goToSlide(0);
}, 5000); // put whatever time here you want the 3rd slide to show
}
}
});
});

Did you try this using callback?
var slider = $('.bxslider').bxSlider(options); //your default options here.
$('.bxslider').bxSlider({
onSlideAfter: function($slideElement, oldIndex, newIndex){
//if slide number is 3
if(newIndex === 2){
slider.goToSlide(0);
slider.stopAuto();
}
});
What this code will do is, it will callback onSlideAfter function as soon as the slide is changed.. If the slide index is 3 then the code will stop autoplay after going to first slide..
Used callbacks and methods :
onSlideAfter (callback)
goToSlide (method)
Reference here : http://bxslider.com/options

jQuery Waypoints not firing at correct location

I'm trying to set up three waypoints with offset positions, the first waypoint is working absolutely fine and firing in the correct offset position (75%), but the second and third waypoints, located just after a Flexslider Carousel are not firing at the correct offset position. Due to the Carousel changing the height dimension of the page the second and third waypoints are firing once scrolled a lot further down the page then required, hence increasing the actual offset location.
I have tried to call $.waypoints('refresh') but I am not having any lucky. My code is as follows.
// first-flexslider
$(window).load(function() {
$('#firstSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: true,
});
});
// second-flexslider
$(window).load(function() {
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
});
});
$('.prev, .next').on('click', function() {
var href = $(this).attr('href');
$('#secondSlider').flexslider(href)
return false;
})
$(document).ready(function(){
$.waypoints('refresh');
});
// waypoints
$(document).ready(function() {
$('.wp1').waypoint(function() {
$('.wp1').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp2').waypoint(function() {
$('.wp2').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp3').waypoint(function() {
$('.wp3').addClass('animated fadeInUpD');
}, {
offset: '75%'
});
});
I'm hoping to find out how to overcome this problem and have the 2nd and 3rd waypoints fire at the correct offset position (75%). Please let me know if you require any more information. Thanks.

Flexslider has a callback API where you can execute functions after various actions: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
I would check out the after callback and possibly the start callback and call refresh from there. For example:
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
after: function() {
$.waypoints('refresh');
}
});