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.
Related
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>
like the title i'm using bxslider at my website, actually i'm using vertical thumbnail slide now, but the problem is, it's look ugly when at mobile width, so i want to change it like normal slider with arrow. can you help me how to do that? here is the things i want:
1. at normal using vertical thumb slide
2. when the width triggered at specify width, the thumb is hide (maybe display none at css)
3. Do destroyslider for stopping the vertical thumb slider and change it to normal slider with arrow
4. when the width is normal again, it will switch again to vertical thumb slider
ok here is my jquery:
var mainImage;
$(window).load(function() {
mainImage = $('.product-gallery').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
controls: false,
auto: false,
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
mode: 'fade',
adaptiveHeight: true
});
$('.product-gallery-thumbs ul').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true,
pager: false,
auto: false,
minSlides: 4,
maxSlides: 4,
moveSlides: 1,
slideWidth: '100%',
mode: "#{options['product_thumbnail_direction']}",
slideMargin: 10,
onSliderLoad: function(currentIndex) {
$('.product-gallery-thumbs ul li').eq(0).addClass('active')
}
});
$('.product-gallery-thumbs ul li').each(function() {
$(this).click(function() {
$(this).addClass('active').siblings().removeClass('active');
mainImage.goToSlide($(this).index());
});
});
});
when do destroy :
mainImage.destroySlider();
here is normal slider with arrow:
mainImage.bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
UPDATE :
I try to did this, when do destroy is work, but when switching to normal arrow slider it doesn't work. Hope you guys can help me fix this
$(document).ready(function(){
setMaxWidth(767px);
mainImage.destroySlider();
function setMaxWidth(767px) {
mainImage.bxSlider({
mode: 'fade',
captions: true,
slideWidth: 600
});
})
bx.reloadSlider() Method
The method destroySlider() returns bxSlider as it was initially so don't use it if you want to change bxSlider after a reload, instead use reloadSlider(). Besides the obvious (reloading bxSlider), you can load a different set of options. Note: There are 2 Object Literals:
var cfgA = {...} and var cfgB = {...}
Each of them has key/value pairs (or properties) that are from the bxSlider API. When calling .bxSlider(), simply load one of configurations:
var bx = $('.bx').bxSlider(cfgA);
onSliderResize Callback
As far as slider plugins go, bxSlider isn't the most stable and it can get buggy as browsers update and bxSlider stagnates at v.4.2.12, but there's one thing bxSlider excels in is callbacks. I've written complex programs that are controlled by bxSlider callbacks because they are reliable and never break. In this demo onSliderResize call the function reloadBX(currentIndex). **Note: ** the absence of parenthesis on reloadBX():
onSliderResize: reloadBX
reloadBX(currentIndex)
This is the heart of the Demo. For demonstration purposes I've bound the function to a convenient button. When testing the Demo, you should expect the following by either clicking the RELOAD button, or resizing bxSlider:
Toggling between cfgA and cfgB
Relocates to the position index bxSlider was on before the reload.
Shifts images to adjust at reload to avoid images being stuck halfway.
Details commented in Demo
Demo
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>bxSlider Reload</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<style>
img {
margin: auto;
display: block;
max-width: 100%;
}
</style>
</head>
<body>
<button class='reload'>RELOAD</button>
<ul class='bx'>
<li>
<img src="https://i.imgur.com/DrEwPH0.jpg">
<img src="https://i.imgur.com/MEPxbq4.jpg">
</li>
<li>
<img src="https://i.imgur.com/6qGdA1e.gif">
</li>
<li>
<img src='https://i.imgur.com/DsM6J8U.gif'>
</li>
<li>
<img src="https://i.imgur.com/sbxyLKX.png">
</li>
<li>
<img src="https://i.imgur.com/DheohWR.gif">
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
// Cfg flag
var AB = 'A';
// Index counter
var idx = 0;
// cfgA
var cfgA = {
mode: 'horizontal',
slideWidth: 320,
adaptiveHeight: true,
onSliderResize: reloadBX
};
// cfgB
var cfgB = {
mode: 'fade',
captions: true,
slideWidth: 160,
adaptiveHeight: true,
onSliderResize: reloadBX
};
// Reference bxSlider instance
var bx = $('.bx').bxSlider(cfgA);
/*
Resize Callback
*/ // Called on resize event
function reloadBX(current) {
// Store current index
idx = current;
// Determine what configuration bx is in
if (AB === "A") {
/* if bx is in cfgA...
|| reload slider with cfgB
*/
bx.reloadSlider(cfgB);
// Shift all img to the left
$('img').css('transform', 'translateX(-25%)');
// Switch cfg flag to B
AB = "B";
// Otherwise...
} else {
// Reload slider with cfgA
bx.reloadSlider(cfgA);
// Shift all img to the right
$('img').css('transform', 'translateX(0)');
// Switch cfg flag to A
AB = "A";
}
// Go back to the index before reload
bx.goToSlide(idx);
}
// Added a reload button for convenient testing
$('.reload').click(function(e) {
// Get the current index and store it
idx = bx.getCurrentSlide();
/* Need to use the .call() function so that the context
|| is changed to bxSlider
*/
reloadBX.call(this, idx);
});
</script>
</body>
</html>
I am trying to load three setting variables for bxSlider, based on the size of the window. I want the new settings to load dynamically when the browser is resized, not just on load. I have the below code that is setting the variables, I'm just struggling with making it play nicely with the bottom variable of mySlider, which is what is laoding the script upon resize.
Can anybody offer tips?
$(document).ready(function () {
/* Set variables for the maxSlides option */
var slidenumber,
width = $(window).width();
if (width < 768) {
slidenumber = 1;
} else if (width < 1024) {
slidenumber = 2;
} else {
slidenumber = 3;
}
$('.bxslider').bxSlider({
slideWidth: 5000,
minSlides: slidenumber,
maxSlides: slidenumber,
slideMargin: 50
});
var mySlider;
function tourLandingScript() {
mySlider.reloadSlider(slidenumber());
}
mySlider = $('.bxslider').bxSlider(slidenumber());
$(window).resize(tourLandingScript);
});
Best way to achieve this would be using CSS and media queries, so that you can hide or shrink slides without changing their number. However, if you need more complex behaviour that can't be achieved just with plain CSS, you'll need to write some javascript to it.
You need to listen to window's resize event and when it fires, recalculate required number of slides and if it changes, update slider using it's reloadSlider() method. The code could look somehow like this:
$(document).ready(function () {
var slideCount;
var mySlider;
// separate function to calculate required slide count
function calculateSlides() {
var width = $(window).width();
var slidenumber;
if (width < 768) {
slidenumber = 1;
} else if (width < 1024) {
slidenumber = 2;
} else {
slidenumber = 3;
}
return slidenumber;
}
// when page loads, we initialize the slider
slideCount = calculateSlides();
mySlider = $('.bxslider').bxSlider({
slideWidth: 5000,
minSlides: slideCount,
maxSlides: slideCount,
slideMargin: 50
});
// when we resize the window, just recalculate number of slides
// and if it has changed, reload the slider
$(window).resize(function() {
var newSlideCount = calculateSlides();
if (newSlideCount != slideCount) {
slideCount = newSlideCount;
mySlider.reloadSlider({
minSlides: newSlideCount,
maxSlides: newSlideCount
});
}
});
});
I also added some small optimization, so that browser won't rebuild whole slider component on every window resize (which triggers several times per second when resizing window by dragging its edge), but only in the moment when actual number of slides changes.
Hope this helps.
Thank you to Ondra Koupil for his help, however I was not able to get his solution to work exactly as required, I have ended up opting for an entirely new approach, which I'm sure could be pulled apart in order to optimise and is unlikely to be the most efficient option, but it works for me and hopefully can be of use to others.
The below solution is intended to be two entirely separate pieces of JS, which will not work if combined on one page. The intention is to load the relevant option (settings one/two) on the relevant page.
/* Settings one */
$(document).ready(function () {
var settings = function() {
var settings1 = { /* Desktop */
minSlides: 3,
maxSlides: 3,
moveSlides: 1,
slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */
slideMargin: 50
};
var settings2 = { /* Mobile */
minSlides: 1,
maxSlides: 1,
moveSlides: 1,
slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */
};
return ($(window).width()<1200) ? settings2 : settings1;
}
var mySlider;
function reloadonresize() {
mySlider.reloadSlider(settings());
}
mySlider = $('.bxslider').bxSlider(settings());
$(window).resize(reloadonresize);
});
/* End settings */
/* Settings two */
$(document).ready(function () {
var settings = function() {
var settings1 = { /* Desktop */
minSlides: 4,
maxSlides: 5,
moveSlides: 3,
slideWidth: 5000, /* Intentionally set to high value, bxslider will auto calculate */
slideMargin: 50
};
var settings2 = { /* Mobile */
minSlides: 2,
maxSlides: 2,
moveSlides: 1,
slideWidth: 2000 /* Intentionally set to high value, bxslider will auto calculate */
};
return ($(window).width()>=768) ? settings1 : settings2;
}
var mySlider;
function reloadonresize() {
mySlider.reloadSlider(settings());
}
mySlider = $('.bxslider').bxSlider(settings());
$(window).resize(reloadonresize);
});
/* End settings */
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
})
I am using flexslider and I want to make a transition from the second slide to the first one when the slider becomes visible.
I was thinking about using
if (scroll >= 500px && scroll < 600px)
for example but I am not sure how to put that into the whole thing
You need to deal with the callback functions for the plugin you are using hide all the images from CSS by using a class let's say flexImages
$(document).ready(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 5,
minItems: 2,
maxItems: 4,
start: function(){
$('.flexImages').show();
},
});
});