I was able to instantiate a working scroller using jQuery Jcarousel however I need it to reverse scroll. For example right now I have:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 1,
vertical: true,
scroll: 1,
animation: "slow",
wrap: 'last',
initCallback: mycarousel_initCallback
});
});
What do I need to do to make the items scroll upwards instead of downwards?
Thank You in advance
actually, it's more simple than that.
scroll: -1
cheers!
Reverse autoscrolling is not implemented yet although you can code it quite easily.
This is the autoscrolling function in jCarousel:
/**
* Starts autoscrolling.
*
* #method auto
* #return undefined
* #param s {Number} Seconds to periodically autoscroll the content.
*/
startAuto: function(s) {
if (s != undefined)
this.options.auto = s;
if (this.options.auto == 0)
return this.stopAuto();
if (this.timer != null)
return;
var self = this;
this.timer = setTimeout(function() { self.next(); }, this.options.auto * 1000);
},
(Lines 687 to 706 in jquery.carousel.js )
Changing self.next(); to self.prev() should to the trick (can't test it right now, if you do please post the results).
Good luck :)
Just to add this to XaviEsteve answer (I can't find a place to add comment to his answer anyway).
Once I've changed self.next() to self.prev(), I have to change 'wrap' option to 'both' to make it work for me, like this.
jQuery('#mycarousel').jcarousel({
auto: 1,
wrap: 'both',
vertical: true,
scroll: 1,
start: 30,
initCallback: mycarousel_initCallback
});
Try this, it should work
$(document).ready(function() {
$('#mycarousel').jcarousel({
vertical: true,
wrap: 'circular',
animate: 'slow',
});
$('#mycarousel').jcarouselAutoscroll({
interval: 3000,
target: '-=1', /*if you change - on + it will scroll up*/
autostart: true
});
});
Related
I have a bx slider which has 6 images. I want to go through each of them once then stop for a second and then begin again, then stop for one second again etc. It's mentioned here (http://bxslider.com/options) but with no full example.
This is the code I have now. It doesn't stop navigation images.
<script>
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
speed: 1,
pause:200
});
</script>
Sorry for the lame question. I am a still a newbie to jQuery.
Set autoDelay option and onSlideAfter function
Demo: http://jsfiddle.net/3h0ewwz4/
var slider = $('.bxslider').bxSlider({
auto: true,
autoDelay:2000,
onSlideAfter: function (slide, oldIndex, newIndex) { // add this function to solve issue
if (newIndex === 5) { // remember, it's zero based indices with bxslider...5 is index of last image
slider.stopAuto();
setTimeout(function () {
slider.goToSlide(0);
slider.startAuto();
}, 2000);
}
},
autoControls: true,
speed: 1,
pause:200
});
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 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,
});
I am afraid I am not very good at javascript and would really appreciate a guiding hand.
Using jcarousellite this code goes at the top of the body:
<script type="text/javascript">
$(function() {
$(".carousellite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
auto: 1200,
speed: 3000,
easing: "easeInOutExpo",
visible: 5,
pauseOnMouseOver: true, // This is the configuration parameter
circular: true
});
});
</script>
I wish the value of the number visible to be 1 if device width <=480px and 5 if more.
I have tried using code such as this in the above expression with no success:
if ($(window).width() < 480) {
$(".carousellite").jCarouselLite({visible: 1});
}
else {
$(".carousellite").jCarouselLite({visible: 5});
}
I would be so grateful for some help.
Thank you!
Jonathan
I have found my own solution
<script>
setTimeout(function(){
if (screen.width < 480 ){
//scripts for smaller screens
$(".carousellite").jCarouselLite({
visible: 1
});
}
},300)
</script>
Thanks to: http://scriptcult.com/subcategory_1/article_856-get-device-width-screen-width-on-mobile-devices.html
Good morning all :) I've got an issue here, which is pain in my neck for 2 days already. I'm using bxSlider for images to slide on a page and I'm calling my own function in onAfterSlide callback. Everything works fine except one thing. When I quickly switching between slides my function is being called 2-3 times(I have 3 images on page), which is not good as it returns unexpected results. I can not use newest version of bxSlider, because the markup has been changed. I think this happens, because the animation is still not finished when the onAfterSlide callback is called.
This is how I call bxSlider:
$('#slider_bx').bxSlider({
mode: 'fade',
speed: 1000,
pause: 9000,
auto: true,
autoControls: false,
prevText: '',
nextText: '',
autoHover: true,
captions: false,
pager: true,
onBeforeSlide: function () {
if ($('.slide_in').length) {
$('.slide_in').hide();
}
},
onAfterSlide: function () {
if ($('.slide_in').length && $('.slide_in').is(':hidden')) {
doCrazyStuff();
}
}
});
And this is my function:
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
setTimeout(function () {
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Any help appreciated. Thanks.
EDIT:
I've tried to add .stop(), but didn't helped.
$this.show().stop();
$this.stop().show();
$this.stop().rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
}).stop(); // throws an error
You can cancel a timeout or make a check to see if it's running.
If you want only the last timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
clearTimeout(crazyTimeout); // Cancel previous timeout
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
If you want only the first timeout to run:
var crazyTimeout;
function doCrazyStuff() {
var $this = $('.slide_in');
if ($this.length > 0) {
if (crazyTimeout != undefined) {
return; // A timeout is still running: don't create new one
}
crazyTimeout = setTimeout(function () {
crazyTimeout = undefined;
$this.show();
$this.rotate({
duration: 2000,
angle: 90,
animateTo: -20
});
}, 3000);
}
}
Try using the
$('.slide_in').stop()
in after slide function I hope it works, if possible try to give code in fiddle it will be easy to help.
Viewing your code I think the problem is not with your code : but as you have set auto to true so the plugin timer is not stopped and is sliding the images in its regular interval.
so I hope the use of stopAuto() bxSlider function in your custom function will solve the problem. and don't forget to start the auto show after you have finished doing your stuff.
thanks