Question

我在尝试使我的JQuery滑块响应时遇到问题（如果我调整窗口的大小，图像的一半会被裁掉），问题是，使用视口和媒体查询我网站上的其他所有内容都是响应式的，只是滑块是不

这是我的JSFiddle https://jsfiddle.net/Syystole/4r4qnojo/3/

HTML

<style>
img {max-width: 100%}
.side-by-side{
display: flex;
}
</style>

<body>
<div class="WrapperPage">

<section id="slider">
  <ul class="mySlide">
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/></li>
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/></li>
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image" /></li>
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image" /></li>
  </ul>
<span class="button back">Back</span>
<span class="button next">Next</span>
</section>

</div>
</body>
</html>

JS

var sliderList;
$(function() {

  var sliderWrapper = $("#slider");
  sliderList = sliderWrapper.children("ul");
  var sliderItems = sliderList.children("li");
  var count = 1;
  var sliderItems = $('ul.mySlide > li').length;
  var sliderDuration = 1000;
  var countLimitReached = "";


  function animateSlider(direction, duration, countLimitReached) {
      if (direction === "+") {
        count--;
      if(countLimitReached == "start"){
        sliderList.animate({
          "margin-left": "-=2400px"
        }, duration);
        count = 4;
        return;
        } else
      {       
        sliderList.animate({
          "margin-left": "+=800px"
        }, duration);
        }
      } 

      else if (direction === "-") {
        count++;

       if(countLimitReached == "end"){
        sliderList.animate({
          "margin-left": "+=2400px"
        }, duration);
        count = 1;
        return;
        } else
      {
          sliderList.animate({
            "margin-left": "-=800px"
          }, duration);
        }
      }
  }

    function checkCount(count, sliderItems){
    if(count === sliderItems){
      return "end";
    }
    else if(count == 1){
    return "start";
    }
    return "";
  }

  $(".button").on('click', function() {
        countLimitReached = checkCount(count, sliderItems);
        if ($(this).hasClass("back")) {
        animateSlider("+", sliderDuration, countLimitReached);
      } else {
        animateSlider("-", sliderDuration, countLimitReached);
      }
    countLimitReached = "";
  });
});

CSS

#slider {
margin: 0 auto;
width: 82%;
overflow:hidden;
}

#slider ul {
list-style: none;
width: 3500px;
margin: 0;
padding: 0;
}

#slider li{
float: left;
width: 800px;
}

img{
width:100%;
}

.button {

font-family: Arial, sans-serif;
font-size: 20px;
display: block;
padding: 20px;
border: 1px solid #ccc;
}

.back {
float: left;
}

.next {
float: right;
}

Answer 1

我的滑块有一些改变，希望这次对你有用。

$(function() {

  var ul = $("#slider ul");
  var slide_count = ul.children().length;
  var sliderDuration = 1000;
  var slide_width_pc = 100.0 / slide_count;
  var slide_index = 0;
  
  ul.find("li").each(function(indx) {
    var left_percent = (slide_width_pc * indx) + "%";
    $(this).css({"left":left_percent});
    $(this).css({width:(100 / slide_count) + "%"});
  });

  // Listen for click of prev button
  $("#slider .prev").click(function() {
    if(slide_index ==0){
    	slide_index = slide_count;
    }
    slide(slide_index - 1);
  });

  // Listen for click of next button
  $("#slider .next").click(function() {
     if((slide_count-1) == slide_index){
    	slide_index = -1;
    }
    slide(slide_index + 1);
  });

  function slide(new_slide_index) {

    if(new_slide_index < 0 || new_slide_index >= slide_count) return; 

    var margin_left_pc = (new_slide_index * (-100)) + "%";

    ul.animate({"margin-left": margin_left_pc}, sliderDuration, function() {

      slide_index = new_slide_index

    });

  }

});

#slider {
  width: 100%;
  overflow: hidden;
  height: 300px;
  position: relative;
}

#slider ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  width: 300%;
  height: 100%;
  top: 0;
}

#slider li {
  padding: 0;
  margin: 0;
  width: 33.333333%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  border: none;
}

#slider li img {
  border: none;
  width: 100%;
  min-height: 100%;
}

#slider button {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: none;
  outline: none;
  top: 0;
  bottom: 0;
  width: 20%;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  margin: 0;
  padding: 0;
  text-align:center;
  opacity: 0;
  z-index: 2;
}

#slider button.prev {
  left: 0;
}

#slider button.next {
  right: 0;
}

#slider button:hover, .slider button:active {
  opacity: 1.0;
}

#slider .content {
  z-index: 3;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  line-height: 3em;
  padding: 0 1em;
  font-size: 1.5em;
}

#slider .content a {
  color: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

    <div class="WrapperPage">

     <div id="slider">
  <ul class="mySlide">
    <li>
      <img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/>
    </li>
    <li>
      <img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/>
    
    </li>
    <li>
      <img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/>
    </li>
    
  </ul>
  <button class="prev">prev</button>
  <button class="next">next</button>
</div>

    </div>

  </body>

JQuery Slider响应式设计麻烦

1 个答案: