responsive issue jquery click slider

Question

I have a click slide that goes back and forward through the images, But it doesnt scale or act responsive when on smaller window because obviously the width is set absolutely with pixels in the CSS and as the variable in my function.

If i change this I'm not sure how it'll work though as it slides back and forth the width of each img (607px)

Anyone got ideas?? Or a better way to do this??

HTML:

CSS:

#slider {
  width: 607px;
  height: 248px;
  overflow: hidden;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 248px;
  margin: 0px;
  padding: 0px;
}

#slider .slide {
  float: left;
  list-style-type: none;
}

JS:

(function() {

        var width = 607;
        var slideSpeed = 300;
        var currentSlide = 1;

        var $slider = $('#slider');
        var $slideContainer = $slider.find('.slides');
        var $slides = $slideContainer.find('.slide');

        var totalLength = $slides.length;

        $('#button-next').on('click', function(){
            $slideContainer.animate({'margin-left': '-='+width}, slideSpeed, function(){
                currentSlide++;
                if(currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', '0');
                }
            });
        });

        $('#button-prev').on('click', function(){
            if(currentSlide === 1) {
                var pos = -1 * (width * ($slides.length -1));
                    $slideContainer.css('margin-left', pos);
                    $slideContainer.animate({'margin-left': '+='+width}, slideSpeed);
                    currentSlide = $slides.length - 1;
                } else {
                    $slideContainer.animate({'margin-left': '+='+width}, slideSpeed);
                        currentSlide--;
                    }

        });

    });

AlphaG33k · Accepted Answer

In order to make the slider you have posted responsive you will need to set your fixed dimensions in your CSS to fluid width.

Like this:

.slider {
  position: relative;
  padding: 10px;
}
.slider-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  white-space: nowrap;
} 
.slide {
  width: 100%;
  display: inline-block;
}
.control {
  width: 49%;
}

A wrote a very simple demo slider that hardly has any functionality just to serve the purpose of this explanation:

http://codepen.io/nicholasabrams/pen/aOLoYM

Resize your screen. The slides stay the width of the screen because the .slide and .slider are both set to 100% of the screens width.

Dont forget to add your own functionality for next and prev that adjusts each slide progression distance according to the width of the slides in the slider.

Also see here:

How to make a image slider responsive?

And this is a good tutorial with somewhat quality code used. The slide comes out usable as well!

http://www.barrelny.com/blog/building-a-jquery-slideshow-plugin-from-scratch/

Hope this helps!

UPDATE:

Since the OP stated that the issue is with the js I dug up a simple slider I wrote a while back, here is the javascript/jQuery:

$(function(){
  $.fn.someCustomSlider = function (autoplay, velocity){
    var sliderProps = [
      // props n methods, accessible through data-slider-* attributes
      { 
        settings : { 
          invokeBecause : $('[data-widget~="slider"]'),
          autoplay : autoplay,
          speed : velocity,
        },
        bindings : {
          slideRail : $('[data-function~="slide-rail"]'),
          nextButton : $('[data-function~="next"]'),
          prevButton : $('[data-function~="prev"]'),
          playButton : $('[data-function~="play"]'),
          pauseButton : $('[data-function~="pause"]'),
          stopButton : $('[data-function~="stop"]')
          // attach this functionality to the DOM

        },
        methods : {
          slideNext :  function(){          slideRail.animate({left: '-=100%'}, velocity)   },
          slidePrev : function(){ slideRail.animate({left: '+=100%'}, velocity)  },
          slideRestart : function(){ slideRail.animate({left: '0%'}, velocity)  },
          pause :  function(){ window.sliderTimer = setInterval(slideNext, velocity) }
        }
      }
    ]
    $.each(sliderProps, function(){
      //    iterate through all of the slider objects properties
      window.SliderProps = this;
      // set slider props to be accessible to the global scope
    });
  // slider props stored as vars
  var slideRail = SliderProps.bindings.slideRail;
  var play = SliderProps.bindings.playButton;
  var next = SliderProps.bindings.nextButton;
  var prev = SliderProps.bindings.prevButton;
  var pause = SliderProps.bindings.pauseButton;
  var stop = SliderProps.bindings.stopButton;
  var i = 0;

  function slideNext(){
    var slideNext = SliderProps.methods.slideNext();
  }
  function slidePrev(){
    var slidePrev = SliderProps.methods.slidePrev();
  }
  function slideStop(){
    /*slideRail.stop(); */
    window.clearInterval( sliderTimer  )
  }
  function slideRestart(){
    var slidePrev = SliderProps.methods.slideRestart();
    slideRail.stop(); 
    window.clearInterval( sliderTimer  )
  }
  function autoPlay(){
   SliderProps.methods.pause() 
  }
  // elemen -> event delegation -> function()
  next.click(slideNext)
  prev.click(slidePrev)
  stop.click(slideRestart)
  pause.click(slideStop)
  play.click(autoPlay)
  } // close function slider()
  someCustomSlider(true, 1000);
});

http://codepen.io/anon/pen/eytrh

This was a basic version that I eventually extended but for simplicity sake, this should be just perfect I imagine.

responsive issue jquery click slider

Answers (2)

Related Questions