38

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>

Improve this question
2
  • 8
    .slick({arrows: false})
    – YOU
    Commented Apr 9, 2015 at 16:54
  • what have you done so far? please share with us
    – ahmednawazbutt
    Commented Sep 29, 2020 at 11:58

11 Answers 11

Reset to default
81

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.

Improve this answer
1
  • With lazyLoad setted to "ondemand" this solution prevents image to be displayed when the carousel is dragged. The solution that worked for me is the one repoterd by @Zoltan Ordog
    – Stefano Martella
    Commented Aug 28, 2020 at 8:50
29

if you want to get rid of both arrows:

$('.slider').slick({
   arrows: false
});
Improve this answer
6

I faced problem to remove arrows for particular view port.

This worked for me.

$('.slider').slick({
 arrows: false
});
Improve this answer
5 
$('.slider').slick({
 arrows: false
});
Improve this answer
4

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

.slick-prev:before,
.slick-next:before {
   display:none;
}
Improve this answer
3
  • 1
    thanks @aRahmanS29 - I had to find another approach and never got to try this.
    – v3nt
    Commented Apr 21, 2015 at 10:33
  • @danielCrabbe what approach did you use? I am having the same issue.
    – nihiser
    Commented Feb 26, 2016 at 17:59
  • @nihiser - can't quite remember what job this was for! Will update if i remember.
    – v3nt
    Commented Feb 27, 2016 at 18:14
1

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.

Improve this answer
1

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;
}
Improve this answer
1 

$(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/[email protected]/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/[email protected]/slick/slick.min.js"></script>
    <script src="main.js"></script>
</body>

</html>

Improve this answer
1
  • Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach?
    – Jeremy Caney
    Commented May 28, 2023 at 22:02
0

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

Improve this answer
0 
$('.your-slider-name').slick({

    prevArrow: false,
    nextArrow: false
});
Improve this answer
0 
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!

Improve this answer
0

Not the answer you're looking for? Browse other questions tagged or ask your own question.