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

【问题标题】：How to make an adaptive image slider?如何制作自适应图像滑块？
【发布时间】：2020-04-24 06:47:39
【问题描述】：

我在 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%？

【问题讨论】：

我们如何重现您的问题？任何sn-p？
图片可以使用宽度：cal(100vw - 0px); （一些像素需要减少填充或其他东西。）使用媒体查询是一个不错的选择
@YadabSd 已经试过了，这样的问题：prnt.sc/s528sy
@NishargShah jsfiddle.net/enshtein/hp9bvk47/8

标签： html css slider responsive

【解决方案1】：

更正：

不要使用浮动：留在 .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>

【讨论】：