光滑的滑块箭头看不清楚

时间：2017-09-26 22:33:45

标签： jquery html css twitter-bootstrap slick-slider

我知道在堆栈溢出中还有其他类似的问题，但似乎没有解决我的问题。我认为光滑的滑块默认会有箭头。我的目标是我的CSS中的箭头，并使右侧箭头（下一个）工作正常，但左箭头我几乎看不到并隐藏在div后面。没有边际修正正在移动箭头。另外，如何在div之间添加颜色，以便每个div看起来都是个性的？我在这里有jsfiddle链接（结果没有正确显示轮播，但它在我当地工作）

我希望旋转木马看起来像这样。 enter image description here

＆＃13;
＆＃13; 
$(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
    ]
  });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

1 个答案:

答案 0 :(得分：1)

要让您的示例正常工作，您需要确保在jquery.min.js和bootstrap.js之前引用slick.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>

相关问题
最新问题