jQuery Button Slider using DIVs

Shows how to slide images using buttons to navigate through sliders.

by Guruprasad Rao

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <div class="wrapper">
        <div class="carousel">
            <div class="slide slide-left">
                <div class="div_sec">
                    <h1>TEST1</h1>
                    <input type="text" value="TEST" />
                    <button>SUBMIT</button>
                </div>            
            </div>
            <div class="slide slide-middle">
                <div class="div_sec">
                    <h1>TEST2</h1>
                    <input type="text" value="TEST" />
                    <button>SUBMIT</button>
                </div>
            </div>
            <div class="slide slide-right">
                <div class="div_sec">
                    <h1>TEST3</h1>
                    <input type="text" value="TEST" />
                    <button>SUBMIT</button>
                </div>
            </div>
            <div class="slide slide-right">
                <div class="div_sec">
                    <h1>TEST4</h1>
                    <input type="text" value="TEST" />
                    <button>SUBMIT</button>
                </div>
            </div>

        </div>
    </div>

JavaScript

$(document).ready(function(){
    $('.carousel').slick({
    	infinite:false
    });
});