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

Question

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>

我的 slick slider 点是垂直对齐的，我在其他 slick slider 代码中没有看到这样的东西。为什么会这样，我该如何解决？另外，为什么我有数字和点？我试过用其他人的 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>

Answer 1

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

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

<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>

Answer 2

[

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

]1

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

Why are my dots vertical in slick slider?

javascript

html

css

slick.js