在jQuery中匹配CSS媒体查询

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> 

Answer 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.

Answer 2

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