bootstrap slick js

HTML
<div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span>Nav 01</span></a> </div> <div class="collapse navbar-collapse" id="navbar-ex-collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Contacts</a> </li> </ul> </div> </div> </div> <div class="navbar navbar-default navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span>Nav 02</span></a> </div> <div class="collapse navbar-collapse" id="navbar-ex-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Contacts</a> </li> </ul> </div> </div> </div> <section class="regular slider"> <div style="background: url(https://trello-attachments.s3.amazonaws.com/5756a7f616a3f06898134b92/2716x1774/45ae0d695cf509febf80143674eeefba/inmotion_2015_0316-2-14.jpg) no-repeat center center; background-size: cover;" class="slider-item cinemascope"></div> <div style="background: url(https://trello-attachments.s3.amazonaws.com/5756a83da19cb0ceddb5f8a2/1440x874/35a49f68c9d94be4657c30d601cf3327/ios_moves_business_large.jpg) no-repeat center center; background-size: cover;" class="slider-item cinemascope"></div> <div style="background: url(https://trello-attachments.s3.amazonaws.com/575ecc70807dd060edd54312/1440x600/14f23db24b687a989dcffc0740cb512e/every_audit_large.jpg) no-repeat center center; background-size: cover;" class="slider-item cinemascope"></div> <div style="background: url(https://trello-attachments.s3.amazonaws.com/575ecc778147102121ab2eca/1440x600/596bef12118e5835b3ab6cccf2fb9447/gallery_2_large.jpg) no-repeat center center; background-size: cover;" class="slider-item cinemascope"></div> <div style="background: url(https://trello-attachments.s3.amazonaws.com/575ecc7dcc47a7b90a655a20/1441x1023/c8a3862a3aeded1a7f5797ce344c7535/hero_large.jpg) no-repeat center center; background-size: cover;" class="slider-item cinemascope"></div> <div style="background: url(https://trello-attachments.s3.amazonaws.com/575ecc85f2a69b51d47e0371/1200x630/2c8ce3443b1dbda27ac565a496792f2b/og_business_large_2x.jpg) no-repeat center center; background-size: cover;" class="slider-item cinemascope"></div> </section> <div class="navbar navbar-default navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span>nav03</span></a> </div> <div class="collapse navbar-collapse" id="navbar-ex-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"> <a href="#">Home</a> </li> <li> <a href="#">Contacts</a> </li> </ul> </div> </div> </div> </div> <br> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="https://trello-attachments.s3.amazonaws.com/575ecdb6d74683aa96cec841/1008x681/a666b70e058439c3017df37c3b441d7a/Schermata_2016-06-13_alle_17.12.17.png" class="img-responsive"> </div> <div class="col-md-6"> <h1>A title</h1> <h3>A subtitle</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> </div> </div> </div> <br> <div class="section"> <div class="container"> <div class="row"> <div class="col-md-3"> <img src="https://trello-attachments.s3.amazonaws.com/575ecf17490ddc57a42e66b3/1026x770/c7e6cb2b571db5489e99fe81c33ded19/placeholder.png" class="img-responsive"> <h2>A title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, <br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua. <br>Ut enim ad minim veniam, quis nostrud</p> </div> <div class="col-md-3"> <img src="https://trello-attachments.s3.amazonaws.com/575ecf17490ddc57a42e66b3/1026x770/c7e6cb2b571db5489e99fe81c33ded19/placeholder.png" class="img-responsive"> <h2>A title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, <br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua. <br>Ut enim ad minim veniam, quis nostrud</p> </div> <div class="col-md-3"> <img src="https://trello-attachments.s3.amazonaws.com/575ecf17490ddc57a42e66b3/1026x770/c7e6cb2b571db5489e99fe81c33ded19/placeholder.png" class="img-responsive img-rounded"> <h2>A title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, <br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua. <br>Ut enim ad minim veniam, quis nostrud</p> </div> <div class="col-md-3"> <img src="https://trello-attachments.s3.amazonaws.com/575ecf17490ddc57a42e66b3/1026x770/c7e6cb2b571db5489e99fe81c33ded19/placeholder.png" class="img-responsive"> <h2>A title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, <br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua. <br>Ut enim ad minim veniam, quis nostrud</p> </div> </div> </div> </div>
CSS
html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } .slider { /*width: 95%;*/ /*margin: 100px auto;*/ } .slick-slide { /*margin: 0px 20px;*/ margin: 0; background-color: #ccc; } .slick-slide img { /*width: 100%;*/ } .slick-prev:before, .slick-next:before { color: black; } .slider-item{ /*width: 100%;*/ /*height: 500px;*/ background-color: #ccc; } .slick-prev{ left: 5px!important; z-index: 1000; } .slick-next { right: 5px!important; } .cinemascope { position: relative; } .cinemascope:before { display: block; content: ""; width: 100%; padding-top: 40%; } .cinemascope > .content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .navbar{ margin-bottom: 0; } .slick-dots{ bottom: 10px; } .slider{ margin-bottom: 0!important; }
JAVASCRIPT
$(document).on('ready', function() { $(".regular").slick({ dots: true, infinite: true, slidesToShow: 1, slidesToScroll: 1 }); });
Expand for more options Login