Missing piece of puzzle: Responsive BXSlider

Design help Custom code
1

Hi everyone, finishing up a landing/home page and i’ve made everything responsive EXCEPT the BXSlider.

I’ve tried to find code snippets online to add a responsive breakpoint to the script but it’s either not correct or i’m adding it incorrectly (just breaks the slider).

I’ve seen online people doing stuff like this:

if (windowsize < 630) {
	$('.slider-landing').bxSlider({
		minSlides: 1,
		maxSlides: 1,
		moveSlides: 1,
		mode: 'fade',
		startSlide: 0,
		captions: false
	});
	
} else {
	$('.slider-landing').bxSlider({
		minSlides: 1,
		maxSlides: 4,
		moveSlides: 1,
		mode: 'horizontal',
		slideWidth: 280,
		startSlide: 0,
		slideMargin: 10,
		captions: true

But couldn’t get my own solution going.

I just need something like: if the screen is < 630 use slideWidth: 230

Here is the current script i’ve got added. This one is working but no breakpoints on it yet:

$(document).ready(function(){

$('.carousel').bxSlider({
	pager: false,
	slideMargin: 30,
	controls: false,
	speed: 60000,
	useCSS: false,
	ticker: true,
	tickerHover: false,
	responsive: false,
slideWidth: 360,
	minSlides: 1,
	maxSlides: 4,
preloadImages: 'visible',
});

});

Hoping someone can spoon-feed me some code :smile:

2

@jackwabbit, you can get the window size by writing $(window).width() instead.

So

if (windowsize < 630) → $(window).width()

You might also want to nest the whole code in $(window).on('resize', function(){...code..}) so that when user resizes the slider still respon to width.

1 Like
3

Thanks a bunch @dennyhartanto

I’m assuming i’ve added it wrong though… is this close?:

$(document).ready(function(){

$('.carousel').bxSlider({
pager: false,
slideMargin: 30,
controls: false,
speed: 60000,
useCSS: false,
ticker: true,
tickerHover: false,
responsive: false,
slideWidth: 360,
minSlides: 1,
maxSlides: 4,
preloadImages: 'visible',

if (windowsize < 630) -> $(window).width() {
$('.carousel').bxSlider({
pager: false,
slideMargin: 30,
controls: false,
speed: 60000,
useCSS: false,
ticker: true,
tickerHover: false,
responsive: false,
slideWidth: 230,
minSlides: 1,
maxSlides: 4,
preloadImages: 'visible',
}
});
});
});
4

Hi again, was able to pay someone on Codementor to get this working for me, all we did was add this to the slideWidth line:

slideWidth: $(window).width() < 720 ? 230 : 360,

Instead of just:

slideWidth: 360,

I’m sure Denny’s solution would of worked too, but I guess I was adding that “if” function into the object and that’s not correct i’ve now found out :smiley:

1 Like
5

Hey @jackwabbit, sorry I didn’t reply sooner. You are right, what I mean was replace if(windowsize < 630) to if($(window).width() < 360). Should have made that clearer.

1 Like
6

No worries! I appreciate the nudge in the right direction. My coding knowledge just wasn’t up to speed enough to implement it correctly haha.