我想在www.cssslider.com上购买cssSlider的许可证,但是我需要先让它工作.
我想要一个响应全角的滑块.当浏览器窗口的宽度减小时,我想首先保持滑块的高度完整(因此,只有滑块图像的两侧将被剪切).经过一定的断点(当浏览器窗口的宽度与我网站上的内容包装器的宽度相同)时,只有这样,我希望滑块越来越小.这样一来,滑块在较小的装置上就不会变得太细了.我希望我能很好地解释自己.
我设法在我的网站上使用单个图像作为背景,使用宽度为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是视口的百分比.浏览器的支持大致相当于对css3滑块的支持,所以你应该可以!
尝试替换他们的媒体查询,如下所示:
@media only screen and (max-width: 800px) { .csslider1,.csslider1 > ul { height: 75vh; max-height:450px; } }