bootstrap - slick slider example

by ihope

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <div class="row text-center"> 
  <div class="your-class">
      <div class="row">
          <div class="container">
              <div class="col-xs-12">
                  <div class="well">1</div>
              </div>
          </div>
      </div>
      <div class="row">
          <div class="container">
              <div class="col-xs-6">
                  <div class="well">1</div>
              </div>
              <div class="col-xs-6">
                  <div class="well">2</div>
              </div>
          </div>
      </div>
      <div class="row">
          <div class="container">
              <div class="col-xs-4">
                  <div class="well">1</div>
              </div>
              <div class="col-xs-4">
                  <div class="well">2</div>
              </div>
              <div class="col-xs-4">
                  <div class="well">3</div>
              </div>
          </div>
      </div>
      <div class="row">
          <div class="container">
              <div class="col-xs-3">
                  <div class="well">1</div>
              </div>
              <div class="col-xs-3">
                  <div class="well">2</div>
              </div>
              <div class="col-xs-3">
                  <div class="well">3</div>
              </div>
              <div class="col-xs-3">
                  <div class="well">4</div>
              </div>
          </div>
      </div>
      <div class="row">
          <div class="container">
              <div class="col-xs-2">
                  <div class="well">1</div>
              </div>
              <div class="col-xs-2">
                 ...

CSS

.slick-slide { 
 outline: none; 
}
#prev, #next {  
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 cursor: pointer;
}

JavaScript

$(function(){
	$('.your-class').slick({arrows:false});
    $('#next').click(function(){
    	$('.your-class').slick('slickNext');
    });
    $('#prev').click(function(){
    	$('.your-class').slick('slickPrev');
    });
});