See example in SnapScan project

Slick carousel only for mobile with custom navigation.html

<div class="container">
                    <div class="row no-gutters justify-content-center">
                        <div class="col-12 col-md-6 text-center">
                            <h4>Billing Solutions</h4>
                            <p>Get paid quickly and easily with integrated billing options to send statements and invoices to your customers, patients and clients.</p>
                        </div>
                    </div>
                    <div class="row" id="solution-card-carousel">
                        <div class="col-md-4 col-12 card-wrap">
                            <div class="card">
                              <img class="card-img-top" src="svgs/img-statement.svg" alt="Statement integration">
                              <div class="card-body  text-center body-small">
                                <h6 class="card-title">Statement integration</h6>
                                <p class="card-text">Add SnapCodes to your digital and printed invoices so customers can use the SnapScan app to pay their bills wherever they are.</p>
                              </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-12 card-wrap">
                            <div class="card">
                              <img class="card-img-top" src="svgs/img-email.svg" alt="Email">
                              <div class="card-body  text-center body-small">
                                <h6 class="card-title">Email</h6>
                                <p class="card-text">Send email statements with SnapCodes that customers can use to pay on their desktop or mobile phone.</p>
                              </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-12 card-wrap">
                            <div class="card">
                              <img class="card-img-top" src="svgs/img-sms.svg" alt="SMS">
                              <div class="card-body  text-center body-small">
                                <h6 class="card-title">SMS</h6>
                                <p class="card-text">Send text messages with a paylink that customers can click to pay with SnapScan in an instant.</p>
                              </div>
                            </div>
                        </div>
                    </div>  
                    <div class="controls-top">
                        <a class="btn-floating prev-btn" href="#multi-item-example" data-slide="prev"><img src="svgs/icn-previous-white.svg" alt=""><img src="svgs/icn-previous-blue.svg" alt="" class="active"></a>
                        <a class="btn-floating next-btn" href="#multi-item-example" data-slide="next"><img src="svgs/icn-next-blue.svg" alt=""><img src="svgs/icn-next-white.svg" alt="" class="active"></a>
                    </div>              
                </div>


<script type="text/javascript">
            (function($){
                $(function(){
                    
                    
                    
                     /* Slick needs no get Reinitialized on window Resize after it was destroyed */
                    $(window).on('load resize orientationchange', function() {
                        $('#solution-card-carousel').each(function(){
                            var $carousel = $(this);
                            /* Initializes a slick carousel only on mobile screens */
                            // slick on mobile
                            if ($(window).width() > 768) {
                                if ($carousel.hasClass('slick-initialized')) {
                                    $carousel.slick('unslick');
                                }
                            }
                            else{
                                if (!$carousel.hasClass('slick-initialized')) {
                                    $carousel.slick({
                                        slidesToShow: 1,
                                        slidesToScroll: 1,
                                        mobileFirst: true,
                                        dots: false,
                                        autoplay: true,
                                        prevArrow: $('.billing-solutions-section .prev-btn'),
                                        nextArrow: $('.billing-solutions-section .next-btn'),
                                    });
                                }
                            }
                        });
                    });
                })
            })(jQuery);
        </script>