[英]How to make Slider Responsive in Html and Css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#slider {
height: 350px;
width: 70%;
margin: auto;
overflow: hidden;
background: #CCC;
}
.slide {
height: 350px;
float: left;
text-align: center;
border: 1PX SOLID #000;
line-height: 8em;
font-size: 40px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>
<script>
$(document).ready(function () {
// you can set this, as long as it's not greater than the cv.slides length
var show = 3;
var w = $('#slider').width() / show;
var l = $('.slide').length;
$('.slide').width(w);
$('#slide-container').width(w * l)
function slider() {
$('.slide:first-child').animate({
marginLeft: -w
}, 'slow', function () {
$(this).appendTo($(this).parent()).css({marginLeft: 0});
});
}
var timer = setInterval(slider, 2000);
$('#slider').hover(function() {
clearInterval(timer);
},function() {
timer = setInterval(slider, 2000);
});
});
</script>
</head>
<body background="../background2.png">
<h1 style="text-align:center; margin-top:60px; color:#fff; fb f font-size:60px">Slider</h1>
<div id="slider">
<div id="slide-container">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
<div class="slide">Slide 4</div>
<div class="slide">Slide 5</div>
<div class="slide">Slide 6</div>
</div>
</div>
</body>
</html>
这是制作滑块的完整代码。
这是线性类型的滑块,可用于显示产品或其所有类别。
如何使此Slider自适应?
更新css。
从幻灯片类中取出绝对高度值并添加width: 100%
想要取出高度的原因是,这样就没有固定的高度,而在调整大小或在较小的设备上时,这会成为问题。
在滑块ID中
#slider {
width: 100%;//add this
}
这将使您所有的幻灯片垂直对齐并响应。
这是您应该尝试执行的操作。
#slider {
width: 100%;
margin: auto;
overflow: hidden;
background: #CCC;
}
.slide {
width: 100%:
height: 350px;
float: left;
text-align: center;
border: 1PX SOLID #000;
line-height: 8em;
font-size: 40px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.