i want to display slider as per click of number.
i have 1,2,3 no when i click on 1 it will slide 3 image at a time
like same on other 2
here is my code
<!--popular dises start-->
<div class="popular-dishes">
<div class="bg-img-2 ptb-100">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="section-title text-center grey_bg">
<h2>Our Popular Dishes</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim nostrud exercitation ullamco laboris nisi.</p>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="dises-list">
<div class="dises-show text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
</div>
<div class="dises-show text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
</div>
<div class="dises-show text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
<div class="col-md-4 hidden-sm col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#"><img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3><a href="">Dish Name Here</a></h3>
<p class="price">$100</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--popular dises end-->
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico in the root directory -->
<link href="images/apple-touch-icon.png" type="images/x-icon" rel="shortcut icon">
<!-- All css files are included here. -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/core.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- customizer style css -->
<link rel="stylesheet" href="css/style-customizer.css">
<link href="#" data-style="styles" rel="stylesheet">
<!-- Modernizr JS -->
<script src="js/vendor/modernizr-2.8.3.min.js"></script>