slick carousel - hide controls?

Question

Are there any options to stop slick adding next & previous buttons? I can't seem to hide them via css.

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

Answer 1

just type this css...

.slick-arrow{
display: none !important;
}

OR

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

Note: you need to type '!important' over here otherwise the 'display:none' property doesn't apply on it and instead the default css of slick slider for arrow buttons will apply. now you can also go to js code of slick slider and write arrow:false. but the problem with this is that it will remove the function of moving the slides left and right through buttons. so this is proper thing to do if you want to hide the buttons but also have the functionality of arrow
buttons so that you can assign them to other buttons. I hope this helped. upvote this answer if this helped and mark it as correct so that other people will get benefit from it!

Answer 2

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

Answer 3

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

    prevArrow: false,
    nextArrow: false
});

Answer 4

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

Answer 5

I faced problem to remove arrows for particular view port.

This worked for me.

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

Answer 6

To hide the buttons using CSS only, this worked for me:

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

I have also used:

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

Answer 7

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

Answer 8

if you want to get rid of both arrows:

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

Answer 9

I had problems with hiding buttons using javascript so I try to use it with CSS

.slider button{
    display: none;
}

,but this didn't work so I use

.slider button{
    visibility: hidden;
}

It doesn't have pointer events so you will be good to go.

Answer 10

Add prevArrow: false and nextArrow: false to where you call your carousel. Ex)

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

I added dots: false in case you wanted to remove that too.

Answer 11

Do you want to hide the buttons? Then try this CSS:

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