We Keep Coding

bxSlider - Wrong pause between slides when using pager

I'm running the latest version of Bxslider (4.2.14), everything works great except for the pager.
When using the pager to switch between slides, pause is much shorter than it should be:
Steps to reproduce:
Open the Fiddle: https://jsfiddle.net/Bruno42/smvhe3o4/7/
When Slide #2 appears wait ~3-4 seconds
Switch back to Slide #1 by clicking on the pager
Pause should then last 5 seconds (like during the "auto" mode), but instead it lasts only 1-2 seconds
I think the Pause countdown should be resetted to 5 seconds every time a slide is selected using the Pager.
I spent a while trying to figure out a solution in the clickPagerBind() function in jquery.bxslider.js by using clearInterval(slider.interval); to fix this, however it did not work (slider gets stuck after that).
Code used to load bxSlider (also available on my JsFiddle):
$('.bxslider').bxSlider({
maxSlides: 1,
slideWidth: 800,
pager: true,
pagerType: 'full',
autoHover: false,
auto: true,
stopAuto: false,
stopAutoOnClick: false,
speed: 1000,
pause: 5000,
mode: 'horizontal',
controls: false,
});
I would really appreciate your help on that.

The speed: 1000 might be too fast for the transition to complete and for startAuto() and stopAuto() methods to start or end. In order to control what methods are called during transition we can use a callback from the bxSlider API. Make a custom function and call it on either onSlideAfter or onSlideBefore. The following demo calls function pagerFix() onSlideAfter:
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
When initializing .bxSlider() make sure you reference it so you can call the methods.
let bx = $('.bxslider').bxSlider(...
Fiddle
(uses onSlideBefore)
Demo
(uses onSlideAfter)
let bx = $('.bxslider').bxSlider({
slideWidth: 800,
auto: true,
speed: 1000,
pause: 5000,
controls: false,
onSlideAfter: pagerFix
});
function pagerFix($bx, prv, nxt) {
bx.stopAuto(true);
bx.goToSlide(nxt);
bx.stopAuto(false);
bx.startAuto(true);
}
<link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css' rel='stylesheet'>
<ul class="bxslider" style="width: 800px; height: 250px;">
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=1"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=2"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=3"></li>
<li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=4"></li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js'></script>

How to remove slick slide on mobile?

I'm using the awesome Slick slide on a project.
The problem is: I have a carousel with 5 divs inside. 4 images and a video.
On mobile (< 768px) I want the slider to show only the images, not the video.
I tried to hide the video div by css but that's not working.
Any ideas on how to do this? Anyone had this need before?

Look at the «Filtering» demo at the Slick's documentation. Let's use it to solve the issue.
Set breakpoints that you need, using the responsive option.
Catch the breakpoint event and read the activeBreakpoint property of the carousel. Notabene: when the screen width is greater than the last of the breakpoints, this property returns null.
Call slickFilter and slickUnfilter methods:
slickFilter
Argument filter: selector or function
Filters slides using jQuery .filter syntax
slickUnfilter
Removes applied filter
Beware of an infinite loop: these methods cause a re-initialization of the slider, during which the breakpoint event again occurs (unless the breakpoint is null).
Call these methods during initialization too. Don’t forget to define the init handler before the initialization.
Check the result: https://codepen.io/glebkema/pen/NaGGzv
Slides with the .hide-on-mobile class become hidden when the screen width is 700px or less.
var breakpointMobile = 700,
isChanging = false,
isFiltered = false;
$('#breakpointMobile').text( breakpointMobile );
$('#myCarousel').on('init breakpoint', function(event, slick){ /** 2. and 5. **/
if ( ! isChanging ) { /** 4. **/
$('#breakpointValue').text( String(slick.activeBreakpoint) );
isChanging = true;
if ( slick.activeBreakpoint && slick.activeBreakpoint <= breakpointMobile) {
if ( ! isFiltered ) {
slick.slickFilter(':not(.hide-on-mobile)'); /** 3. **/
isFiltered = true;
}
} else {
if ( isFiltered ) {
slick.slickUnfilter();
isFiltered = false;
}
}
isChanging = false;
}
}).slick({
autoplay: true,
dots: true,
responsive: [ /** 1. **/
{ breakpoint: 500 },
{ breakpoint: 700 },
{ breakpoint: 900 }
]
});
body { /** Decorations **/
font-family: 'Open Sans', sans-serif;
}
.my-carousel img {
width: 100%;
}
.my-carousel .slick-next {
right: 15px;
}
.my-carousel .slick-prev {
left: 15px;
z-index: 1;
}
<h3>Slides 2, 3 and 5 become hidden when the screen width is <span id="breakpointMobile"></span>px or less</h3>
<p>Active breakpoint is <b id="breakpointValue"></b>. Try to resize the workspace.</p>
<div id="myCarousel" class="my-carousel">
<div>
<img src="https://via.placeholder.com/900x300/c69/f9c/?text=1" alt="">
</div>
<div class="hide-on-mobile">
<img src="https://via.placeholder.com/900x300/9c6/cf9/?text=2" alt="">
</div>
<div class="hide-on-mobile">
<img src="https://via.placeholder.com/900x300/69c/9cf/?text=3" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/c33/f66/?text=4" alt="">
</div>
<div class="hide-on-mobile">
<img src="https://via.placeholder.com/900x300/099/3cc/?text=5" alt="">
</div>
<div>
<img src="https://via.placeholder.com/900x300/f93/fc6/?text=6" alt="">
</div>
</div>
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick-theme.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.0/slick/slick.min.js"></script>

Slick has the method slickRemove (you have to scroll down a bit):
Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
I would just call this method and remove the slide with the video if your current screen size is lower than 768px.

You can unslick at a given breakpoint now by adding:
settings: "unslick"
instead of a settings object
To remove slick slider on mobile view add above code snippet to responsive breakpoint like this
$('.responsive').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: "unslick"
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});

bx slider : how to disable slide show when only one image is present

I am using bxslider to create a slideshow of my images. The images are updating dynamically. My problem is the sideshow fade-in and fade-out work even only one image is present. How can I stop this ?
bxslider options are
var coverSlider = $('.bxslider').bxSlider({
auto: true,
minSlides: 1,
maxSlides: 1,
pager: false,
speed: 500,
pause: 3000,
autoHover: true,
mode: 'fade',
controls: false
})
I am using reload method to update the slider when a new image is appends or removes
coverSlider.reloadSlider();

this helps me:
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
auto: ($(".bxslider li").length > 1) ? true: false,
pager: ($(".bxslider li").length > 1) ? true: false,
controls: false
});
});

You should check the number of images before reloading, and use destroySlider() method if there is only 1 image.
// Get the quantity of images (add your code if you want an example)
var numberOfImages = ...;
if (numberOfImages > 1) {
coverSlider.reloadSlider();
} else {
coverSlider.destroySlider();
}

Try
var numImgs = $('div.myClassName img').length;
if(numImgs>1)
{
\\Do your bxslider reload here
}
Instead you can use Jquery Selector too like below
jQuery(".image").Length
Hope this helps...
Click here to read about selectors Click

var numImgs = $('div.bxslider img').length;
if (numImgs > 1) {
$('.bxslider ').bxSlider({
controls: true,
...
});
}

This solution works for me
Change auto: true
to
auto: ($('#slidername').children().length < 2) ? false : true
Thanks to https://github.com/stevenwanderski/bxslider-4/issues/607

bx slider : how to disable slide show when only one image is present?
Set auto to false:
var coverSlider = $('.bxslider').bxSlider({
auto:false
})

bxSlider not showing slides on resize

I'm trying to set up a function so that when the user resizes their window, the slider is emptied and then re-implemented based on the size of the window.
The problem that I have is that the slider IS being re-implemented, but with without slides.
The code I'm using is:
var newdiv = $('<div class="slider1" />');
$(window).resize(function(){
$("#featured").empty();
$("#featured").append(newdiv);
if($(window).width() > 640){
$('.slider1').bxSlider({
slideWidth: 1200,
minSlides: 4,
maxSlides: 4,
slideMargin: 10,
pager: false
});
}else if($(window).width() > 480 && $(window).width() < 640){
$('.slider1').bxSlider({
slideWidth: 800,
minSlides: 3,
maxSlides: 3,
slideMargin: 10,
pager: false
});
}else if($(window).width() < 480){
$('.slider1').bxSlider({
slideWidth: 500,
minSlides: 2,
maxSlides: 2,
slideMargin: 10,
pager: false
});
}
});
If someone can either tell me what I'm doing wrong, or show me a better way of making this work, that'd be great. Thanks!

I think you are emptying your slider content, so it will display nothing.
Instead of emptying and redefining it you can destroy an reinit the bxSlider control.
Code:
slider.destroySlider();
slider = $('.bxslider').bxSlider({
slideWidth: 500,
minSlides: 2,
maxSlides: 2,
slideMargin: 10,
pager: false
});
Demo: http://jsfiddle.net/IrvinDominin/pjWjy/
This resize can cost a bit instead of resize you can build your resize end event: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

You are describing something i answered here
[collapsing bxslider when element style"display:none"
The bxslider shows the nav controls but not the slides.
The is resolved by calling slider1.reloadSlider()
The important thing to remember is you have to capture and keep a reference to your slider when you first create it.
$('.slider1').bxSlider()
can not be used to get a reference to your slider.
it will create a new slider everytime.
try assigning this to a variable and then using that variable to .append()
and .reloadSlider() as needed.
//initial creation
myslider = $('.slider1').bxSlider(options);
//then in the resize() event handler...
myslider.reloadSlider();
good luck

i might have found a strange solution for this, and would like others to confirm if it works for them.
first initialize the slider in document ready and add the resize call.
<script>
var myslide;
$(document).ready(function(){
myslide= $('.bxslider').bxSlider({
mode: 'horizontal',
captions: false,
controls : false,
pause:5000,
auto:true
});
});
$(window).resize(function(){
console.log(myslide.getCurrentSlide());
});
</script>
i resized the window and the slider continues to work, it seems that when you interact with the slider variable, it knocks it back on its feet.

Add current slide body class on slide change

I'm using slidesjs to create a slideshow on my site, this is working fine but I want to add a incremented class to the body tag e.g. slide-1 at load and then when the slide changes slide-2 etc until the slide fully rotates and it goes back to slide-1
My current code is;
<script>
$(function(){
$('#feature-slideshow').slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
animationStart: function() {
$("body").addClass("slide");
}
});
});
</script>
I have two problems;
1) the I want the initial class set before the slideshow has loaded so that the style which is a background is applied when the page is loaded rather than the slideshow
2) How to increment the slide-x class when the slideshow is transitioned/changed.
Any help would be greatly appreciated

Just add the initial class to body directly (<body class="slide-1">). No need to let JavaScript do this since it will always start at slide 1.
To increment that number you can set the currentClass option so that we can get the index of the current slide with .index().
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: true,
currentClass: "current"
animationStart: function() {
var idx = slideshow.children(".current").index();
document.body.className = "slide-"+(idx+1);
}
});
});

Ok managed to get this to work, thanks to Marcus for his help, I just tweaked your code to pickup the correct list 'pagination' which had the current class applied;
$(function(){
var slideshow = $("#feature-slideshow");
slideshow.slides({
preload: true,
preloadImage: '<?php bloginfo('template_url'); ?>/images/loading.gif',
generateNextPrev: false,
effect: 'fade',
play: 5000,
hoverPause: false,
currentClass: "current",
animationStart: function() {
var idx = $('ul.pagination').children(".current").index();
document.body.className = "slidebg-"+(idx+1);
}
});
});
I had to apply slidebg-3 to the body tag as for some reason when the slideshow cycles it includes the first list
Works great though apart from removing all other body classes, I suppose I could add it as an ID as I'm not using one of those
Anyway hope this helps someone else!