Javascript 响应问题jquery单击滑块

我有一张点击幻灯片，可以在图像中来回切换， 但在较小的窗口上，它不会缩放或响应，因为很明显，宽度是用CSS中的像素和函数中的变量绝对设置的

如果我改变这一点，我不知道它将如何工作，虽然它来回滑动的宽度，每个img（607px）

有人有主意吗？？还是一个更好的方法

HTML:

JS:

---

当使用响应性设计时，用像素来思考是一种不好的做法

将滑块和每个滑块的宽度设置为100vw，而不是607px。这将使它相当于一个“视口宽度”。在JavaScript中，尝试将

width

变量修改为字符串100vw。确保包括该单元

---

有关CSS单位的更多信息，请参阅。

为了使您发布的滑块具有响应性，您需要将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编写了一个非常简单的演示滑块，它几乎没有任何功能，只是为了满足本说明的目的：

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

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

另请参见此处：

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

希望这有帮助

更新：

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

---

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

VW的浏览器支持非常粗略，我不建议在生产站点/应用程序中陷入这种混乱。IE仍然不支持很多标准，请参见这里，4.2、4.3中没有android支持！为了旧的时间，使用好的旧%点怎么样？浏览器支持足够可靠，让我感觉舒适。百分比起作用，但它取决于元素在页面上的位置。如果我正在构建一个模块化系统，我会使用vw。感谢详细的响应和演示@AlphaG33k，我的问题在于我的jQuery函数，我很好地理解CSS的变化，但我不确定如何重写函数，以便在不停止等情况下仍然循环浏览图像，而不使用图像的宽度。我将仔细查看这些链接，但我是否应该以不同的方式编写代码？对jQ来说真的很新。如果你把部分工作的代码放在codepen演示中，社区会更容易帮助你更新新的演示和与你类似的代码。您走的是正确的道路，每个人都从和您一样的代码开始！哇，再次感谢您的演示和更新@AlphaG33k。它运行得非常好。我将尝试实现它。当它到达最终图像时是否循环？非常感谢！！当然，毫无疑问，教学能帮助我们学习。我真的很难过，因为我现在再也不会写这样的代码了！但为了学习的目的，它应该起作用。有时，模块越好，源就越难理解。不，它没有内置重复功能，但这并不难。计算.slide容器内的幻灯片数量，然后当next（）触发或单击的数量达到子幻灯片的数量时，您就知道要将CSS重置回左侧：0或您希望的任何位置。如果您喜欢，请不要忘记单击复选标记接受我的答案：）

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

        });

    });

.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%;
}

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