如何做一个自适应的图片滑块?

我在JQuery上做了一个小滑块。

HTML: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。但是在移动设备上,我需要将图像拉伸到块的宽度,id = slider。

但是,图片在宽度为10000像素的div块内–它们被拉伸到712像素。如何确保div div内的图片拉伸到100%的父div的id = slider?

解决方案:

更正:

  • 不要在.slider中使用float: left。
  • 在小屏幕上使用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>

给TA打赏
共{{data.count}}人
人已打赏
未分类

用于OpenFOAM的vtk过滤器

2022-9-8 20:32:38

未分类

为什么我不能用浮点数而不是整数?

2022-9-8 20:32:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索