滑動滑塊箭頭看不到正確

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>