如何将JQuery图像滑块设置为屏幕宽度？

I have been following a tutorial on youtube on how to make a JQuery image slider. I seem to have run into a problem with my code however and i cant seem to fix why.

我一直在youtube上关于如何制作JQuery图像滑块的教程。我似乎遇到了我的代码问题,但我似乎无法解决原因。

I am wanting the images to be the full width of the screen, similar to how apple does on their site. apple website

我希望图像是屏幕的整个宽度,类似于苹果在网站上的表现。苹果网站

I have tried making the width of everything 100%, but this breaks my slider.

我已经尝试将所有内容的宽度设为100%,但这会打破我的滑块。

$(function() {

  //variables 
  var width = $('img').width();
  var animationSpeed = 500;
  var pause = 4000;
  var currentSlide = 1;
  var interval;

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

  function startSlider() {
    interval = setInterval(function() {
      $slideContainer.animate({
        "margin-left": "-=" + width
      }, animationSpeed, function() {
        currentSlide++;
        if (currentSlide === $slides.length) {
          currentSlide = 1;
          $slideContainer.css('margin-left', 0);
        }
      });
    }, pause);
  }

  function stopSlider() {
    clearInterval(interval);
  }

  $slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);

  startSlider();
});

@import url(https://fonts.googleapis.com/css?family=Pacifico);
 body {
  margin: 0px;
  background: #e6e6e6;
  color: white;
}
header {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: #e6e6e6;
  padding: 1px;
  position: fixed;
  z-index: 999;
  font-size: 100%;
  text-align: center;
}
nav {
  margin: 1;
  display: inline;
  white-space: nowrap;
}
#webSiteName {
  font-size: 1em;
  display: inline;
  padding: 40px;
  font-family: 'Pacifico', cursive;
}
.pages {
  font-size: 0.7em;
  color: white;
  list-style-type: none;
  display: inline-block;
  padding: 10px 40px;
  text-decoration: none;
  font-family: arial;
}
.pages:hover {
  color: #a6a6a6;
  cursor: pointer;
}
#slider {
  width: 720px;
  height: 400px;
  overflow: hidden;
}
#slider .slides {
  display: block;
  width: 6000px;
  height: 400px;
  margin: 0;
  padding: 0;
}
#slider .slide {
  float: left;
  list-style-type: none;
  width: 720px;
  height: 400px;
}
img {
  width: 720px;
  height: 400px;
}
/*# sourceMappingURL=stylesheet.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Example Website</title>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>

<body>
  <header>
    <nav>
      <a href='' id='webSiteName' class='pages'>Example</a>
      <a href='' class='pages'>Page</a>
      <a href='' class='pages'>Page</a>
      <a href='' class='pages'>Page</a>
      <a href='' class='pages'>Page</a>
    </nav>
  </header>

  <div id="slider">
    <ul class="slides">
      <li class="slide">
        <img src="images/slider1.png" />
      </li>
      <li class="slide">
        <img src="images/slider2.jpg" />
      </li>
      <li class="slide">
        <img src="images/slider3.jpg" />
      </li>
      <li class="slide">
        <img src="images/slider1.png" />
      </li>
    </ul>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>

2 个解决方案

#1

You need to set width:100% on some of your elements, specifically the slider, slides and images.

您需要在某些元素上设置宽度:100%,特别是滑块,幻灯片和图像。

#slider {
  width: 100%;
  overflow: hidden;
}
#slider .slides {
  display: block;
  width: 100%;
  height: 400px;
  margin: 0;
  padding: 0;
  float:left;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 100%;
  height: 400px;
}
img {
  width: 100%;
  height: 400px;
}

Here is a JSFiddle with the images red and 100% so you can see them.

这是一个JSFiddle,图像为红色和100%,所以你可以看到它们。

#2

So,

First, you have to setup all your width: 720px by 100%. But if you do that, your .slide do 100% of parent (so 6000px). way to big..

首先,您必须设置所有宽度:720px×100%。但是如果你这样做,你的.slide会做100%的父母(所以6000px)。大的方式..

So I have added a reference size on #slider (by adding position:relative, his size is the 100%). And by using width: 100vw; you make a refence to the viewport width (defined by the position:relative ;)

所以我在#slider上添加了一个引用大小(通过添加position:relative,他的大小是100%)。并使用宽度:100vw;你对视口宽度进行了反射(由position:relative;定义)

Now, you have a good 100% working slideshow. But when user resizing it didn't work. So, #1 I added a trigger on resize, to update width variable, and update the css. And #2, recalculate the margin based on width and currentSlide (try to still do it with relative margin when user rezise and look your margin going to -99999px ;) )

现在,你有一个很好的100%工作幻灯片。但是当用户调整大小时它不起作用。所以,#1我在resize上添加了一个触发器,更新了宽度变量,并更新了css。 #2,根据宽度和currentSlide重新计算保证金(当用户重新调整时,尝试仍然使用相对保证金,并查看您的保证金为-99999px;))

Final JSFiddle

#1