slick 插件使用
这两天一直在做公司的门户网站，遇到了一个问题，公司领导的要求是让我将合作伙伴部分做成如下幻灯片播放的这种效果，我再网上查询了很多资料，最后发现bootstrap+slick插件可以完美的解决这个问题。
首先贴出html源代码
***第一张图片***
-
-
***第二张图片***
-
-
***第三张图片***
-
-
***第四张图片***
-
-
***第五张图片***
-
-
mxfDiv、partnerPic的css样式 :
.mxfDiv{
padding: 0 12px 15px 0;
background: url(../images/nimg1129Bg.jpg) left bottom no-repeat;
background-size: 100% 100%;
}
.newMxDiv{
padding: 0 !important;
background: none!important;
}
.partnerPic{
background: #f7f7f7;
padding: 35px 30px 40px;
}
.newPartnerPic{
padding: 25px 10px 50px !important;
background: #f7f7f7 !important;
}
还需要设置如下重新设计slick-prev 和slick-next的样式
.slick-prev{
position: absolute;
left: -375px;
top: 185px;
display: block;
z-index: 3;
width: 80px;
height: 40px;
border: #898989 solid 1px;
background: url(../images/nimg7_left.jpg) center no-repeat;
}
.newSlick-prev{
position: absolute !important;
left: 50% !important;
margin-left: -65px !important;
top: auto !important;
bottom: 15px !important;
width: 60px !important;
height: 30px !important;
z-index: 3 !important;
border: #898989 solid 1px !important;
background: url(../images/nimg7_left.jpg) center no-repeat !important;
}
.partnerPic .slick-next{
position: absolute;
left: -294px;
top: 185px;
display: block;
z-index: 3;
width: 80px;
height: 40px;
border: #898989 solid 1px;
background: url(../images/nimg7_right.jpg) center no-repeat;
}
.newSlick-next{
position: absolute !important;
left: auto !important;
right: 50% !important;
margin-right: -65px !important;
top: auto !important;
bottom: 15px !important;
width: 60px !important;
height: 30px!important;
border: #898989 solid 1px !important;
background: url(../images/nimg7_right.jpg) center no-repeat !important;
}
通过chrome调试，按f12来观察elements后，原来的代码会自动增加四个标签，这两个标签就是就是上一个和下一个按钮。
此外由于此处的布局比较复杂，且要求充满整个屏幕，因此我们要求不适用container，所以得自己根据情况而添加响应式js代码和样式，上述样式中，newXXX都是新的响应形式，在此处，我们也需要编写代码，此外为了能让箭头正常工作，我们需要按照说明编写slick对应的js代码
$('.partnerPic').slick({
dots: false, //不需要轮播图底下的点
infinite: true, //可无限循环按
autoplay: false, //关闭自动播放
arrows: true, //
speed: 500,
slidesToShow: 4, //在框里面显示四个子标签
slidesToScroll: 1,//每次按钮移动一个位置
responsive: [ //响应式布局后所采用的显示方式
{
breakpoint: 1004,
settings: {
dots: false,
slidesToShow: 2,//在框里面显示2个子标签
slidesToScroll: 1// 每次滑动一个位置
}
}
]
});
function myResize(screne_length) {
if(screne_length<1250){
$(".indexPart5").addClass("newIndexPart5");
//corporation_object.addClass("newIndexPart5");
$(".wal").addClass("newWal");
//wal_object.addClass("newWal");
$(".bigBox").addClass("newBigBox");
//bigBox_object.addClass("newBigBox");
$(".indexTitle").addClass("newIndexTitle");
//indexTitle_object.addClass("newIndexTitle");
$(".title1").addClass("newTitle1");
//title1_object.add("newTitle1");
$(".title2").addClass("newTitle2");
//title2_object.addClass("newTitle2");
$(".mxfDiv").addClass("newMxDiv");
//mxDiv_object.addClass("newMxDiv");
$(".partnerPic").addClass("newPartnerPic");
// partnerPic_object.addClass("newPartnerPic");
$(".slick-prev").addClass("newSlick-prev");
//slick_prev_object.addClass("newSlick-prev");
$(".slick-next").addClass("newSlick-next");
//slick_next_object.addClass("newSlick-next");
}else{
/*corporation_object.removeClass("newIndexPart5");
wal_object.removeClass("newWal");
bigBox_object.removeClass("newBigBox");
indexTitle_object.removeClass("newIndexTitle");
title1_object.removeClass("newTitle1");
title2_object.removeClass("newTitle2");
mxDiv_object.removeClass("newMxDiv");
partnerPic_object.removeClass("newPartnerPic");
slick_prev_object.removeClass("newSlick-prev");
slick_next_object.removeClass("newSlick-next");*/
$(".indexPart5").removeClass("newIndexPart5");
//corporation_object.addClass("newIndexPart5");
$(".wal").removeClass("newWal");
//wal_object.addClass("newWal");
$(".bigBox").removeClass("newBigBox");
//bigBox_object.addClass("newBigBox");
$(".indexTitle").removeClass("newIndexTitle");
//indexTitle_object.addClass("newIndexTitle");
$(".title1").removeClass("newTitle1");
//title1_object.add("newTitle1");
$(".title2").removeClass("newTitle2");
//title2_object.addClass("newTitle2");
$(".mxfDiv").removeClass("newMxDiv");
//mxDiv_object.addClass("newMxDiv");
$(".partnerPic").removeClass("newPartnerPic");
// partnerPic_object.addClass("newPartnerPic");
$(".slick-prev").removeClass("newSlick-prev");
//slick_prev_object.addClass("newSlick-prev");
$(".slick-next").removeClass("newSlick-next");
//slick_next_object.addClass("newSlick-next");
}
}
window.onresize=function (ev) {
var screneLength = window.innerWidth;
myResize(screneLength);
};
最后展示下下成果：
到此，问题是终于解决了，感谢所有的朋友，也感谢我自己付出的努努力，同时在此声明，上述博文所设计的商标无个人牟利现象，只用来学习和交流！！！！