Question

我有一张点击幻灯片，可以在图像中前后移动，但是在较小的窗口上它没有缩放或动作响应，因为很明显宽度是用CSS中的像素和我函数中的变量绝对设置的。

如果我更改了这个，我不知道它是如何工作的，因为它来回滑动每个img（607px）的宽度

有人有想法吗？或者更好的方法吗？

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slider">
        <ul class="slides">
            <li class="slide"><img src="images/banner1.jpg" class="img-responsive"></li>
            <li class="slide"><img src="images/banner2.jpg" class="img-responsive"></li>
            <li class="slide"><img src="images/banner3.jpg" class="img-responsive"></li>
            <li class="slide"><img src="images/banner1.jpg" class="img-responsive"></li>
        </ul>
    </div>

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

        });

    });

Answer 1

为了使您已发布响应的滑块，您需要将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％。

别忘了为next和prev添加自己的功能，根据滑块中幻灯片的宽度调整每个幻灯片的进度距离。

另见：

How to make a image slider responsive?

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

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

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

Answer 2

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

为滑块和每张幻灯片指定宽度为100vw而不是607px。这将使它等同于一个＆＃34;视口宽度＆＃34;。在您的JavaScript中尝试将width变量修改为字符串100vw。确保包含该单元。

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

响应问题jquery点击滑块

2 个答案: