欢迎拨打空谷咨询电话

4006-515-848

您也可以咨询我们的在线客服或预约上门

在线客服 预约上门

预约上门

关于响应式幻灯片插件SLICK使用注意事项

2018-02-28来源:admin浏览:266 字号:

最近小伙伴们在使用响应式幻灯片插件SLICK的时候经常调用slick插件却没有出来想要的效果?点击没反应?大图和缩略图对应不上?各种样式莫名奇妙的错乱,加载不完全。

下面我总结一点slick的最正确的姿势:

1、常见的正确姿势:

响应式

关于js的调用的就不说了,参见官方给的示例,也就是这样




需要的提一点的是,如果同页面内有多个切换,即使所需要的效果一模一样,也需要在切换的框架上加上不同类名,多次调用js。


关于样式部分,注意例子里的div标签,有时候我们可能需要修改div的样式,然后会给div写一个class或者id来识别,但是在调用插件的时候需要注意一下,不是所有的插件都可以直接在div上加class或者id就行的,就像这个slick插件,如果需要修改div样式,一定要在div标签对里面加一层div,再修改里面的div。也就是下面的姿势

响应式网站设计 帮助您的网站实现跨平台


绿色框内的div无需添加类名,即使添加了也不要做margin、padding等样式。红色框内的div可以加类名做各种balabala样式。注意不能单独对左边或者右边做padding 或者margin(而是 margin:0 20px; 或者width:90%;margin:auto;)。至于每个切换内部的样式当然就可以随意做啦

2、可能遇到的问题:

在ie低版本中,当tab切换的内容中存在slick的调用时,幻灯片的样式会发生严重的错乱。


错乱原因:都是display:none 惹的祸 。tab切换的一般用法是通过jquery的hide()和show()实现的,不显示的内容会被改变为display:none;,一旦siick的父级元素存在display:none;的属性时,slick.js对幻灯的内容加载就会产生错误(slick,js的加载是动态的)


解决方法:如需使用slick,摒弃hide()和show()的使用,对于tab 不现实部分的高度设置为“0”,超出隐藏掉,显示部分的高度设置为“auto”。好了,你会发现slick又完好如初了。


先不要太高兴,slick 是好了,但是你会发现overflow:hidden属性在ie7中失效了,样式又乱了。不要着急,这是因为ie7中子元素存在定位的话,overflow属性就会失效(万恶的ie6\7\8),这时只需要在设置overflow:hidden的标签的父级标签上添加属性(position:relative;overflow:hidden;)


好了,silck使用的注意点大致如上,发现其他奇葩问题我会再做补充。纵使你发现slick使用时会有万般bug(其实很少的),也不影响它是为一个牛逼的、牛逼的、牛逼的幻灯片插件,祝各位小伙伴用的开心。


266次点赞
返回新闻列表
关注微信公众号

关注微信公众号

关注新浪微博

关注新浪微博


咨询热线

4006-515-848
© 2008-2017 苏州空谷网络科技有限公司 版权所有 苏ICP备10077873号