响应问题 jQuery 单击滑块

为了使您发布的滑块具有响应性，您需要将 CSS 中的固定尺寸设置为流体宽度。

喜欢这个：

.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 编写了一个非常简单的演示滑块，几乎没有任何功能，只是为了达到这个解释的目的：

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

调整屏幕大小。幻灯片保持屏幕宽度，因为 .slide 和 .slider 都设置为屏幕宽度的 100%。

不要忘记为下一个和上一个添加您自己的功能，根据滑块中幻灯片的宽度调整每个幻灯片的进度距离。

另请参阅此处：

如何使图像滑块响应？

这是一个很好的教程，使用了一些高质量的代码。幻灯片也可以使用！

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

希望这有帮助！

更新：

由于OP指出问题出在js上，我挖出了我不久前写的一个简单的滑块，这里是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

这是我最终扩展的基本版本，但为了简单起见，我想这应该是完美的。

在使用响应式设计时，从像素的角度思考是一种不好的做法。

为您的滑块和每张幻灯片提供 100vw 而不是 607px 的宽度。这将使它等效于一个"视口宽度"。在你的JavaScript中，尝试将width变量修改为字符串100vw。确保包括该单元。

有关 CSS 单元的更多信息，请参阅此处。