如何使用 CSS 创建一个滑块？

Question

我已经为我的网页下载了一个主题，其中有一个滑块。但滑块不工作。我尝试使用 bootstrap 创建幻灯片。但是当我用这个 html 引用 bootstrap.css 时，风格就会中断。如何使用此代码和 CSS?

创建幻灯片放映

我不想使用 javascript onclick 这样的事件。我还是个学习者。

这是我的 HTML 幻灯片放映块代码。

<ul class="home-slider slick-initialized slick-slider">

        <div style="opacity: 1; width: 9515px;">


            <li class="slick-slide"  style="width: 1903px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 750ms ease;">

                <div class="image-caption"> <img class="desktop-img" src="images/slider-1.jpg"> </div>

                         </li>
             <li class="slick-slide"  style="width: 1903px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 750ms ease;">

                <div class="image-caption"> <img class="desktop-img" src="images/slider-2.jpg"> </div>

                         </li>
            <li class="slick-slide"  style="width: 1903px; position: relative; left: -7612px;; top: 0px; z-index: 999; opacity: 1; transition: opacity 750ms ease;">

                <div class="image-caption"> <img class="desktop-img" src="images/slider-3.jpg"> </div>

                         </li>

        </div>  
        <ul class="slick-dots" style="display: block;" role="tablist">  
            <li><button type="button"  tabindex="0">1</button></li> 
            <li><button type="button" tabindex="0">2</button></li>  
            <li><button type="button"  tabindex="0">3</button></li>

        </ul>

</ul>

这是 css。

.home-slider {position: relative;}
.home-slider {width: 100%;float: left;padding: 0px;margin: 0px;}
.home-slider li.slick-slide {width: 100%;float: left;position: relative;}

.home-slider ul.slick-dots {bottom: 32px;margin: 0px;width: auto;float: right;right: 0px;padding-right: 52px;}
.home-slider ul.slick-dots li {margin: 0 8px;}
.home-slider ul.slick-dots li button {width: 25px;height: 25px;display: inline-block;border: 5px solid #fff;border-radius: 50%;background: #fff;}
.home-slider ul.slick-dots button:before {display: none;}
.home-slider ul.slick-dots li.slick-active button {border-color: #f5be18;background: transparent;}
.home-slider ul.slick-dots li button {width: 15px;height: 15px;}
.home-slider ul.slick-dots {bottom: 10px;}
.slick-slide {float: left;height: 100%;min-height: 1px;display: none;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);-o-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

这是我 html

中的样式表参考

<link type="text/css" href="css/ModuleStyleSheets.css" rel="stylesheet">
<link rel="stylesheet" href="css/foundation.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/Box.css" type="text/css" media="screen">

Answer 1

css 文件遵循层次结构，因此您需要按优先顺序调用文件，从 "least important" 到 "most important"，如果 bootstrap文件冲突，改变调用顺序即可，即：

风格bootstrap

style slick-slider

最重要的是您的主站点样式（main.css、style.css）必须是最后导入到代码中的文件。

Answer 2

为什么不使用原来的 Slick 滑块。您将需要修改您的标记，并添加一些 css 和 js 链接。检查我的片段：

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//kenwheeler.github.io/slick/slick/slick-theme.css"/>
<div class="home-slider">
  <div class="image-caption">
    <img class="desktop-img" src="http://kenwheeler.github.io/slick/img/fonz1.png">
  </div>
  <div class="image-caption">
    <img class="desktop-img" src="http://kenwheeler.github.io/slick/img/fonz2.png">
  </div>
  <div class="image-caption">
    <img class="desktop-img" src="http://kenwheeler.github.io/slick/img/fonz3.png">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
  $(document).ready(function() {
    $('.home-slider').slick({
      dots : true,
      arrows : false
    });
  });
</script>

一些注意事项：

阅读documentation，您可以根据需要调整滑块
根据您的需要修改 slick-theme.css（确保您下载该文件）按照您想要的方式修改它（我包含了链接的文件只是为了让代码段起作用）

如何使用 CSS 创建一个滑块？

How to use CSS to create a slider?

html

javascript

css

slider

slideshow