我想在www.cssslider.com上购买cssSlider的许可证,但是我需要先使它工作。
我想要一个灵敏的全 Angular 滑块。随着浏览器窗口宽度的减小,我想首先保持滑块高度不变(因此将仅剪切滑块图像的侧面)。在某个断点之后(当浏览器窗口的宽度与我网站上的内容包装器的宽度相同)时,只有这样,我才希望滑块在垂直方向上也变小。这样,在较小的设备上,滑块将不会变得很薄。我希望我能很好地解释自己。
我设法在自己的网站上使用单个图像作为背景,使用宽度为1120 x 500的透明.gif:
https://www.easterisland.travel/
我知道使用cssSlider是可能的,因为他们在其第一页顶部滑块(http://cssslider.com/)中具有此功能,但是没有选择用cssSlider可执行程序来选择它。
有什么线索吗?谢谢!
最佳答案
对于较小的屏幕,他们将容器高度设置为在媒体查询中自动显示。然后,它们似乎会根据屏幕宽度转换不同的图像。因此,它看起来像“响应图像”。
响应式图像可能很复杂,具体取决于您是否关心IE,服务器配置以及是否了解php或javascript等。这是一些信息:https://css-tricks.com/which-responsive-images-solution-should-you-use/
替代解决方案:您可以使用vw和vh的更新的css3单位。
vw和vh是视口(viewport)的百分比。浏览器对此的支持将大致与对css3滑块的支持相等,因此您应该没事!
尝试替换其媒体查询,如下所示:
@media only screen and (max-width: 800px) {
.csslider1, .csslider1 > ul {
height: 75vh; max-height:450px;
}
}