滑动滑块箭头看不到正确

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

对于示例工作，你需要确保jquery.min.js被bootstrap.js和slick.js

前引用了另外为了使每张幻灯片有一个不同的彩色边框你可以创建一个c数组为每个幻灯片边框选择一个随机颜色。只是

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

$(document).ready(function(){ 
 
\t 
 
    //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, 
 
\t \t infinite: true, 
 
\t \t dots: false, 
 
     } 
 
    }, 
 
    { 
 
     breakpoint: 480, 
 
     settings: { 
 
     slidesToShow: 1, 
 
     slidesToScroll: 1, 
 
\t \t infinite: true, 
 
\t  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>