Slick轮播 - 隐藏控件？

Question

是否有任何选项可以停止Slick添加下一个和上一个按钮？ 我似乎无法通过CSS隐藏它们。

<button type="button" data-role="none" class="slick-prev" aria-label="previous" style="display: inline-block;">Previous</button>

- v3nt

---

.slick({arrows: false}) - YOU

你目前做了什么？请与我们分享。 - ahmednawazbutt

Answer 1

在调用轮播组件的位置添加 prevArrow: false 和 nextArrow: false。例如：

$('.slider').slick({
    dots: false,
    prevArrow: false,
    nextArrow: false
});

我在里面加了dots: false以防你也想要移除它。

- Edward

---

当lazyLoad设置为"ondemand"时，此解决方案可以防止在拖动走马灯时显示图像。对我有效的解决方案是由@Zoltan Ordog报告的那个。 - Stefano Martella

Answer 2

如果您想同时去除两个箭头：

$('.slider').slick({
   arrows: false
});

- Zoltan Ordog

Answer 3

$('.slider').slick({
 arrows: false
});

- Glen Davidson

Answer 4

我遇到了在特定视口中删除箭头的问题。

这对我起作用。

$('.slider').slick({
 arrows: false
});

- Sushmitha Reddy

Answer 5

你想隐藏按钮吗？那么试试这个CSS：

.slick-prev:before,
.slick-next:before {
   display:none;
}

- atiquratik

---

谢谢@aRahmanS29 - 我不得不找另一种方法，从未尝试过这个。 - v3nt

@danielCrabbe，你使用了什么方法？我也遇到了同样的问题。 - nihiser

@nihiser - 我不太记得这是哪个工作！如果我想起来了，我会更新的。 - v3nt

Answer 6

我曾经尝试使用JavaScript隐藏按钮，但遇到了问题，因此我尝试使用CSS。

.slider button{
    display: none;
}

但是这个方法没有起作用，所以我使用了

。

.slider button{
    visibility: hidden;
}

它没有指针事件，所以您可以放心使用。

- mocni_T

Answer 7

要仅使用CSS隐藏按钮，以下方法适用于我：

nav.slick__arrow {
  height: 0;
  overflow: hidden;
}

我也使用了：

nav.slick__arrow, ul.slick-dots {
  display: none!important;
}

- netgenius.co.uk

Answer 8

$(document).ready(function () {
  $('#main-slider').slick({
    dots: true,
    prevArrow: $('.prev'),
    nextArrow: $('.next')
  });

  $('#best-seller-slider').slick({
    dots: true,
    prevArrow: false,
    nextArrow: false,
    infinite: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    responsive: [
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        }
      },
    ]
  });
});

:root{
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
}

.show-on-sm{
    display: none;
}
header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: relative;
    background-color: antiquewhite;
}

.logo img{
    height: 40px;
    width: 150px;
}

nav ul{
    list-style: none;
    padding: 0;
    margin-top: 6px;
}

nav ul li{
    display: inline-block;
    margin-left: 16px;
}

nav ul li:first-child{
    margin-left: 0;
}

nav ul li a{
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    color: grey;
}

nav ul li.active a{
    color: black;
}

.action-menu ul{
    list-style: none;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 8px;
}

.action-menu ul li{
    display: inline-block;
    margin-right: 16px;
    font-size: 12px;
    font-weight: 600;
}

.action-menu ul li i{
    font-size: 16px;
}

.section{
    width: 100%;
    max-width: 100vw;
    height: 85vh;
}

.hero-content{
    background-image: url("image_here");
}

.hero-content .content{
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.hero-content .content h1{
    font-weight: 800;
    text-transform: uppercase;
    font-size: 50px;
    line-height: 56px;
    width: 400px;
    text-align: center;
    margin-bottom: 16px;
}

.hero-content .content .button-wrapper button{
    background-color: black;
    color: white;
    border-radius: 6px;
    border: none;
    padding: 12px 24px;
    margin: 0 2px;
    font-weight: 700;
    font-size: 14px;
}





.trending-content{
    padding: 24px;
    text-align: center;
    height: auto;
}

.trending-content h2{
    display: inline-block;
    text-align: center;
    font-weight: 700;
    margin-bottom: 24px;
}

.trending-content .collection-wrapper{
    display: grid;
    grid-template-columns: auto auto auto;
    height: 70vh;
    column-gap: 32px;
}

.trending-content .collection-wrapper .item{
    background-color: aqua;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 40px;
}

.trending-content .collection-wrapper .item button{
    border-radius: 6px;
    border: none;
    padding: 10px 16px;
    margin-top: 16px;
}



.carousel-wrapper{
    height: 100vh;
    background-color: beige;
}

.carousel-wrapper #main-slider{
    height: 100vh;
}

.carousel-wrapper #main-slider div{
    height: 100%;
    width: 100%;
}


.clearance-content{
    padding: 24px;
    text-align: center;
    height: auto;
}

.clearance-content h2{
    display: inline-block;
    text-align: center;
    font-weight: 700;
    margin-bottom: 24px;
}

.clearance-content .collection-wrapper{
    display: grid;
    grid-template-columns: auto auto;
    height: 70vh;
    column-gap: 32px;
}

.clearance-content .collection-wrapper .item{
    background-color: aqua;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 40px;
}

.clearance-content .collection-wrapper .item button{
    border-radius: 6px;
    border: none;
    padding: 10px 16px;
    margin-top: 16px;
}




footer{
    text-align: center;
}

footer > p{
    font-size: 14px;
    color: grey;
    margin: 20px 0;
}

footer form input[type="text"], footer form input[type="submit"]{
    border-radius: 6px;
    padding: 10px 16px;
}
footer form input[type="text"]{
    border: 1px solid #ccc;
    background-color: white;
    margin-right: 4px;
}
footer form input[type="submit"]{
    background-color: black;
    color: white;
}

footer hr{
    height: 1px;
    background-color: #ccc;
    border: none;
    margin-top: 50px;
}


.footer-info{
    padding: 16px 42px;
    height: auto;
}
.footer-info .info-wrapper{
    display: grid;
    grid-template-columns: auto auto auto;
    height: auto;
    column-gap: 32px;
}

.footer-info .info-wrapper .item{
    padding: 40px;
    text-align: center;
}

.footer-info .info-wrapper .item h1{
    font-size: 22px;
    margin-bottom: 20px;
}

.footer-info .info-wrapper .item ul{
    list-style: none;
    padding: 0;
}

.footer-info .info-wrapper .item ul li{
    color: grey;
    margin-bottom: 8px;
}

.footbar{
    text-align: right;
    margin-top: 8px;
}
.footbar ul{
    list-style: none;
    padding: 0;
    /* float: right; */
}

.footbar ul li{
    display: inline-block;
    margin-right: 8px;
}








.carousel-wrapper{
    position: relative;
    margin-bottom: 36px;
}

.carousel-wrapper .arrows span{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-wrapper .arrows .prev{
    left: 24px;
}

.carousel-wrapper .arrows .next{
    right: 24px;
}

.slick-dots{
    text-align: center;
}

.slick-dots li{
    display: inline-block;
    margin-right: 20px;
}

.slick-dots li button{
    font-size: 0;
    height: 10px;
    width: 10px;
    border: 1px solid black;
    background-color: white;
    border-radius: 50%;
}

.slick-dots li.slick-active button{
    background-color: black;
}


.best-seller{
    height: auto;
    padding: 0 16px;
    margin-bottom: 24px;
}

.best-seller .item{
    display: inline-block;
    text-align: center;
    position: relative;
    margin: 0 2px;
}

.best-seller .item .wishlist{
    position: absolute;
    top: 10px;
    right: 20px;
}

.best-seller .item img{
    height: 300px;
    width: 180px;
}

.best-seller .item p.name{
    color: grey;
}

.best-seller .item p.price{
    font-weight: 600;
}
.best-seller .slick-arrow{
    display: none;
}


@media only screen and (max-width: 480px) {
    .hide-on-sm{
        display: none;
    }

    .show-on-sm{
        display: block;
    }

    header{
        align-content: flex-start;
        flex-wrap: wrap;
    }

    .logo{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .logo i{
        margin: 0 18px 0 10px;
    }

    .action-menu ul{
        top: 50%;
        transform: translateY(-50%);
    }

    .action-menu ul li i{
        font-size: 18px;
    }



    .trending-content .collection-wrapper, .clearance-content .collection-wrapper{
        grid-template-columns: auto;
        row-gap: 32px;
        height: auto;
    }

    .trending-content .collection-wrapper .item, .clearance-content .collection-wrapper .item{
        height: 60vh;
        display: flex;
        align-items: center;
        flex-direction: unset;
        justify-content: center;
        padding: 40px;
    }

    .clearance-content .collection-wrapper .item{
        flex-direction: column;
    }

    .footer-info .info-wrapper{
        grid-template-columns: auto;
        row-gap: 32px;
        height: auto;
    }

    .footer-info .info-wrapper .item{
        padding: 0;
        text-align: left;
    }

    .footbar{
        text-align: center;
        margin-top: 8px;
    }
}

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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="styles.css">
    <link rel="stylesheet" type="text/css" href="responsive.css">
</head>

<body>
    <header>
        <div class="logo">
            <div class="show-on-sm">
                <i class="fa fa-bars"></i>
            </div>

            <img src="image.jpg" alt="Logo">
        </div>
        <nav class="hide-on-sm">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <div class="action-menu">
            <ul class="hide-on-sm">
                <li>Search <i class="fa fa-search" aria-hidden="true"></i></li>
                <li>Sign In <i class="fa fa-user" aria-hidden="true"></i></li>
                <li>Cart <i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
            </ul>

            <ul class="show-on-sm">
                <li><i class="fa fa-search" aria-hidden="true"></i></li>
                <li><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
            </ul>
        </div>
    </header>

    <main>
        <div class="hero-content section">
            <div class="content">
                <h1>New collection</h1>
                <div class="button-wrapper">
                    <button>Shop Men</button>
                    <button>Shop Women</button>
                </div>
            </div>
        </div>

        <div class="trending-content section">
            <h2>Trending clothing</h2>

            <div class="collection-wrapper">
                <div class="item">
                    <p class="info">Summer collection info here</p>
                </div>

                <div class="item">
                    <p class="info">Summer collection info here</p>
                </div>

                <div class="item">
                    <p class="info">Summer collection info here</p>
                </div>
            </div>
        </div>


        <div class="carousel-wrapper section">
            <div id="main-slider">
                <div style="background-color: red;">your content</div>
                <div style="background-color: blue;">your content</div>
            </div>

            <div class="arrows">
                <span class="prev"> <i class="fa fa-chevron-left"></i> </span>
                <span class="next"> <i class="fa fa-chevron-right"></i> </span>
            </div>
        </div>

        <div class="clearance-content section">
            <h2>Clearance</h2>

            <div class="collection-wrapper">
                <div class="item">
                    <p class="info">Summer collection info here</p>
                    <button>Shop</button>
                </div>

                <div class="item">
                    <p class="info">Summer collection info here</p>
                    <button>Shop</button>
                </div>
            </div>
        </div>

        <div class="best-seller section">
            <div id="best-seller-slider">
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                <div class="item">
                    <span class="wishlist"> <i class="fa fa-heart-o"></i> </span>
                    <img src="images.jpg" alt="" style="background-color: rgb(226, 226, 226)">
                    <p class="name">Item name here</p>
                    <p class="price">$150.00</p>
                </div>
                
            </div>
        </div>
    </main>

    <footer>
        <h2>Get our latest news and special sales</h2>
        <p>You may unsubscribe at any moment. For that purpose, please find our contact info in the legal notice</p>

        <form>
            <input type="text">
            <input type="submit" value="Get!">
        </form>

        <hr>

        <div class="footer-info section">
            <div class="info-wrapper">
                <div class="item">
                    <h1>Customer Service</h1>
                    <ul>
                        <li>Monday to Friday</li>
                        <li>10am - 6:30pm (New York Time)</li>
                        <li>+(001) 23 45 67 89</li>
                        <li>send us an email</li>
                    </ul>
                </div>

                <div class="item">
                    <h1>Our Guarantees</h1>
                    <ul>
                        <li>Shipping in 3 days</li>
                        <li>Free returns within 14 days</li>
                        <li>Secure payments</li>
                    </ul>
                </div>

                <div class="item">
                    <h1>Our Company</h1>
                    <ul>
                        <li>Home</li>
                        <li>About Us</li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>

            <div class="footbar">
                <ul>
                    <li><i class="fa fa-facebook" aria-hidden="true"></i></li>
                    <li><i class="fa fa-instagram" aria-hidden="true"></i></li>
                    <li><i class="fa fa-twitter" aria-hidden="true"></i></li>
                    <li><i class="fa fa-linkedin" aria-hidden="true"></i></li>
                </ul>
            </div>
        </div>
    </footer>


    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

- Karan Sharma

---

请记住，Stack Overflow 不仅旨在解决当前的问题，还要帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。对于我们社区中的初学者和不熟悉语法的成员来说，这尤其重要。鉴于此，您能否编辑您的答案，包括您正在做什么以及为什么您认为这是最好的方法的解释？ - Jeremy Caney

Answer 9

$('.your-slider-name').slick({

    prevArrow: false,
    nextArrow: false
});

- GR Rafi

Answer 10

$('.my-Slider').slick({dots: false, prevArrow: false, nextArrow: false, arrows: false});

$('.my-Slider').slick（{dots：false，prevArrow：false，nextArrow：false，arrows：false}）;

- Ali Raza