代码之家 › 专栏 › 技术社区 › jsPlayer

滑动箭头看不清楚

slick.js twitter-bootstrap css html jquery

jsPlayer · 技术社区 · 7 年前

我知道在堆栈溢出中还有其他类似的问题,但似乎都无法解决我的问题。我认为slick slider在默认情况下会有箭头。我瞄准了CSS中的箭头,并使右侧箭头(下一个)正常工作,但左侧箭头我几乎看不见,隐藏在div后面。没有边距校正正在移动箭头。此外,如何在分区之间添加颜色,使每个分区看起来都很独立?我在这里有jsfiddle链接(结果不是正确显示旋转木马,但它在我的本地工作)

我希望旋转木马看起来像这样。

$(document).ready(function() {
  $('.providor-slick-slider').slick({
    centerMode: true,
    centerPadding: '20px',
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });
});

body {
  font-family: 'Roboto', sans-serif!important;
}

.sub-head h1 {
  color: #006ac3;
}

.sub-content p {
  color: #7c7f7e;
  margin-top: 15px;
  font-size: 16px;
  margin-bottom: 30px;
}

.doc-content h3 {
  color: #0a5185;
  margin-top: 0px;
  padding-top: 20px;
}

.doc-content {
  background: #f1f1f1;
  padding: 0px 15px 30px 15px;
}

.doc-content ul {
  list-style: none;
}

.doc-content ul li {
  margin-bottom: 20px;
}

.doc-content1 h3 {
  color: #726d7b;
}

.slick-prev:before {
  content: "\f104";
  font-family: FontAwesome;
  color: red;
  font-size: 30px;
}

.slick-next:after {
  content: "\f105";
  font-family: FontAwesome;
  color: red;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="providor-slick-slider">
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/jayelementblue/pymd3nb1/

1 回复 | 直到 7 年前

Master Yoda 7 年前

为了让你的例子发挥作用,你需要确保 jquery.min.js 在之前引用 bootstrap.js 和 slick.js

此外,为了使每张幻灯片具有不同颜色的边框,您可以创建一组颜色,并为每张幻灯片边框从中随机选择一种颜色。

.container div到 .content

.content {
    margin: auto;
    padding: 30px;
}

$(document).ready(function(){
	
  //9 colours for nine panels
  var colourArray = ["red", "orange", "yellow", "green", "blue", "purple", "violet", "aqua", "pink"];
  
  var i = 0;
  
  $(".doc-content").each(function()
  {
    //get the next colour in the array for each panel
    var item = colourArray[i++];
    
    //or you could pick a random colour from the array
    //var item = colourArray[Math.floor(Math.random()*colourArray.length)];
    
    //set css border dynamically
    //$(this).css("border", "3px solid " + item);
    
    //OR set css border to static colour with wider border
    $(this).css("border", "5px solid white");
  });

   $('.providor-slick-slider').slick({
  centerMode: true,
  centerPadding: '20px',
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3,
  cssEase: 'linear',
  arrows: true,
  dots: false,
   responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: false,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
		infinite: true,
		dots: false,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
		infinite: true,
	    dots: false,
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
});

body{font-family: 'Roboto', sans-serif!important;}
.sub-head h1{color:#006ac3;}
.sub-content p{color:#7c7f7e; margin-top:15px; font-size:16px; margin-bottom:30px;}
.doc-content h3{color:#0a5185;     margin-top: 0px; padding-top: 20px;}
.doc-content{background:#f1f1f1;     padding: 0px 15px 30px 15px;}

.doc-content ul{list-style:none;}
.doc-content ul li{margin-bottom:20px;}
.doc-content1 h3{color:#726d7b;}



.slick-prev:before {
 content: "\f104" !important;
 font-family: FontAwesome !important;
 color: white !important;
 background-color: #0a5185 !important;
 padding: 0 6px;
 border-radius: 1px;
 font-weight: bold;
}

.slick-next:before {
   content: "\f105" !important;
 font-family: FontAwesome !important;
 color: white !important;
 background-color: #0a5185 !important;
 padding: 0 6px;
  border-radius: 1px;
   font-weight: bold;
}

.doc-content
{
  margin: 0 7px;
}

.content {
    margin: auto;
    padding: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<body>

  <div class="content">
    <div class="providor-slick-slider">
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

    </div>

  </div>
</body>