slick 插件使用

不念不忘少年蓝@ 2023-06-17 15:57 9阅读 0赞

这两天一直在做公司的门户网站，遇到了一个问题，公司领导的要求是让我将合作伙伴部分做成如下幻灯片播放的这种效果，我再网上查询了很多资料，最后发现bootstrap+slick插件可以完美的解决这个问题。  
首先贴出html源代码

<div class="mxfDiv " id="corporation_content" >
    								<div class="partnerPic ">
    								***第一张图片***
    										<div class="slick">
    											<ul>
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/byys.png" alt="">
    													</a>
    												</li>
    												
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/chinaenergy.png" alt="">
    													</a>
    												</li>
    												
    											</ul>
    										</div>
    								***第二张图片***
    										<div class="slick">
    											<ul>
    												<li>
    													<a href="" target="_blank">
    													 	<img src="./images/partner_images/chinaoil.png" alt="">
    													</a>
    												</li>
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/chinatower.png" alt="">
    													</a>
    												</li>
    											</ul>
    
    										</div>
    									***第三张图片***
    										<div class="slick">
    											<ul>
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/goldltd.png" alt="">
    													</a>
    												</li>
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/soltlake.png" alt="">
    													</a>
    												</li>
    											</ul>
    										</div>
    										***第四张图片***
    										<div class="slick">
    											<ul>
    												<li>
    													<a href="" target="_blank"><img src="./images/partner_images/westmine.png" alt=""></a>
    												</li>
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/wukuang.png" alt="">
    													</a>
    												</li>
    											</ul>
    										</div>
    										***第五张图片***
    										<div class="slick">
    											<ul>
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/xingjiangenergy.png" alt="">
    													</a>
    												</li>
    
    												<li>
    													<a href="" target="_blank">
    														<img src="./images/partner_images/zhengwei.png" alt="">
    													</a>
    												</li>
    											</ul>
    										</div>
    
    									
    										</div>
    								</div>
    							</div>

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);
    };

最后展示下下成果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 3]  
到此，问题是终于解决了，感谢所有的朋友，也感谢我自己付出的努努力，同时在此声明，上述博文所设计的商标无个人牟利现象，只用来学习和交流！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019112918132875.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019112918143629.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129181516113.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191129181453373.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZXNoYW5mZWl0aWFu,size_16,color_FFFFFF,t_70