光滑的滑块箭头看不到正确

Question

我知道在堆栈溢出中还有其他类似的问题，但似乎没有一个可以解决我的问题。我认为光滑的滑块默认会有箭头。我的目标是我的 CSS 中的箭头，并使右侧箭头（下一个）可以正常工作，但左箭头我几乎看不到并且隐藏在 div 后面。没有边距修正正在移动箭头。另外，如何在 div 之间添加颜色，使每个 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/

Answer 1

为了使您的示例正常工作，您需要确保在 bootstrap.js 和 slick.js 之前引用了 jquery.min.js

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

另外，将您的 .container div 重命名为 .content 并添加以下 css 以希望解决您的箭头问题：

.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>