为什么我的点在光滑的滑块中是垂直的？

【问题标题】：Why are my dots vertical in slick slider?为什么我的点在光滑的滑块中是垂直的？
【发布时间】：2021-08-06 19:30:14
【问题描述】： 

jQuery(document).ready(function($){
    var $slickElement = $('.slideshow');

    $slickElement.slick({
      autoplay: true,
      dots: true,
    });

});
*{
  outline:none;
}
/* spacer */
.spacer{
  height:150px;
  width:100%;
}
.spacer2{
  height:20px;
  width:100%;
}
/* spacer ends */

/* slider styles */
.sd_master_wrapper{
    position: relative; 
    max-width:900px;
    margin:0 auto;
    padding:0;
    border-radius:10px;
    z-index:9999;
}
.sdtestBg3{
    height: 100%;
    width: 80%;
    background: #fff;
    position: absolute;
    bottom: -40px;
    left: 10%;
    border-radius: 20px;
    box-shadow: 0px 18px 52.8537px rgb(215 228 249 / 50%);
    z-index:1;
}
.sdtestBg2{
    height: 100%;
    width: 90%;
    background: #fff;
    position: absolute;
    bottom: -22px;
    left: 5%;
    border-radius: 20px;
    box-shadow: 0px 18px 52.8537px rgb(215 228 249 / 50%);
    z-index:2;
}

.sd_scroll {
    height: auto;
    max-height: 180px;
    overflow: auto;
}
    
.slideshow {
    position: relative;
    min-height: 300px;
    height: auto;
    background: #fff;
    box-shadow: 0px 18px 52.8537px rgba(215, 228, 249, 0.5);
    border-radius: 20px;
    background-image: url(https://farsighttechnologies.com/wp-content/uploads/2021/03/quote1.png), url(https://farsighttechnologies.com/wp-content/uploads/2021/03/quote.png);
    background-position: top 15px left 15px, bottom 40% right 15px;
    background-repeat: no-repeat;
    background-size: 180px, 180px;
    z-index:3;
}
button.slick-prev.slick-arrow {
    position: absolute;
    z-index: 9999;
    bottom: -80px;
    right: 160px;
    background: transparent;
    color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    height: 15px;
    width: 30px;
    padding: 0;
    background-image: url(https://farsighttechnologies.com/wp-content/uploads/2021/03/left-icon.png);
    background-size: 100% 100%;
}
button.slick-next.slick-arrow {
    position: absolute;
    bottom: -82px;
    right: 105px;
    background: transparent;
    color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    height: 18px;
    width: 40px;
    background-image: url(https://farsighttechnologies.com/wp-content/uploads/2021/03/right-icon.png);
    background-size: 100% 100%;
}
.pagingInfo {
    position: absolute;
    bottom: 0;
    z-index: 999;
}
.sdCustomSliderHeadig {
    color: #94A2B3;
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6em;
    text-align: center;
}
.sdCustomSliderBtn{
    display: inline-block;
    text-decoration: none;
    font-family: montserrat;
    background: #E31C3A;
    color: #fff;
    padding: 12px 25px;
    margin-top: 30px;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
    font-weight: 500;
}
.sdAllContent{
    width:75%;
    margin:auto;
}
.thumbnail img {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    margin: auto;
    margin-top: 15px;
}
.content{
    display:block !important;
    padding: 5px;
}
.SdClientName {
    text-align: center;
    color: #272D4E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4em;
    margin-top: 15px;
}
.SdClientDesc {
    text-align: center;
    color: #7854F7;
    font-family: "Poppins", Sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    margin-bottom: 10px;
}


/* style for moblile */
@media (max-width:576px){
.sd_scroll {
    height: auto;
    overflow: auto;
    max-height:240px;
}

.thumbnail, .btnNtxt{
    width: 100% !important;
    display: block !important;
}

}
/* scroll bar */
/* total width */
.sd_scroll::-webkit-scrollbar {
    background-color:transparent;
    width:6px;
}

/* background of the scrollbar except button or resizer */
.sd_scroll::-webkit-scrollbar-track {
    background-color:transparent;
}
.sd_scroll::-webkit-scrollbar-track:hover {
    background-color:transparent;
}

/* scrollbar itself */
.sd_scroll::-webkit-scrollbar-thumb {
    background-color:#babac0;
    border-radius:16px;
    
}
.sd_scroll::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
}
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


<div class="spacer2"></div>
<center>
<center>
<div class="spacer"></div>


<div class="sd_master_wrapper"> 
    <div class="sdtestBg2"></div>
    <div class="sdtestBg3"></div>
    <div class="slideshow">
        
        <div class="content"> <!-- slide 1 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/09/AC.jpg"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent"> 
                    
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">A wonderful, user-friendly HR solution! Farsight HR Solution helped us implement ESS (Employee Self Service) portal for our large enterprise, which made both employees and Human Resources more productive. User-oriented interface and professional team.</h1> 
                    </div>
                    <p class="SdClientName">Vice President</p>
                    <p class="SdClientDesc">CPF India</p>
                </div>
            </div>
        </div>
        
        <div class="content"> <!-- slide 2 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/09/MS.jpg"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent"> 
                    
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">For us, Farsight has become much more than a software solution provider. Farsight has been our helping hand with implementing business automation. The team's expertise, skill, and commitment to excellence are what makes them so great.</h1> 
                    </div>
                    <p class="SdClientName">Head IT</p>
                    <p class="SdClientDesc">Mushahi Auto Parts</p>
                </div>
            </div>
        </div>
    
        <div class="content"> <!-- slide 3 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/09/RR.jpg"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent"> 
                    
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">I would like to place on record my sincere appreciation for helping us to automate the Salary Revision Exercise and also the Leave Management System at Schneider Electric India. We have had huge challenges in the past to manage these 2 complex exercises and it was a nightmare for HR every March/April. However when we engaged you and worked closely to develop a Software Tool customised for Schneider Electric, our lives have become very much easy. What used to be a pain for us became a huge gain for HR Shared Services.</h1> 
                    </div>
                    <p class="SdClientName">Vice President – India HR Services</p>
                    <p class="SdClientDesc">Schneider Electric</p>
                </div>
            </div>
        </div>
        
        <div class="content"> <!-- slide 4 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/12/testimonial.png"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent">
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">With Farsight’s Employee Self Service Portal, our Vision of implementing an HR Software in Honda R&D (India) could be realized for the easy and smooth functioning of operations. Processes and Policies were well understood by the Team and extended a solution in the System, we look forward for more such customizations where customer is always given a priority. We wish them success for all the future endeavors. </h1>
                    </div>  
                    <p class="SdClientName">General Manager – Administration Head</p>
                    <p class="SdClientDesc">Honda R&D (India) Pvt. Ltd. </p>
                </div>
            </div>
        </div>
        
        
    </div>
</div>  
<div class="spacer"></div>

我的光滑滑块点是垂直对齐的，我还没有在其他光滑滑块代码中看到类似的东西。为什么会这样，我该如何解决？另外，为什么我有数字和点？我曾尝试用其他人的 css 编辑 css，但它不起作用，这就是为什么我要问，以防你们中的任何人可以帮助我。 这是我的代码：

jQuery(document).ready(function($){
    var $slickElement = $('.slideshow');

    $slickElement.slick({
      autoplay: true,
      dots: true,
    });

});

*{
  outline:none;
}
/* spacer */
.spacer{
  height:150px;
  width:100%;
}
.spacer2{
  height:20px;
  width:100%;
}
/* spacer ends */

/* slider styles */
.sd_master_wrapper{
    position: relative; 
    max-width:900px;
    margin:0 auto;
    padding:0;
    border-radius:10px;
    z-index:9999;
}
.sdtestBg3{
    height: 100%;
    width: 80%;
    background: #fff;
    position: absolute;
    bottom: -40px;
    left: 10%;
    border-radius: 20px;
    box-shadow: 0px 18px 52.8537px rgb(215 228 249 / 50%);
    z-index:1;
}
.sdtestBg2{
    height: 100%;
    width: 90%;
    background: #fff;
    position: absolute;
    bottom: -22px;
    left: 5%;
    border-radius: 20px;
    box-shadow: 0px 18px 52.8537px rgb(215 228 249 / 50%);
    z-index:2;
}

.sd_scroll {
    height: auto;
    max-height: 180px;
    overflow: auto;
}
    
.slideshow {
    position: relative;
    min-height: 300px;
    height: auto;
    background: #fff;
    box-shadow: 0px 18px 52.8537px rgba(215, 228, 249, 0.5);
    border-radius: 20px;
    background-image: url(https://farsighttechnologies.com/wp-content/uploads/2021/03/quote1.png), url(https://farsighttechnologies.com/wp-content/uploads/2021/03/quote.png);
    background-position: top 15px left 15px, bottom 40% right 15px;
    background-repeat: no-repeat;
    background-size: 180px, 180px;
    z-index:3;
}
button.slick-prev.slick-arrow {
    position: absolute;
    z-index: 9999;
    bottom: -80px;
    right: 160px;
    background: transparent;
    color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    height: 15px;
    width: 30px;
    padding: 0;
    background-image: url(https://farsighttechnologies.com/wp-content/uploads/2021/03/left-icon.png);
    background-size: 100% 100%;
}
button.slick-next.slick-arrow {
    position: absolute;
    bottom: -82px;
    right: 105px;
    background: transparent;
    color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    height: 18px;
    width: 40px;
    background-image: url(https://farsighttechnologies.com/wp-content/uploads/2021/03/right-icon.png);
    background-size: 100% 100%;
}
.pagingInfo {
    position: absolute;
    bottom: 0;
    z-index: 999;
}
.sdCustomSliderHeadig {
    color: #94A2B3;
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6em;
    text-align: center;
}
.sdCustomSliderBtn{
    display: inline-block;
    text-decoration: none;
    font-family: montserrat;
    background: #E31C3A;
    color: #fff;
    padding: 12px 25px;
    margin-top: 30px;
    border-radius: 4px;
    outline: none;
    font-size: 14px;
    font-weight: 500;
}
.sdAllContent{
    width:75%;
    margin:auto;
}
.thumbnail img {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    margin: auto;
    margin-top: 15px;
}
.content{
    display:block !important;
    padding: 5px;
}
.SdClientName {
    text-align: center;
    color: #272D4E;
    font-family: "Poppins", Sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4em;
    margin-top: 15px;
}
.SdClientDesc {
    text-align: center;
    color: #7854F7;
    font-family: "Poppins", Sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    margin-bottom: 10px;
}


/* style for moblile */
@media (max-width:576px){
.sd_scroll {
    height: auto;
    overflow: auto;
    max-height:240px;
}

.thumbnail, .btnNtxt{
    width: 100% !important;
    display: block !important;
}

}
/* scroll bar */
/* total width */
.sd_scroll::-webkit-scrollbar {
    background-color:transparent;
    width:6px;
}

/* background of the scrollbar except button or resizer */
.sd_scroll::-webkit-scrollbar-track {
    background-color:transparent;
}
.sd_scroll::-webkit-scrollbar-track:hover {
    background-color:transparent;
}

/* scrollbar itself */
.sd_scroll::-webkit-scrollbar-thumb {
    background-color:#babac0;
    border-radius:16px;
    
}
.sd_scroll::-webkit-scrollbar-thumb:hover {
    background-color:#a0a0a5;
}

<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


<div class="spacer2"></div>
<center>
Crafted by : <a href="http://codersandip.com/" target="_blank">Sandip Das</a> <br>
 Warning: Do not copy paste our original content in your website, like client name, review, images, etc. <center>
<div class="spacer"></div>


<div class="sd_master_wrapper"> 
    <div class="sdtestBg2"></div>
    <div class="sdtestBg3"></div>
    <div class="slideshow">
        
        <div class="content"> <!-- slide 1 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/09/AC.jpg"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent"> 
                    
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">A wonderful, user-friendly HR solution! Farsight HR Solution helped us implement ESS (Employee Self Service) portal for our large enterprise, which made both employees and Human Resources more productive. User-oriented interface and professional team.</h1> 
                    </div>
                    <p class="SdClientName">Vice President</p>
                    <p class="SdClientDesc">CPF India</p>
                </div>
            </div>
        </div>
        
        <div class="content"> <!-- slide 2 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/09/MS.jpg"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent"> 
                    
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">For us, Farsight has become much more than a software solution provider. Farsight has been our helping hand with implementing business automation. The team's expertise, skill, and commitment to excellence are what makes them so great.</h1> 
                    </div>
                    <p class="SdClientName">Head IT</p>
                    <p class="SdClientDesc">Mushahi Auto Parts</p>
                </div>
            </div>
        </div>
    
        <div class="content"> <!-- slide 3 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/09/RR.jpg"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent"> 
                    
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">I would like to place on record my sincere appreciation for helping us to automate the Salary Revision Exercise and also the Leave Management System at Schneider Electric India. We have had huge challenges in the past to manage these 2 complex exercises and it was a nightmare for HR every March/April. However when we engaged you and worked closely to develop a Software Tool customised for Schneider Electric, our lives have become very much easy. What used to be a pain for us became a huge gain for HR Shared Services.</h1> 
                    </div>
                    <p class="SdClientName">Vice President – India HR Services</p>
                    <p class="SdClientDesc">Schneider Electric</p>
                </div>
            </div>
        </div>
        
        <div class="content"> <!-- slide 4 -->
            <div class="thumbnail">
                <img src="https://farsighttechnologies.com/wp-content/uploads/2020/12/testimonial.png"> 
            </div>
            <div class="btnNtxt"> 
                <div class="sdAllContent">
                    <div class="sd_scroll">
                    <h1 class="sdCustomSliderHeadig">With Farsight’s Employee Self Service Portal, our Vision of implementing an HR Software in Honda R&D (India) could be realized for the easy and smooth functioning of operations. Processes and Policies were well understood by the Team and extended a solution in the System, we look forward for more such customizations where customer is always given a priority. We wish them success for all the future endeavors. </h1>
                    </div>  
                    <p class="SdClientName">General Manager – Administration Head</p>
                    <p class="SdClientDesc">Honda R&D (India) Pvt. Ltd. </p>
                </div>
            </div>
        </div>
        
        
    </div>
</div>  
<div class="spacer"></div>

【问题讨论】：

  • 你有重复的代码，这是 TLDR。如果你想创建一个水平列表，你应该查看水平导航菜单上的 W3s 指南：w3schools.com/css/css_navbar.asp 虽然这可能是你的display css 属性的问题，并去掉点：list-style-type: none;

标签： javascript html css slick.js


【解决方案1】：

[

ul.slick-dots{
    list-style-type: none;  
}
.slick-dots li{
    display: inline;
}

]1

【讨论】：

    【解决方案2】：

    请仅添加最少代码以重现您的问题中的问题，谢谢。

    我看到您正在使用 slick-carousel，查看 the docs in npm，它说如果您想要默认样式，您还必须将其添加到标题中。

    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>

    如果不添加，则必须自己设置样式。

    jQuery(document).ready(function($) {
  var $slickElement = $('.slideshow');

  $slickElement.slick({
    autoplay: true,
    dots: true,
  });
});
    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

<!-- Add this -->

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" />

<!-- Add this -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slideshow" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

    【讨论】：

    • 谢谢！！我将您告诉我的代码添加到标题中并且它有效。非常感谢
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-01-17
    • 2017-08-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode