Matching css media queries in jQuery

Question

this is a continuation of my question yesterday regarding an automatic jQuery image slider which you can find here - Jquery automatic image slider.

I've added a couple of media queries into my css and am trying to mirror them with an 'if / if else' statement in the javascript, however at the moment it's only working for the second section of the statement. For both others the slide appears to move 620px to the left, leaving a section of another picture in the frame, but still resets to 'margin: 0' after the last slide.

There is also a lot of repetition in the code which ideally I would like to get rid of but when I tried including only the width variable in the 'if' statement the code didn't run.

I'm stumped! Any help would be greatly appreciated.

$(document).ready(function() {

	//INDEX IMAGES SLIDER
	$(function() {

		if($('#slider').width() > 760) {

			//configuration
			var width = 720;
			var speed = 1000;
			var pause = 2000;
			var current = 1;

			//cache DOM
			var $slider = $('#slider');
			var $slides = $slider.find('#slides');
			var $slide = $slides.find('.slide');

			setInterval(function() {
				$slides.animate({'margin-left': '-='+width}, speed, function() {
					current++;
					if (current === $slide.length) {
						current = 1;
						$slides.css('margin-left', 0);
					}
				});			
			}, pause);

		} else if($('#slider').width() <= 760) {

			var width = 620;
			var speed = 1000;
			var pause = 2000;
			var current = 1;

			//cache DOM
			var $slider = $('#slider');
			var $slides = $slider.find('#slides');
			var $slide = $slides.find('.slide');

			setInterval(function() {
				$slides.animate({'margin-left': '-='+width}, speed, function() {
					current++;
					if (current === $slide.length) {
						current = 1;
						$slides.css('margin-left', 0);
					}
				});			
			}, pause);

		} else {

			var width = 520;
			var speed = 1000;
			var pause = 2000;
			var current = 1;

			//cache DOM
			var $slider = $('#slider');
			var $slides = $slider.find('#slides');
			var $slide = $slides.find('.slide');

			setInterval(function() {
				$slides.animate({'margin-left': '-='+width}, speed, function() {
					current++;
					if (current === $slide.length) {
						current = 1;
						$slides.css('margin-left', 0);
					}
				});			
			}, pause);
		};
	});
 });

#slider {
	width: 720px;
	height: 400px;
	overflow: hidden;
	margin: 100px auto;
}

#slider #slides {
	display: block;
	width: 2880px;
	height: 400px;
	margin: 0;
	padding: 0;
}

#slider .slide {
	float: left;
	list-style: none;
	height: 400px;
	width: 720px;
}

#slider .slide img {
	width: 100%;
}


@media only screen and (max-width: 760px) {
	#slider {
		width: 620px;
	}

	#slider .slide {
		width: 620px;
	}

	#slider .slide img {
		width: 620px;
	}
}


@media only screen and (max-width: 650px) {
	#slider {
		width: 520px;
	}

	#slider .slide {
		width: 520px;
	}

	#slider .slide img {
		width: 520px;
	}
}

<div class="page-container">

	<div id="slider">
			
		<ul id="slides">
          
			<li class="slide"><img src="images/sp_1.png"></li>
			<li class="slide"><img src="images/ss_1.jpg"></li>
			<li class="slide"><img src="images/sd_1.jpg"></li>
			<li class="slide"><img src="images/sp_1.png"></li>
          
		</ul>
      
	</div>

</div>

It looks like the width of your slider never exceeds 720px hence why only the second branch is run. Your final 'else' will never run. — Ash
– Ash, Commented Jul 16, 2015 at 10:46

Ash · Accepted Answer · 2015-07-16 10:53:01Z

1

Your code is fundementally flawed; the width of the slider will never exceed 720px and that is why only the second branch of your if statement runs. Your final else will never run.

In terms of refactoring your code, you could do something like this:

$(document).ready(function() {

  //INDEX IMAGES SLIDER
  $(function() {

    var width;
    var speed = 1000;
    var pause = 2000;
    var current = 1;

    if ($('#slider').width() > 760) {
      //configuration
      width = 720;
    } else if ($('#slider').width() <= 760) {      
      width = 620;
    } else {      
      width = 520;
    };

    //cache DOM
    var $slider = $('#slider');
    var $slides = $slider.find('#slides');
    var $slide = $slides.find('.slide');

    setInterval(function() {
      $slides.animate({
        'margin-left': '-=' + width
      }, speed, function() {
        current++;
        if (current === $slide.length) {
          current = 1;
          $slides.css('margin-left', 0);
        }
      });
    }, pause);

  });
});

Hope this helps.

answered Jul 16, 2015 at 10:53

Ash

2,1082 gold badges19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fadomire Over a year ago

you could also try to replace setInterval with requestAnimationFrame for better performance and replace margin animate with css3 translate

samnicho Over a year ago

Thanks Andrew, that's really helpful - it's tidied up nicely and i've fixed that error so it now works for each defined width of #slider. However, this is only the case when I refresh the page, if i resize then the 'if' statement doesn't kick in. Do I need to use something like '$(#slider).resize(checkSize);'? I've just had a play around with it but can't make it work...

samnicho Over a year ago

Cool yeah I thought so. I'll check out the API and see what I can do. Thanks for the help!

samnicho · Accepted Answer · 2015-07-16 12:00:04Z

0

Thanks Andrew for your solutions, really helpful. I've now fixed the code completely so that the slider works when the page loads, whatever the initial width, and then also responds to the window being resized.

I've posted the new code below. Hope it's useful to someone!

$(document).ready(function() {

	//INDEX IMAGES SLIDER
	$(function() {

		//configuration
		var width = $('#slider').width(); //detect width of slider on page load
		var speed = 1000;
		var pause = 7000;
		var current = 1;

		//change value of 'width' to match image widths when media queries are triggered
		$(window).resize(function() {
		    if ($('#slider').width() === 720) {
		      //configuration
		      width = 720;
		    } else if ($('#slider').width() === 620) {      
		      width = 620;
		    } else {      
		      width = 520;
		    };
		});

		//cache DOM
		var $slider = $('#slider');
		var $slides = $slider.find('#slides');
		var $slide = $slides.find('.slide');

		//move the images the defined width and speed to the left
		setInterval(function() {
			$slides.animate({'margin-left': '-='+width}, speed, function() {
				current++;
				if (current === $slide.length) {
					current = 1;
					$slides.css('margin-left', 0);
				}
			});			
		}, pause);

	});

});

answered Jul 16, 2015 at 12:00

samnicho

1411 silver badge10 bronze badges

1 Comment

samnicho Over a year ago

There's a small issue with the above code in that the new width is not applied until the slider goes to back to the first slide. I've fixed it by adding '$slides.css('margin-left', 0);' at the start of the first if statement, thereby negating the issue by resetting the slider immediately on page resize. It works but I'm sure there's probably a better way - any suggestions would be welcome!

Collectives™ on Stack Overflow

Matching css media queries in jQuery

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related