Skip to content

Instantly share code, notes, and snippets.

@wasim117

wasim117/index.html

Created May 8, 2020 10:55
Show Gist options
  • Save wasim117/1f141e8d697b9af96899aa3c8826a7a4 to your computer and use it in GitHub Desktop.
Save wasim117/1f141e8d697b9af96899aa3c8826a7a4 to your computer and use it in GitHub Desktop.
Download ZIP
yLYKYqN
Raw
index.html
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 1</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 2</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 3</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 4</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 5</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 6</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 7</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 8</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 9</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 10</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 11</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 12</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 13</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 14</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 15</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 16</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title 17</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<a href="#" class="btn btn-primary btn-lg active prev-button" role="button">Previous</a>
</div>
<div class="col-sm-6">
<a href="#" class="btn btn-primary btn-lg active next-button" role="button">Next</a>
</div>
</div>
</div>
Raw
script.js
//alert(1);
$(document).ready(function(){
var totalVisible = 4;
var totalCards = $('.col-sm-4').length;
var visibleCards = $('.col-sm-4:visible').length;
console.log("tota "+totalCards);
//console.log(visibleCards);
$('.col-sm-4').hide();
$(".col-sm-4").slice(0, totalVisible).each(function(index) {
// Do whatever you want to the first three elements
$(this).show();
});
$('.next-button').on('click', function(){
var lastVisible = parseInt($('.col-sm-4:visible:last').index());
$('.col-sm-4').hide();
$(".col-sm-4").slice(lastVisible+1, lastVisible+1+totalVisible).each(function(index) {
// Do whatever you want to the first three elements
$(this).show();
});
var lastVisible = parseInt($('.col-sm-4:visible:last').index());
console.log(lastVisible+1 );
$('.prev-button').removeClass("disabled");
if(totalCards == lastVisible+1){
$('.next-button').addClass("disabled");
}
});
$('.prev-button').on('click', function(){
var firstVisible = parseInt($('.col-sm-4:visible:first').index());
$('.col-sm-4').hide();
$(".col-sm-4").slice(firstVisible - totalVisible , firstVisible ).each(function(index) {
// Do whatever you want to the first three elements
$(this).show();
});
var firstVisible = parseInt($('.col-sm-4:visible:first').index());
console.log(firstVisible+1 );
$('.next-button').removeClass("disabled");
if(1 == firstVisible+1){
$('.prev-button').addClass("disabled");
$('.next-button').removeClass("disabled");
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment