You can use this plugin named "twbs-pagination" as follows:
Download the zip on the plugin page and load it into your project using the file jquery.twbsPagination.min.js :
<script src="jquery.twbsPagination.min.js"></script>
I added the hide (Bootstrap native, which hides div ) and paginas (created by me to give a reference to the divs that will be handled, as if each div with this class was a page ):
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 12 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
Next, in the last div , where the buttons will be, I added the class paginas-bts , to differentiate it from the others:
<div class="row paginas-bts">
<div class="col-md-5">
</div>
<div class="col-md-5">
<ul id="pagination">
</ul>
</div>
</div>
To finish, just call the plugin in jQuery after loading the page (see that I created some variables to count the number of divs automatically):
$(window).on("load", function(){
var pag_div = $("#conteudo .container div.paginas"); // seleciono as divs que serão paginadas, exceto a que contém os botões
var num_div = pag_div.length; // conto o número de divs
$('#pagination').twbsPagination({
totalPages: num_div,
visiblePages: 5,
onPageClick: function (event, page) {
pag_div.addClass("hide"); // escondo todas as divs
pag_div.eq(page-1).removeClass("hide"); // mostro a div da página
}
});
});
See in action:
$(window).on("load", function(){
var pag_div = $("#conteudo .container div.paginas");
var num_div = pag_div.length;
$('#pagination').twbsPagination({
totalPages: num_div,
visiblePages: 5,
onPageClick: function (event, page) {
pag_div.addClass("hide");
pag_div.eq(page-1).removeClass("hide");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://esimakin.github.io/twbs-pagination/js/jquery.twbsPagination.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<section id="conteudo">
<div class="container">
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 12 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 13 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 14 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 15 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row hide paginas">
<div class="col-md-2 data-evento">
<div>
<h1> DOMINGO </h1>
<h2> 16 NOV</h2>
<h3> 22:00 </h3>
</div>
</div>
<div class="col-md-10 desc-evento">
<h1> Foo Fighters + Queens of the Stone Age</h1>
<h3> São Paulo - SP</h3>
<h4> Allianz Parque</h4>
<button type="button" class="btn btn-dark">I N F O R M A Ç Õ E S </button>
</div>
</div>
<div class="row paginas-bts">
<div class="col-md-5">
</div>
<div class="col-md-5">
<ul id="pagination">
</ul>
</div>
</div>
</div>
<section>
