See the Ramzy ride >>> http://staging.greenboxdesigns.com/ramzy-ride/v2

slick custom nav.html

<!-- Beginning hero section 
==================================== -->
<section class="hero-wrap">
    <div class="hero-slide-wrap" id="hero-slide-wrap">
        <div class="slide">
            <div class="hero-thumb" style="background-image: url(images/home-hero.jpg)">
                <div class="common-wrap clear hero-thumb-inner">
                    <div class="hero-title">
                        <h1>Hello Jozi. We are Ramzy Ride</h1>
                        <p>Ramzy Ride is a distinctly African ride-sharing alternative to traditional taxi cabs.</p>
                        <div class="apps-download-wrap">
                            <a href="#"><img src="svg/Apple_Nav.svg"></a>
                            <a href="#"><img src="svg/Adroid_Nav.svg"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="hero-thumb" style="background-image: url(images/home-hero.jpg)">
                <div class="common-wrap clear hero-thumb-inner">
                    <div class="hero-title">
                        <h1>Hello Jozi. We are Ramzy Ride</h1>
                        <p>Ramzy Ride is a distinctly African ride-sharing alternative to traditional taxi cabs.</p>
                        <div class="apps-download-wrap">
                            <a href="#"><img src="svg/Apple_Nav.svg"></a>
                            <a href="#"><img src="svg/Adroid_Nav.svg"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slide">
            <div class="hero-thumb" style="background-image: url(images/home-hero.jpg)">
                <div class="common-wrap clear hero-thumb-inner">
                    <div class="hero-title">
                        <h1>Hello Jozi. We are Ramzy Ride</h1>
                        <p>Ramzy Ride is a distinctly African ride-sharing alternative to traditional taxi cabs.</p>
                        <div class="apps-download-wrap">
                            <a href="#"><img src="svg/Apple_Nav.svg"></a>
                            <a href="#"><img src="svg/Adroid_Nav.svg"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="caption-wrap-section">
        <div class="common-wrap clear caption-section-inner">
            <div class="caption-inner" id="caption-inner">
                <div class="slide active">
                    <span>01</span>
                    <div class="hero-slider-caption">
                        <dfn>Rider</dfn>
                        <p>Experience Ramzy Ride</p>
                    </div>
                </div>
                <div class="slide">
                    <span>02</span>
                    <div class="hero-slider-caption">
                        <dfn>Driver</dfn>
                        <p>Become your own boss</p>
                    </div>
                </div>
                <div class="slide">
                    <span>03</span>
                    <div class="hero-slider-caption">
                        <dfn>Contact</dfn>
                        <p>Get in touch</p>
                    </div>
                </div>
            </div>
            <div class="direction-nav-wrap">
                <a href="#"class="direction-icon flex-prev"><img src="svg/Arrow_Left.svg" ></a>
                <a href="#"class="direction-icon flex-next"><img src="svg/Arrow_Right.svg"></a>
            </div>
        </div>
    </div>
</section>
<!-- //End hero section -->  

<script>
       $('#hero-slide-wrap').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            //arrows: true,
            dots: false,
            infinite: true,
            //fade: true,
            centerMode: false,
            speed: 1000,
            
            responsive: [{
                breakpoint: 99999,
                settings: {
                    unslick: true
                }
            },{
                breakpoint: 767,
                settings: {
                    
                    asNavFor: '#caption-inner',
                }
            }]
        });
        
        function slickCustomNav(){
            if($(window).width() > 767){
                $('#hero-slide-wrap').on('afterChange', function (event, slick, currentSlide, nextSlide) {
                    $(this).parents('.hero-wrap').find('#caption-inner .slide').removeClass('active');
                    $(this).parents('.hero-wrap').find('#caption-inner .slide').eq(currentSlide).addClass('active');
                    
                });

                $('.hero-wrap').each(function (i) {
                    var item = $(this).find('#caption-inner .slide');
                    item.each(function (i) {
                        $(this).click(function () {
                            $(this).parents('.hero-wrap').find('#caption-inner .slide').removeClass('active');
                            $(this).parents('.hero-wrap').find('#caption-inner .slide').eq(i).addClass('active');
                            $(this).parents('.hero-wrap').find('#hero-slide-wrap').slick('slickGoTo', (i + 1) - 1);
                        })
                    })
                });
            }
        }
        
        slickCustomNav();
        
        $(window).on("resize", function(){
            slickCustomNav();
        })
        
        
        $('.direction-icon.flex-prev').on('click', function (e) {
            e.preventDefault()
            $('#hero-slide-wrap > .slick-prev').trigger('click');
        });

        $('.direction-icon.flex-next').on('click', function (e) {
            e.preventDefault()
            $('#hero-slide-wrap > .slick-next').trigger('click');
        });  
</script>