slick 插件使用

最新推荐文章于 2024-01-03 17:02:47 发布
最新推荐文章于 2024-01-03 17:02:47 发布
阅读量3.8k 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xueshanfeitian/article/details/103314180
版权

这两天一直在做公司的门户网站，遇到了一个问题，公司领导的要求是让我将合作伙伴部分做成如下幻灯片播放的这种效果，我再网上查询了很多资料，最后发现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后，原来的代码会自动增加四个标签，这两个标签就是就是上一个和下一个按钮。

   <div class="mxfDiv" id="corporation_content">
			<div class="partnerPic  slick-initialized slick-slider">
				***<a href="javascript:;" class="slick-prev slick-arrow" style="display: block;"></a>***
					****<div aria-live="polite" class="slick-list draggable">****
						***<div class="slick-track" style="opacity: 1; width: 3960px; left: -1056px;" role="listbox">***
							<div class="slick slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1"><img src="./images/partner_images/westmine.png" alt=""></a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/wukuang.png" alt="">
													</a>
												</li>
											</ul>
										</div>
										<div class="slick slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/xingjiangenergy.png" alt="">
													</a>
												</li>

												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zhengwei.png" alt="">
													</a>
												</li>
											</ul>
										</div>
										<div class="slick slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zhongxinguoan.png" alt="">
													</a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zhongguotielu.png" alt="">
													</a>
												</li>

											</ul>
										</div><div class="slick slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>

												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zijinkuangye.png" alt="">
													</a>
												</li>

												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="" alt="">
													</a>
												</li>
											</ul>

										</div><div class="slick slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="0">
														<img src="./images/partner_images/byys.png" alt="">
													</a>
												</li>

												<li>
													<a href="" target="_blank" tabindex="0">
														<img src="./images/partner_images/chinaenergy.png" alt="">
													</a>
												</li>

											</ul>
										</div><div class="slick slick-slide slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="0">
													 	<img src="./images/partner_images/chinaoil.png" alt="">
													</a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="0">
														<img src="./images/partner_images/chinatower.png" alt="">
													</a>
												</li>
											</ul>

										</div><div class="slick slick-slide slick-active" data-slick-index="2" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="0">
														<img src="./images/partner_images/goldltd.png" alt="">
													</a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="0">
														<img src="./images/partner_images/soltlake.png" alt="">
													</a>
												</li>
											</ul>
										</div><div class="slick slick-slide slick-active" data-slick-index="3" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="0"><img src="./images/partner_images/westmine.png" alt=""></a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="0">
														<img src="./images/partner_images/wukuang.png" alt="">
													</a>
												</li>
											</ul>
										</div><div class="slick slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/xingjiangenergy.png" alt="">
													</a>
												</li>

												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zhengwei.png" alt="">
													</a>
												</li>
											</ul>
										</div><div class="slick slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide05" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zhongxinguoan.png" alt="">
													</a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zhongguotielu.png" alt="">
													</a>
												</li>
											</ul>
										</div>
										<div class="slick slick-slide" data-slick-index="6" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide06" style="width: 174px;">
											<ul>

												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/zijinkuangye.png" alt="">
													</a>
												</li>

												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="" alt="">
													</a>
												</li>
											</ul>

										</div><div class="slick slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/byys.png" alt="">
													</a>
												</li>

												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/chinaenergy.png" alt="">
													</a>
												</li>

											</ul>
										</div><div class="slick slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1">
													 	<img src="./images/partner_images/chinaoil.png" alt="">
													</a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/chinatower.png" alt="">
													</a>
												</li>
											</ul>

										</div><div class="slick slick-slide slick-cloned" data-slick-index="9" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/goldltd.png" alt="">
													</a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/soltlake.png" alt="">
													</a>
												</li>
											</ul>
										</div><div class="slick slick-slide slick-cloned" data-slick-index="10" aria-hidden="true" tabindex="-1" style="width: 174px;">
											<ul>
												<li>
													<a href="" target="_blank" tabindex="-1"><img src="./images/partner_images/westmine.png" alt=""></a>
												</li>
												<li>
													<a href="" target="_blank" tabindex="-1">
														<img src="./images/partner_images/wukuang.png" alt="">
													</a>
												</li>
											</ul>
										</div>
										</div>
										</div>
								<a href="javascript:;" class="slick-next slick-arrow" style="display: block;"></a></div>
							</div>

此外由于此处的布局比较复杂，且要求充满整个屏幕，因此我们要求不适用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);
};

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

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

xueshanfeitian
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery幻灯片插件slick实例
04-30
NULL 博文链接：https://bijian1013.iteye.com/blog/2391957
SLICK轮播图插件
06-24
SLICK插件提供了一个简单的API，可以使用`$('.your-carousel-class').slick(options);`来启动轮播图，其中`options`是一个包含各种配置参数的对象。例如，你可以设置自动播放和滑动速度： ```javascript $('.slick-...
在Vue中使用jQuery的slick轮播图插件
gahsuxjxnxn的博客
07-21 638
这样就可以在Vue组件中使用slick轮播图了。需要注意的是slick是一个jQuery插件, 如果要避免直接使用jQuery,可以考虑使用纯Vue的轮播图组件,如vue-awesome-swiper等。
Jquery Slick幻灯片插件
weixin_30279671的博客
07-31 260
slick 是一个基于 jQuery 的幻灯片插件，具有以下特点： 支持响应式 浏览器支持 CSS3 时，则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 支持动态添加、删除、过滤 支持自动播放、圆点、箭头、回调等等 浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。 jQ...
jQuery响应式手机端移动端幻灯片图片切换特效插件slick
随心而动 随刃而行
04-18 3150
使用方法   1、引入文件 link rel="stylesheet" href="style/slick.css"> script src="script/jquery.min.js">script> script src="script/slick.min.js">script> 2、HTML 1 2 3 4 5
slick插件实现子查询
weixin_54518975的博客
07-09 124
slick插件实现子查询
感觉最好用的轮播插件slick slickSlider1.8.zip
05-12
在压缩包文件`slickSlider`中，包含了Slick插件的核心文件和示例代码。开发者可以在这里找到所需的JavaScript和CSS文件，以及如何在自己的项目中集成Slick的示例。通过对这些文件的研究，你可以快速上手并掌握Slick...
slick插件实现jQuery放大缩小淡入淡出焦点图特效
06-09
在本文中，我们将深入探讨如何使用`slick`插件创建一个功能丰富的jQuery焦点图特效，该特效包括图片的放大缩小、淡入淡出以及在移动设备上的触摸支持。`slick`是一个广泛使用的JavaScript滑块库，它提供了丰富的...
jquery插件- slick轮播图插件
06-19
首先，你需要下载Slick插件的最新版本，如`slick-1.8.1`。下载后，将`dist`目录中的`slick.css`和`slick.js`（或`slick.min.js`）文件引入到你的HTML页面中。通常，CSS文件放在`<head>`部分，而JavaScript文件则放在...
基于slick插件的jQuery焦点图特效.zip
07-05
在本文中，我们将深入探讨如何使用基于Slick插件的jQuery焦点图特效，这是一种流行的JavaScript库，用于创建高质量的滑动和过渡动画效果，尤其适用于网站的焦点图或幻灯片展示。Slick插件以其灵活性、可定制性和对...
slick:Scala 语言集成连接工具包。 Slick 是 Scala 的现代数据库查询和访问库
07-23
圆滑的 Slick 是 Scala 的现代数据库查询和访问库。 它使您可以像使用 Scala 集合一样处理存储的数据，同时让您完全控制何时发生数据库访问以及传输哪些数据。 您可以使用 Scala 而不是 SQL 编写数据库查询，从而受益于 Scala 的静态检查、编译时安全性和组合性。 Slick 具有可扩展的查询编译器，可以为不同的后端生成代码。 类型安全查询直接支持以下数据库系统。 这些是具有显式自动化测试的数据库和驱动程序版本。 数据库 JDBC 驱动程序 SQLServer 2008、2012、2014、2017 和 Oracle 11g DB2 10.5 MySQL mysql-connector-java:8.0.16 PostgreSQL PostgreSQL:42.2.5 SQLite sqlite-jdbc:3.27.2.1 德比/JavaDB
mod_slick_carousel_images:Joomla3 中图像的光滑轮播
07-06
mod_slick_carousel_images Joomla3 中图像的光滑轮播
jquery旋转木马插件SLICK
04-23
jquery旋转木马插件SLICK功能非常全演示地址：http://www.jq22.com/jquery-info406
jquery-slick-rails：将jQuery插件Slick轮播集成到Rails应用中
02-05
jQuerySlickRails Ruby宝石，使用Rails资产管道来包含Ken Wheeler（ ）的jQuery Slick插件。 如果您将Rails 6与Webpacker一起使用，则不需要此gem（直接从NPM安装Slick）。 查看以获取更多信息。 安装 将此行添加到您的应用程序的Gemfile中： gem "jquery-slick-rails" 然后执行： $ bundle 或自己安装为： $ gem install jquery-slick-rails 注意：这是一个jQuery插件，因此您还将需要jquery-rails gem（默认从Rails 5.1开
轮播插件Slick.js使用方法详解
weixin_48596030的博客
12-08 1755
相比于Swiper而选择使用Slick.js的原因主要是因为其兼容不错并且在手机端的滑动效果更顺畅。
利用slick插件，左右切换同时控制三个轮播
sinat_38546399的博客
01-25 3864
最近项目需求，需要左右切换同时控制多个轮播，效果大概是这样。 引入：（引入的包有多个版本，有些可能有些问题，可以从API中把包copy下来作为引入文件） &lt;link type="text/css" href="style/web/css/slick.css" rel="stylesheet" /&gt; &lt;script type="text/javascript" src="
插件react-slick封装预览图片组的弹窗
最新发布
weixin_55869175的博客
01-03 760
实现逻辑：在需要查看一组图片的时候，点开其中的某一张图，弹出可查看所有图的轮博弹窗。
jQuery一些插件
weixin_54205389的博客
10-11 660
jQuery插件方法使用
vue-slick 插件配置
AsuraSylar的博客
06-28 1382
autoplay 布尔值 false 自动播放 autoplaySpeed 整数 3000 自动播放间隔 centerMode 布尔值 false 中心模式 centerPadding 字符串 ’50px’ 中心模式左右内边距 cssEase 字符串 ‘ease’ CSS3 动画 customPa...
使用slick插件dots配置
07-28
使用 Slick 插件的 dots 配置是为了指定轮播图中的小圆点样式和位置。以下是一个示例的 dots 配置： ```javascript $('.slider').slick({ dots: true, appendDots: $('.dots-container'), dotsClass: 'custom-dots', customPaging: function(slider, i) { return '<button class="dot"></button>'; } }); ``` 在上述示例中，`dots: true` 表示启用 dots 功能。接下来，`appendDots` 选项指定了 dots 容器的 DOM 元素，这里使用了类名 `.dots-container`。`dotsClass` 选项定义了 dots 容器的 CSS 类名，这里命名为 `custom-dots`。 最后，`customPaging` 选项允许自定义每个小圆点的 HTML 内容和样式。在示例中，使用了一个自定义的按钮元素作为小圆点，并且为其添加了 `.dot` 类名。 你可以根据需要修改这些配置选项来实现你想要的 dots 样式和位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值