我正在使用Slider Slicker carousel,其中图像的carousel沿着视口的底部显示,从carousel中选择的活动图像显示在其上方。
我想整个项目,以适应视口,使我不必向上或向下滚动查看任何内容。这将在不同大小的屏幕上查看,所以我想它动态缩放。如果我改变'slidesToShow:#,'在JavaScript中低于旋转木马中的图像的高度改变,因此活动图像应该放大或缩小以填充视口中剩余的可用空间。
SlidesToShow = 3的
SlidesToShow = 7的
<html>
<head>
<title>4161-15_WI</title>
<link rel="stylesheet" type="text/css" href="css/slick.css" />
<link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="css/xtest.css" />
<style>
html, body {
background-color: #7b6e6d;
margin: 5px;
height: 100%;
}
.top {
height: auto;
background: #c0c0c0;
}
.bottom {
height: auto;
}
.carousel {
height: auto;
}
.slick-slide {
margin: auto;
}
.slick-slide img {
width: 100%;
border: 3px solid #7b6e6d;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: black;
}
</style>
</head>
<body>
<div class="slider-for">
<object type="image/svg+xml" data="images/1.svg"></object>
<object type="image/svg+xml" data="images/2.svg"></object>
<object type="image/svg+xml" data="images/3.svg"></object>
<object type="image/svg+xml" data="images/4.svg"></object>
<object type="image/svg+xml" data="images/5.svg"></object>
<object type="image/svg+xml" data="images/6.svg"></object>
<object type="image/svg+xml" data="images/7.svg"></object>
<object type="image/svg+xml" data="images/8.svg"></object>
<object type="image/svg+xml" data="images/9.svg"></object>
<object type="image/svg+xml" data="images/10.svg"></object>
</div>
<div class="slider-nav">
<div class="carousel"><img src="images/1.svg"></></div>
<div class="carousel"><img src="images/2.svg"></></div>
<div class="carousel"><img src="images/3.svg"></></div>
<div class="carousel"><img src="images/4.svg"></></div>
<div class="carousel"><img src="images/5.svg"></></div>
<div class="carousel"><img src="images/6.svg"></></div>
<div class="carousel"><img src="images/7.svg"></></div>
<div class="carousel"><img src="images/8.svg"></></div>
<div class="carousel"><img src="images/9.svg"></></div>
<div class="carousel"><img src="images/10.svg"></></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.js"></script>
<script type="text/javascript" src="scriptSync.js"></script>
</body>
</html>
个字符
我试过使用flex box和另一个用户在Stackoverflow.https://codepen.io/calsal/pen/bGdgyBX上发布的代码
当我试图插入图像来代替文本div时,图像会在视口外缩放。
1条答案
按热度按时间zpqajqem1#
考虑让
<body>
元素是一个垂直的flex布局,其高度填满屏幕(减去垂直边距):字符串
然后让活动图像滑动滑块填充导航滑块后剩余的垂直空间,或者如果它占用太多垂直空间,则缩小它:
型
让活动图像滑块的内部光滑元素也遵守此高度:
型
x
的一个字符串