I want to use flexslider with mousewheel here is the my example
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false
});
http://jsfiddle.net/VC4L3/
it's working but too fast. I'm using magic mouse by the way I'm trying touchpad too when I scroll down it's moving 2,3 sliders. I need each scrol down move 1 slide. How can I do that?
I couldn't find a simple solution for this so i have changed the source code of the flexslider, to disable scroll once the animation is started, here is what i did:
change bind for mousewheel to be like this.
slider.bind('mousewheel', function (event, delta, deltaX, deltaY) {
if (!slider.startedMouseWheel) {
slider.startedMouseWheel = true;
event.preventDefault();
var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, slider.vars.pauseOnAction);
}
});
find call of the vars after function
and insert this code before it:
slider.startedMouseWheel = false;
to have
slider.startedMouseWheel = false;
slider.vars.after(slider); //This is call of the vars after function
this way you will disable triggering new events on mouse scroll until animation is finnished.
Try adding animationSpeed into the flexslider.
Demo: http://jsfiddle.net/lotusgodkk/VC4L3/1/
$('#slider').flexslider({
animation: "slide",
mousewheel: true,
direction: "vertical",
slideshow: false,
animationSpeed: 4000,
});
Related
I have a slick slider for my images:
// Slick slider - Responsive
$(window).on('resize', function() {
if ($(this).width() > 1600) {
$('.images').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 20, // Set at least half of all slides
centerMode: true,
initialSlide: 0, // Fix for centerMode with 1
variableWidth: true,
arrows: true,
draggable: true,
swipeToSlide: true,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 3000
});
}
else {
$('.images').unbind(slick());
};
});
$(document).ready(function() {
$(window).resize();
});
If I refresh the page with a viewport less than 1600px (big size only for demo purposes), the slider not become active, works great. However if I change my browser's width bigger than 1600px and change it back to less than 1600px, the slider's code stays. I used slick slider's built-in responsive flags and unslick feature, but the problem was the same just like here: not completely clearing up it's code.
How can I completely remove it's code without refresh, only with viewport size change?
Edit:
Strange, but looks like this unbinding completely:
else {
$('.images').slick('unslick');
};
However the documentation suggested way is not, just partly:
responsive: [
{
breakpoint: 1600,
settings: 'unslick'
}
Edit:
Although the documentation suggested way removing it too, but not re-binding when the browser's the viewport size reaching where it should be active.
EDIT2:
THiCE's solution modified that only use timer for resize event. This way I won't get any console error on load because of .slick('unslick'); hack:
$(document).ready(function() {
$(window).on('load', function() {
handleSlick();
console.log('handleSlick() fired on load...');
});
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
console.log('handleSlick() fired on resize...');
}, 100);
//console.log('jquery on window resize');
});
//handleSlick();
});
Sometimes using a setTimeout does the trick: the resize event is fired lots of times during resizing.
If you use a timer inside the resize callback that resets and starts everytime the resize event fires, you prevent those 'double' fires.
An example, for your case:
// Slick slider - Responsive
function bindSlick() {
$('.images').slick({
dots: false,
infinite: true,
// etc...
});
}
function unbindSlick() {
$('.images').slick('unslick');
}
function handleSlick() {
if ($(window).width() > 1600) {
bindSlick();
} else {
unbindSlick();
}
}
$(document).ready(function() {
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleSlick();
}, 100);
});
handleSlick();
});
I've made a simple css3 animation (progress bar) and tried to put it inside my owl carousel slider, more particularly, to the buttons.
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
navigation : true,
pagination : true,
paginationSpeed : 400,
singleItem: true,
transitionStyle: "mask",
autoHeight: true,
autoPlay: 6000, //Set AutoPlay to 3 seconds
navigationText : false,
afterAction : syncPosition,
afterAction: function(current) {
current.find('video').get(0).play();
}
});
function syncPosition(el){
var current = this.currentItem;
// code for smooth transition
this.owl.owlItems.removeClass('turn-on');
$(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on');
}
function top_align() {
$(window).scrollTop(0);
console.log('move');
}
});
When it detect currentItem (visible slider) it turn the class (turn-on) and starts animation.
The problem is that the progress-bar animation, but also transitionStyle: "mask" doesn't work with the script below which I use to start the video in the slider. Of course when I remove it, it works fine.
afterAction: function(current) {
current.find('video').get(0).play();
}
UPDATE: Here is the fiddle
Do have someone an idea how to solve it? Thx in advance.
I am using the slick slider to display images. At the moment i have it so you can click on the navigation and it changes the main image display.
I am trying to get it to set the currently selected navigation on a hover event or mouseover event.
This is my current code for the navigation and display:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
//trigger after the slide appears
// i is current slide index
afterChange: function (slickSlider, i) {
//remove all active class
$('.slider-nav .slick-slide').removeClass('slick-active');
//set active class for current slide
$('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});
$('.slider-nav .slick-slide').eq(0).addClass('slick-active');
$('.slider-nav').slick({
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
autoplay: true,
dots: true,
centerMode: true,
focusOnSelect: true,
vertical: true
});
and this is my fiddle
Is it possible to bind a mouseover event to slick?
Should be possible. Never used slick before but on the first view it looks like a hover function is not implemented. I've created a fast basic approach how you could solve this with slick provided methods. See the fiddle.
You should optimize getting the slick object, it's just a starting point for you.
Also you should break the autoplay when hovering and restart it, just try around with the slick given methods.
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget),
index = $currTarget.data('slick-index'),
slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
});
Working fiddle
Using the above answer as a base, I was able to come up with this solution. This fixes the issue when quickly mousing over from navslide #1 to #3, and having the slider-for hangup on slide #2.
var slideTimer;
$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget);
$('.slider-nav .slick-slide').removeClass('slick-current');
$currTarget.addClass('slick-current');
slideTimer = setTimeout(function () {
var index = $('.slider-nav').find('.slick-current').data('slick-index');
var slickObj = $('.slider-for').slick('getSlick');
slickObj.slickGoTo(index);
}, 500);
}).on('mouseleave', '.slick-slide', function (e) {
clearTimeout(slideTimer);
});
I am currently using mouse-wheel to go from slide to slide. The slider I have is full screen so you cannot scroll passed it. This works out great, but I want to disable the mousewheel function of the flexslider so that on the last slide they can scroll freely either passed it, or back above it. I currently have the follow:
$('#main_slider .flexslider').flexslider({
animation: "fade",
animationSpeed: 650,
move: 1,
controlNav: false,
directionNav: false,
mousewheel: false,
animationLoop: false,
start: function(slider){
$('body').removeClass('loading');
},
before: function(slider){
//console.log(slider)
// Determine which slide we're moving to
// slidingTo = slider.animatingTo;
//console.log('sliding to: '+slidingTo);
$('.flexslider .slides > li').removeClass('hovered');
},
after: function(slider){
$('.flex-active-slide').addClass('hovered');
//console.log('triggered mouse');
if (slider.currentSlide == 1) { // TO SEE IF THE CURRENT SLIDE IS 2 TEST...
$('.flex-active-slide.hovered').css('background','blue')
}
if (slider.currentSlide == 2) { // TO SEE IF THE CURRENT SLIDE IS 3 TEST...
$('.flex-active-slide.hovered').css('background','red')
}
},
end: function(){
slider.pause();
WHAT GOES HERE TO DISABLE THE FLEX SLIDER MOUSE-WHEEL FUNCTION??
}
});
this ended up doing the trick (went in the end function)
$('#main_slider .flexslider').unmousewheel();
Thanks, I was able to turn off mouse wheel scrolling in my horizontal slider !!
}
// MOUSEWHEEL:
if (vars.mousewheel) {
slider.bind('**unmousewheel**', function(event, delta, deltaX, deltaY) {
event.preventDefault();
var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev');
slider.flexAnimate(target, vars.pauseOnAction);
});
}
// PAUSEPLAY
if (vars.pausePlay) methods.pausePlay.setup();
I want:
autoplay: false when is width>900 in window size and ,
autoplay: true when is width<900 & width>701 in window size and ,
autoplay: false when is width<701 in window size
with jQuery flowslideshow and when the window is resized run this code
but notworking.
$(window).resize(function () {
var width = $(window).width();
if (width > 900) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
}
else if (width < 900 & width > 701) {
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: true**, clickable: false });
});
}
else (width < 701)
{
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true,
showMultiple: 5
// use the slideshow plugin. It accepts its own configuration
}).slideshow({ **autoplay: false**, clickable: false });
});
} });
The onResize event of the window does not always fire on page load, so the slideshow wouldn't autoplay in that case. It does appear to fire on page load in ie9.
Also, this code would recreate the slideshow every time the page is resized - which is probably not what you want either.
You might be better binding the slideshow on page load, and then binding an event to resize that pauses / resumes the slide behaviour. Like this:
jQuery(function($) {
// detect window size and init slideshow here
$(window).on('resize', function () {
// detect window size and pause or resume the slideshow
});
});
Without seeing the docs for the slideshow you're using I can't point you in the direction of exactly how to modify the slideshow after it's initialised, but it should be possible if you follow the principle above.
(On a side note, to check the resize event is being triggered correctly, you could console.log($(window).width()))
If you need more help, consider posting a Fiddle with the full example in it, and link to the docs for the slideshow plugin you're using.