如何制作自适应图像滑块？

Question

我在 JQuery 上有一个小滑块。

HTML:

<div class="slider">
  <div>
    <img src="1.jpg">
    <img src="2.jpg">
    <img src="3.jpg">
  </div>
  <a class="prev"></a>
  <a class="next"></a>
</div>

CSS:

.slider {
  float: right;
  max-width: 712px;
  max-height: 423px;
  overflow: hidden;
  position: relative;
}
.slider div {
  position:relative;
  width: 10000px;
  height: 424px;
}
.slider div img {
  float: left;
  display: block;
  width: 100%;
  max-width: 712px;
}

在桌面上，一切正常，因为图像的宽度被拉伸到 712 像素。但是在移动设备上，我需要使用 id = slider

将图像拉伸到块的宽度

但是，图像位于宽度为 10000 像素的 div 块内 - 它们被拉伸到 712 像素。如何确保 div div 中的图像拉伸到 id = slider 的父 div 的 100%？

Answer 1

Corrections:

不要使用 float: left in .slider
在图像的媒体中为小屏幕使用 vw 中的宽度
赶上

window.sldrcnt = 0;
function slider(direct) {
    if (direct == 'prev') {
     if (window.sldrcnt != 0)
      window.sldrcnt = window.sldrcnt + 1;
    } else {
     if ( Math.abs(window.sldrcnt - 1) == $('.slider div img').length )
      window.sldrcnt = 0;
     else
      window.sldrcnt = window.sldrcnt - 1;
    }
 $('.slider div').animate({'marginLeft': window.sldrcnt * $('.slider div img').innerWidth()}, 600);
}

.slider {
  /*float: right;*/
  max-width: 712px;
  max-height: 423px;
  overflow: hidden;
  position: relative;
}
.slider div {
  position:relative;
  width: 10000px;
  height: 424px;
}
.slider div img {
  float: left;
  display: block;
  width: 100%;
  max-width: calc(100vw - 0px); /* instead 0 use the total space if  used both left & right  */
}
.slider .prev, .slider .next {
  position: absolute;
  top: 50%;
}
.slider .next {
  right: 20px;
}
.slider .prev {
  left: 20px;
}

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
<div class="slider">
  <div>
    <img src="https://dummyimage.com/712x423/a155a1/fff">
    <img src="https://dummyimage.com/712x423/6da155/fff">
    <img src="https://dummyimage.com/712x423/c93a63/fff">
  </div>
  <a class="prev" href="javascript:slider('prev');void(0);">prev</a>
  <a class="next" href="javascript:slider('next');void(0);">next</a>
</div>
</body>
</html>

如何制作自适应图像滑块？

How to make an adaptive image slider?

html

css

slider

responsive