We Keep Coding

How to use "stopAuto" function in bxslider?

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

Unbinding a Jquery plugin completely from DOM on viewport resize

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

Enable slick only under a certain window width and disable it when window width turns bigger

I am writing a blog that shows posts with a slick carousel ONLY when the viewport is a certain value, so on mobile devices is it possible to scroll them.
I tried a lot of ways but none was successful.
Various problems occurred.
The code snippet closest to my goal is the following:
function slickify(){
$('.goslick').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 500,
settings: "unslick"
}
]
});
}
slickify();
$(window).resize(function(){
var $windowWidth = $(window).width();
if ($windowWidth > 500) {
slickify();
}
});
Unfortunately this does the opposite of my goal; it enables the carousel when the viewport is bigger than the value indicated by the relative variable. I really can't reverse this script.
Here is the not-working prototype

You'd need something to undo code executed in your slickify() function. You're calling slickify(); right off the bat, so its going to execute. You just need to add an else statement to do something different when the window size is less than 500.
function slickify(){
$('.goslick').slick({
dots: false,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 500,
settings: "unslick"
}
]
});
}
function deslickify(){
//todo logic here to disable
}
slickify();
$(window).resize(function(){
var $windowWidth = $(window).width();
if ($windowWidth > 500) {
slickify();
} else {
deslickify();
}
});
Edit:
This should be working as you have it. It looks like you've taken working code from this SO question: Enable and disable Slick Slider on certain break points
function slickify(){
$('.slick').slick({
autoplay: true,
autoplaySpeed: 4000,
delay: 5000,
speed: 700,
responsive: [
{
breakpoint: 500,
settings: "unslick"
}
]
});
}
slickify();
$(window).resize(function(){
var $windowWidth = $(window).width();
if ($windowWidth > 500) {
slickify();
}
});
And it can be seen working on this JS fiddle: http://jsfiddle.net/steveambielli/7weuyn4c/
It appears something in your implementation is causing some abnormality. Implementing the code from the other SO question should work. If you are getting specific errors or issues post them and we can further debug.

I made it working with this snippet:
function slickify(){
$('.goslick').slick({
autoplay: false,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
}
$(window).resize(function(){
var $windowWidth = $(document).width();
if ($windowWidth < 500) {
slickify();
}else{
$('.goslick').slick("unslick");
}
});
Note that I removed the call of the slickify() function out of the window.resize and I replaced windows.width with document.width in order to prevent that the slick loads bad going back to the page or starting it for the first time.

bxSlider onAfterSlide callback

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

How to make JCarousel Vertical Scroller reverse scroll?

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