0

I was wondering if this slider could be responsive at all? This slider works fine as uses a nice way to slide with css. I just need to make it responsive.

Currently shows only 6 images but I need to make it to 4 when the width is 780px; I'm not sure I can make it working with my poor knowledge.

http://jsfiddle.net/2FemF/

$('.items > .item', $container).each(function (i){
          if (i % 6 == 0) {
              $(this).nextAll().andSelf().slice(0, 6).wrapAll('<div class="wrap fadeIn"></div>');
          }
          else (i % 4 == 0){
              var $window = $(window);
              $window.resize(function resize() {
                    if ($window.width() < 768) {

                        $(this).nextAll().andSelf().slice(0, 4).wrapAll('<div class="wrap fadeIn"></div>');

                    }
                });
            }
      });
user2505665
  • 71
  • 3
  • 13

1 Answers1

0

This should do:

$('.items > .item').each(function(){ 
   $(this).wrap("<div class=\"wrap fadeIn\">"); 
   });
if($(window).width()<768){
    $("div.wrap:eq(3)").nextAll().remove();
}

At first we're slicing for all elements, then checking width and removing last two.

Michał
  • 2,456
  • 4
  • 26
  • 33
  • thanks for this, could you make it working on fiddle? as I don't seems to be able too? – user2505665 Mar 04 '14 at 11:28
  • you there still? I managed to do something like this, would you be able to double check please? http://jsfiddle.net/2FemF/6/ – user2505665 Mar 04 '14 at 11:52
  • I've updated the answer and made fiddle: http://jsfiddle.net/2FemF/8/ I believe this one is simpler and better. – Michał Mar 04 '14 at 16:50