slick 插件使用

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

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

  1. <div class="mxfDiv " id="corporation_content" >
  2.                                 <div class="partnerPic ">
  3.                                 ***第一张图片***
  4.                                         <div class="slick">
  5.                                             <ul>
  6.                                                 <li>
  7.                                                     <a href="" target="_blank">
  8.                                                         <img src="./images/partner_images/byys.png" alt="">
  9.                                                     </a>
  10.                                                 </li>
  12.                                                 <li>
  13.                                                     <a href="" target="_blank">
  14.                                                         <img src="./images/partner_images/chinaenergy.png" alt="">
  15.                                                     </a>
  16.                                                 </li>
  18.                                             </ul>
  19.                                         </div>
  20.                                 ***第二张图片***
  21.                                         <div class="slick">
  22.                                             <ul>
  23.                                                 <li>
  24.                                                     <a href="" target="_blank">
  25.                                                          <img src="./images/partner_images/chinaoil.png" alt="">
  26.                                                     </a>
  27.                                                 </li>
  28.                                                 <li>
  29.                                                     <a href="" target="_blank">
  30.                                                         <img src="./images/partner_images/chinatower.png" alt="">
  31.                                                     </a>
  32.                                                 </li>
  33.                                             </ul>
  35.                                         </div>
  36.                                     ***第三张图片***
  37.                                         <div class="slick">
  38.                                             <ul>
  39.                                                 <li>
  40.                                                     <a href="" target="_blank">
  41.                                                         <img src="./images/partner_images/goldltd.png" alt="">
  42.                                                     </a>
  43.                                                 </li>
  44.                                                 <li>
  45.                                                     <a href="" target="_blank">
  46.                                                         <img src="./images/partner_images/soltlake.png" alt="">
  47.                                                     </a>
  48.                                                 </li>
  49.                                             </ul>
  50.                                         </div>
  51.                                         ***第四张图片***
  52.                                         <div class="slick">
  53.                                             <ul>
  54.                                                 <li>
  55.                                                     <a href="" target="_blank"><img src="./images/partner_images/westmine.png" alt=""></a>
  56.                                                 </li>
  57.                                                 <li>
  58.                                                     <a href="" target="_blank">
  59.                                                         <img src="./images/partner_images/wukuang.png" alt="">
  60.                                                     </a>
  61.                                                 </li>
  62.                                             </ul>
  63.                                         </div>
  64.                                         ***第五张图片***
  65.                                         <div class="slick">
  66.                                             <ul>
  67.                                                 <li>
  68.                                                     <a href="" target="_blank">
  69.                                                         <img src="./images/partner_images/xingjiangenergy.png" alt="">
  70.                                                     </a>
  71.                                                 </li>
  73.                                                 <li>
  74.                                                     <a href="" target="_blank">
  75.                                                         <img src="./images/partner_images/zhengwei.png" alt="">
  76.                                                     </a>
  77.                                                 </li>
  78.                                             </ul>
  79.                                         </div>
  82.                                         </div>
  83.                                 </div>
  84.                             </div>

mxfDiv、partnerPic的css样式 :

  1. .mxfDiv{
  2.     padding: 0 12px 15px 0;
  3.     background: url(../images/nimg1129Bg.jpg) left bottom no-repeat;
  4.     background-size: 100% 100%;
  5. }
  7. .newMxDiv{
  9.     padding: 0 !important;
  10.     background: none!important;
  11. }
  14. .partnerPic{
  15.     background: #f7f7f7;
  16.     padding: 35px 30px 40px;
  17. }
  19. .newPartnerPic{
  20.     padding: 25px 10px 50px !important;
  21.     background: #f7f7f7 !important;
  22. }

还需要设置如下重新设计slick-prev 和slick-next的样式

  1. .slick-prev{
  2.     position: absolute;
  3.     left: -375px;
  4.     top: 185px;
  5.     display: block;
  6.     z-index: 3;
  7.     width: 80px;
  8.     height: 40px;
  9.     border: #898989 solid 1px;
  10.     background: url(../images/nimg7_left.jpg) center no-repeat;
  11. }
  14.  .newSlick-prev{
  15.     position: absolute !important;
  16.     left: 50% !important;
  17.     margin-left: -65px !important;
  18.     top: auto !important;
  19.     bottom: 15px !important;
  20.     width: 60px !important;
  21.     height: 30px !important;
  22.     z-index: 3 !important;
  23.     border: #898989 solid 1px !important;
  24.     background: url(../images/nimg7_left.jpg) center no-repeat !important;
  25. }
  26. .partnerPic .slick-next{
  27.     position: absolute;
  28.     left: -294px;
  29.     top: 185px;
  30.     display: block;
  31.     z-index: 3;
  32.     width: 80px;
  33.     height: 40px;
  34.     border: #898989 solid 1px;
  35.     background: url(../images/nimg7_right.jpg) center no-repeat;
  36. }
  37. .newSlick-next{
  38.     position: absolute !important;
  39.     left: auto !important;
  40.     right: 50% !important;
  41.     margin-right: -65px !important;
  42.     top: auto !important;
  43.     bottom: 15px !important;
  44.     width: 60px !important;
  45.     height: 30px!important;
  47.     border: #898989 solid 1px !important;
  48.     background: url(../images/nimg7_right.jpg) center no-repeat !important;
  49. }
  51. 通过chrome调试，按f12来观察elements后，原来的代码会自动增加四个标签，这两个标签就是就是上一个和下一个按钮。
  53. <div class="mxfDiv" id="corporation_content">
  54.             <div class="partnerPic  slick-initialized slick-slider">
  55.                 ***<a href="javascript:;" class="slick-prev slick-arrow" style="display: block;"></a>***
  56.                     ****<div aria-live="polite" class="slick-list draggable">****
  57.                         ***<div class="slick-track" style="opacity: 1; width: 3960px; left: -1056px;" role="listbox">***
  58.                             <div class="slick slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" tabindex="-1" style="width: 174px;">
  59.                                             <ul>
  60.                                                 <li>
  61.                                                     <a href="" target="_blank" tabindex="-1"><img src="./images/partner_images/westmine.png" alt=""></a>
  62.                                                 </li>
  63.                                                 <li>
  64.                                                     <a href="" target="_blank" tabindex="-1">
  65.                                                         <img src="./images/partner_images/wukuang.png" alt="">
  66.                                                     </a>
  67.                                                 </li>
  68.                                             </ul>
  69.                                         </div>
  70.                                         <div class="slick slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" tabindex="-1" style="width: 174px;">
  71.                                             <ul>
  72.                                                 <li>
  73.                                                     <a href="" target="_blank" tabindex="-1">
  74.                                                         <img src="./images/partner_images/xingjiangenergy.png" alt="">
  75.                                                     </a>
  76.                                                 </li>
  78.                                                 <li>
  79.                                                     <a href="" target="_blank" tabindex="-1">
  80.                                                         <img src="./images/partner_images/zhengwei.png" alt="">
  81.                                                     </a>
  82.                                                 </li>
  83.                                             </ul>
  84.                                         </div>
  85.                                         <div class="slick slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1" style="width: 174px;">
  86.                                             <ul>
  87.                                                 <li>
  88.                                                     <a href="" target="_blank" tabindex="-1">
  89.                                                         <img src="./images/partner_images/zhongxinguoan.png" alt="">
  90.                                                     </a>
  91.                                                 </li>
  92.                                                 <li>
  93.                                                     <a href="" target="_blank" tabindex="-1">
  94.                                                         <img src="./images/partner_images/zhongguotielu.png" alt="">
  95.                                                     </a>
  96.                                                 </li>
  98.                                             </ul>
  99.                                         </div><div class="slick slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1" style="width: 174px;">
  100.                                             <ul>
  102.                                                 <li>
  103.                                                     <a href="" target="_blank" tabindex="-1">
  104.                                                         <img src="./images/partner_images/zijinkuangye.png" alt="">
  105.                                                     </a>
  106.                                                 </li>
  108.                                                 <li>
  109.                                                     <a href="" target="_blank" tabindex="-1">
  110.                                                         <img src="" alt="">
  111.                                                     </a>
  112.                                                 </li>
  113.                                             </ul>
  115.                                         </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;">
  116.                                             <ul>
  117.                                                 <li>
  118.                                                     <a href="" target="_blank" tabindex="0">
  119.                                                         <img src="./images/partner_images/byys.png" alt="">
  120.                                                     </a>
  121.                                                 </li>
  123.                                                 <li>
  124.                                                     <a href="" target="_blank" tabindex="0">
  125.                                                         <img src="./images/partner_images/chinaenergy.png" alt="">
  126.                                                     </a>
  127.                                                 </li>
  129.                                             </ul>
  130.                                         </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;">
  131.                                             <ul>
  132.                                                 <li>
  133.                                                     <a href="" target="_blank" tabindex="0">
  134.                                                          <img src="./images/partner_images/chinaoil.png" alt="">
  135.                                                     </a>
  136.                                                 </li>
  137.                                                 <li>
  138.                                                     <a href="" target="_blank" tabindex="0">
  139.                                                         <img src="./images/partner_images/chinatower.png" alt="">
  140.                                                     </a>
  141.                                                 </li>
  142.                                             </ul>
  144.                                         </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;">
  145.                                             <ul>
  146.                                                 <li>
  147.                                                     <a href="" target="_blank" tabindex="0">
  148.                                                         <img src="./images/partner_images/goldltd.png" alt="">
  149.                                                     </a>
  150.                                                 </li>
  151.                                                 <li>
  152.                                                     <a href="" target="_blank" tabindex="0">
  153.                                                         <img src="./images/partner_images/soltlake.png" alt="">
  154.                                                     </a>
  155.                                                 </li>
  156.                                             </ul>
  157.                                         </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;">
  158.                                             <ul>
  159.                                                 <li>
  160.                                                     <a href="" target="_blank" tabindex="0"><img src="./images/partner_images/westmine.png" alt=""></a>
  161.                                                 </li>
  162.                                                 <li>
  163.                                                     <a href="" target="_blank" tabindex="0">
  164.                                                         <img src="./images/partner_images/wukuang.png" alt="">
  165.                                                     </a>
  166.                                                 </li>
  167.                                             </ul>
  168.                                         </div><div class="slick slick-slide" data-slick-index="4" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 174px;">
  169.                                             <ul>
  170.                                                 <li>
  171.                                                     <a href="" target="_blank" tabindex="-1">
  172.                                                         <img src="./images/partner_images/xingjiangenergy.png" alt="">
  173.                                                     </a>
  174.                                                 </li>
  176.                                                 <li>
  177.                                                     <a href="" target="_blank" tabindex="-1">
  178.                                                         <img src="./images/partner_images/zhengwei.png" alt="">
  179.                                                     </a>
  180.                                                 </li>
  181.                                             </ul>
  182.                                         </div><div class="slick slick-slide" data-slick-index="5" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide05" style="width: 174px;">
  183.                                             <ul>
  184.                                                 <li>
  185.                                                     <a href="" target="_blank" tabindex="-1">
  186.                                                         <img src="./images/partner_images/zhongxinguoan.png" alt="">
  187.                                                     </a>
  188.                                                 </li>
  189.                                                 <li>
  190.                                                     <a href="" target="_blank" tabindex="-1">
  191.                                                         <img src="./images/partner_images/zhongguotielu.png" alt="">
  192.                                                     </a>
  193.                                                 </li>
  194.                                             </ul>
  195.                                         </div>
  196.                                         <div class="slick slick-slide" data-slick-index="6" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide06" style="width: 174px;">
  197.                                             <ul>
  199.                                                 <li>
  200.                                                     <a href="" target="_blank" tabindex="-1">
  201.                                                         <img src="./images/partner_images/zijinkuangye.png" alt="">
  202.                                                     </a>
  203.                                                 </li>
  205.                                                 <li>
  206.                                                     <a href="" target="_blank" tabindex="-1">
  207.                                                         <img src="" alt="">
  208.                                                     </a>
  209.                                                 </li>
  210.                                             </ul>
  212.                                         </div><div class="slick slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" tabindex="-1" style="width: 174px;">
  213.                                             <ul>
  214.                                                 <li>
  215.                                                     <a href="" target="_blank" tabindex="-1">
  216.                                                         <img src="./images/partner_images/byys.png" alt="">
  217.                                                     </a>
  218.                                                 </li>
  220.                                                 <li>
  221.                                                     <a href="" target="_blank" tabindex="-1">
  222.                                                         <img src="./images/partner_images/chinaenergy.png" alt="">
  223.                                                     </a>
  224.                                                 </li>
  226.                                             </ul>
  227.                                         </div><div class="slick slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" tabindex="-1" style="width: 174px;">
  228.                                             <ul>
  229.                                                 <li>
  230.                                                     <a href="" target="_blank" tabindex="-1">
  231.                                                          <img src="./images/partner_images/chinaoil.png" alt="">
  232.                                                     </a>
  233.                                                 </li>
  234.                                                 <li>
  235.                                                     <a href="" target="_blank" tabindex="-1">
  236.                                                         <img src="./images/partner_images/chinatower.png" alt="">
  237.                                                     </a>
  238.                                                 </li>
  239.                                             </ul>
  241.                                         </div><div class="slick slick-slide slick-cloned" data-slick-index="9" aria-hidden="true" tabindex="-1" style="width: 174px;">
  242.                                             <ul>
  243.                                                 <li>
  244.                                                     <a href="" target="_blank" tabindex="-1">
  245.                                                         <img src="./images/partner_images/goldltd.png" alt="">
  246.                                                     </a>
  247.                                                 </li>
  248.                                                 <li>
  249.                                                     <a href="" target="_blank" tabindex="-1">
  250.                                                         <img src="./images/partner_images/soltlake.png" alt="">
  251.                                                     </a>
  252.                                                 </li>
  253.                                             </ul>
  254.                                         </div><div class="slick slick-slide slick-cloned" data-slick-index="10" aria-hidden="true" tabindex="-1" style="width: 174px;">
  255.                                             <ul>
  256.                                                 <li>
  257.                                                     <a href="" target="_blank" tabindex="-1"><img src="./images/partner_images/westmine.png" alt=""></a>
  258.                                                 </li>
  259.                                                 <li>
  260.                                                     <a href="" target="_blank" tabindex="-1">
  261.                                                         <img src="./images/partner_images/wukuang.png" alt="">
  262.                                                     </a>
  263.                                                 </li>
  264.                                             </ul>
  265.                                         </div>
  266.                                         </div>
  267.                                         </div>
  268.                                 <a href="javascript:;" class="slick-next slick-arrow" style="display: block;"></a></div>
  269.                             </div>

此外由于此处的布局比较复杂，且要求充满整个屏幕，因此我们要求不适用container，所以得自己根据情况而添加响应式js代码和样式，上述样式中，newXXX都是新的响应形式，在此处，我们也需要编写代码，此外为了能让箭头正常工作，我们需要按照说明编写slick对应的js代码

  1. $('.partnerPic').slick({
  2.     dots: false,      //不需要轮播图底下的点
  3.     infinite: true,   //可无限循环按
  4.     autoplay: false,  //关闭自动播放
  5.     arrows: true,     //
  6.     speed: 500,    
  7.     slidesToShow: 4,  //在框里面显示四个子标签
  8.     slidesToScroll: 1,//每次按钮移动一个位置
  9.     responsive: [     //响应式布局后所采用的显示方式
  10.         {
  11.             breakpoint: 1004,
  12.             settings: {
  13.                 dots: false,
  14.                 slidesToShow: 2,//在框里面显示2个子标签
  15.                 slidesToScroll: 1// 每次滑动一个位置
  16.             }
  17.         }
  18.     ]
  19. });
  21. function myResize(screne_length) {
  22.     if(screne_length<1250){
  24.         $(".indexPart5").addClass("newIndexPart5");
  25.         //corporation_object.addClass("newIndexPart5");
  26.         $(".wal").addClass("newWal");
  27.         //wal_object.addClass("newWal");
  28.         $(".bigBox").addClass("newBigBox");
  29.         //bigBox_object.addClass("newBigBox");
  30.         $(".indexTitle").addClass("newIndexTitle");
  31.         //indexTitle_object.addClass("newIndexTitle");
  32.         $(".title1").addClass("newTitle1");
  33.         //title1_object.add("newTitle1");
  34.         $(".title2").addClass("newTitle2");
  35.         //title2_object.addClass("newTitle2");
  36.         $(".mxfDiv").addClass("newMxDiv");
  37.         //mxDiv_object.addClass("newMxDiv");
  39.         $(".partnerPic").addClass("newPartnerPic");
  40.         // partnerPic_object.addClass("newPartnerPic");
  41.         $(".slick-prev").addClass("newSlick-prev");
  42.         //slick_prev_object.addClass("newSlick-prev");
  43.         $(".slick-next").addClass("newSlick-next");
  44.         //slick_next_object.addClass("newSlick-next");
  45.     }else{
  46.         /*corporation_object.removeClass("newIndexPart5");
  47.         wal_object.removeClass("newWal");
  48.         bigBox_object.removeClass("newBigBox");
  49.         indexTitle_object.removeClass("newIndexTitle");
  50.         title1_object.removeClass("newTitle1");
  51.         title2_object.removeClass("newTitle2");
  52.         mxDiv_object.removeClass("newMxDiv");
  54.         partnerPic_object.removeClass("newPartnerPic");
  55.         slick_prev_object.removeClass("newSlick-prev");
  56.         slick_next_object.removeClass("newSlick-next");*/
  58.         $(".indexPart5").removeClass("newIndexPart5");
  59.         //corporation_object.addClass("newIndexPart5");
  60.         $(".wal").removeClass("newWal");
  61.         //wal_object.addClass("newWal");
  62.         $(".bigBox").removeClass("newBigBox");
  63.         //bigBox_object.addClass("newBigBox");
  64.         $(".indexTitle").removeClass("newIndexTitle");
  65.         //indexTitle_object.addClass("newIndexTitle");
  66.         $(".title1").removeClass("newTitle1");
  67.         //title1_object.add("newTitle1");
  68.         $(".title2").removeClass("newTitle2");
  69.         //title2_object.addClass("newTitle2");
  70.         $(".mxfDiv").removeClass("newMxDiv");
  71.         //mxDiv_object.addClass("newMxDiv");
  73.         $(".partnerPic").removeClass("newPartnerPic");
  74.         // partnerPic_object.addClass("newPartnerPic");
  75.         $(".slick-prev").removeClass("newSlick-prev");
  76.         //slick_prev_object.addClass("newSlick-prev");
  77.         $(".slick-next").removeClass("newSlick-next");
  78.         //slick_next_object.addClass("newSlick-next");
  80.     }
  81. }
  85. window.onresize=function (ev) {
  86.     var screneLength = window.innerWidth;
  88.     myResize(screneLength);
  89. };

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

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

发表评论

表情：
评论列表 （有 0 条评论，95人围观）

还没有评论，来说两句吧...

相关阅读

    相关 slick 插件使用

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

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 96 阅读