如何使用 CSS 创建滑块？

Question

我为我的网页下载了一个主题，其中包含一个滑块。但滑块不起作用。我尝试使用引导程序创建幻灯片。但是当我用这个 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 文件遵循层次结构，因此您需要按优先级调用文件，从“最不重要”到“最重要”，如果引导文件冲突，您已经这样做了，只需更改顺序调用，即：

风格引导

样式平滑滑块

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

Answer 2

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

<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（确保下载该文件）以您想要的方式修改它（我包含链接的只是为了让 sn-p 工作）