asked on

change jquery bxslider options in responsive

I would like to have different settings for my slider depending on its responsive state.
for example:

var windowsize = $(window).width();

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

Open in new window

On initial load of the page it seems to work fine, but when I resize the viewport the changes do not get applied to the slider?

Do I need to destroy and reload?

Thanks

COBOLdinosaur

No you just need it in a function and fire it with onresize event.

Cd&

leakim971

Check this : http://bxslider.com/examples/reload-slider-settings

	$(document).ready(function() {

		var settings = function() {
			var settings1 = {
				minSlides: 1,
				maxSlides: 1,
				moveSlides: 1,
				mode: 'fade',
				startSlide: 0,
				captions: false
			};
			var settings2 = {
				minSlides: 1,
				maxSlides: 4,
				moveSlides: 1,
				mode: 'horizontal',
				slideWidth: 280,
				startSlide: 0,
				slideMargin: 10,
				captions: true
			};
			return ($(window).width()<630) ? settings1 : settings2;
		}

		$(window).resize(function() {
			$('.slider-landing').reloadSlider(settings);
		});
		
		$('.slider-landing').bxSlider(settings);

	});

Open in new window

Al4ddin2

ASKER

Im getting a reloadSlider is not a function JS error?

My current code is:

$(document).ready(function () {
		if (pageType.val() == "tour-landing-page") {
			
			tourLandingScript();
			$(window).resize(tourLandingScript);
				
			// initiates responsive slide gallery
				
			var settings = function() {
				var settings1 = {
					minSlides: 1,
					maxSlides: 1,
					moveSlides: 1,
					mode: 'fade',
					startSlide: 0,
					captions: false
				};
				var settings2 = {
					minSlides: 1,
					maxSlides: 4,
					moveSlides: 1,
					mode: 'horizontal',
					slideWidth: 280,
					startSlide: 0,
					slideMargin: 10,
					captions: true
				};
				return ($(window).width()<630) ? settings1 : settings2;
			}
			
			$('.slider-landing').bxSlider(settings);
		
		}
	});
	
	function tourLandingScript() {
		var windowsize = $(window).width();
	
		$('.slider-landing').reloadSlider(settings);
		
		if (windowsize < 630) {
			// more mobile scripts here
		} else {
			// more desktop scripts here
		}
	}

Open in new window

leakim971

	$(document).ready(function () {
		// initiates responsive slide gallery			
		var settings = function() {
			var settings1 = {
				minSlides: 1,
				maxSlides: 1,
				moveSlides: 1,
				mode: 'fade',
				startSlide: 0,
				captions: false
			};
			var settings2 = {
				minSlides: 1,
				maxSlides: 4,
				moveSlides: 1,
				mode: 'horizontal',
				slideWidth: 280,
				startSlide: 0,
				slideMargin: 10,
				captions: true
			};
			return ($(window).width()<630) ? settings1 : settings2;
		}

		var mySlider;

		var tourLandingScript = function() {
			mySlider.reloadSlider(settings);
		}

		if (pageType.val() == "tour-landing-page") {		
			mySlider = $('.slider-landing').bxSlider(settings);
			$(window).resize(tourLandingScript);
		}
	});

Open in new window

Al4ddin2

ASKER

Thanks, I have applied your code on a test page and none of the settings get applied - settings1 or settings2.
It appears to be just the default.

Therefore it also doesn't change when the viewport size changes either.

leakim971

YOU add the line 31 and 34, not sure why
remove them for testing, it was not the subject of your main question

Al4ddin2

ASKER

Even with those lines removed it does nothing still.

leakim971

where to see that?

Al4ddin2

ASKER

Here i set the mode to fade and include min slides etc but none of them get applied.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<ul class="slider-landing">
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" title="hello" alt="bye" /></li>
  <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
</ul>

<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
	$(document).ready(function () {
		// initiates responsive slide gallery			
		var settings = function() {
			var settings1 = {
				minSlides: 2,
				maxSlides: 1,
				moveSlides: 1,
				mode: 'fade',
				startSlide: 0,
				captions: true
			};
			var settings2 = {
				minSlides: 2,
				maxSlides: 4,
				moveSlides: 1,
				mode: 'fade',
				slideWidth: 280,
				startSlide: 0,
				slideMargin: 10,
				captions: true
			};
			return ($(window).width()<630) ? settings1 : settings2;
		}

		var mySlider;

		mySlider = $('.slider-landing').bxSlider(settings);
		$(window).resize(tourLandingScript);

		
		function tourLandingScript() {
			mySlider.reloadSlider(settings);
		}
	});
</script>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lpranger

I used this solution on a site I am developing.

Everything seemed to work except when resizing teh window my captions disappeared.

I am using boostrap 3.1.1, jquery 1.10.1, bxslider 4.1

I am positioning my captions outside the ttile attribute like this

					<div>
						<img src="walk-fpo-800.jpg" alt="Partner">
						<div class='bx-caption'>
							<a href=''><span>Top Picks June 14th<br><span class='white-title'>12am - 10pm</span></span> 
							<span class='head'>Flag day - Light the museum pink <i class='fa fa-caret-square-o-right'></i></span></a>
						</div>
					</div>

Open in new window

Is this the title attribute problem? DO I need to give you more on this?