<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 slick-initialized slick-slider slick-dotted" role="toolbar">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" role="listbox" style="opacity: 1; width: 5850px; transform: translate3d(-1170px, 0px, 0px);">
<div class="dises-show text-center slick-slide slick-cloned" data-slick-index="-1"
aria-hidden="true" tabindex="-1" style="width: 1170px;">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#" tabindex="-1">
<img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">Dish Name Here</a></h3>
<p class="price">
$100</p>
</div>
</div>
</div>
</div>
<div class="dises-show text-center slick-slide slick-current slick-active" data-slick-index="0"
aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00"
style="width: 1170px;">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#" tabindex="0">
<img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="0">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="#" tabindex="0">
<img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="0">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="#" tabindex="0">
<img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="0">Dish Name Here</a></h3>
<p class="price">
$100</p>
</div>
</div>
</div>
</div>
<div class="dises-show text-center slick-slide" data-slick-index="1" aria-hidden="true"
tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 1170px;">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#" tabindex="-1">
<img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">Dish Name Here</a></h3>
<p class="price">
$100</p>
</div>
</div>
</div>
</div>
<div class="dises-show text-center slick-slide" data-slick-index="2" aria-hidden="true"
tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 1170px;">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#" tabindex="-1">
<img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">Dish Name Here</a></h3>
<p class="price">
$100</p>
</div>
</div>
</div>
</div>
<div class="dises-show text-center slick-slide slick-cloned" data-slick-index="3"
aria-hidden="true" tabindex="-1" style="width: 1170px;">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="single-disesh">
<div class="disesh-img">
<a href="#" tabindex="-1">
<img src="images/dish/1.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/2.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">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="#" tabindex="-1">
<img src="images/dish/3.png" alt=""></a>
</div>
<div class="disesh-desc pt-50">
<h3>
<a href="" tabindex="-1">Dish Name Here</a></h3>
<p class="price">
$100</p>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="slick-dots" style="display: block;" role="tablist">
<li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true"
aria-controls="navigation00" id="slick-slide00"><a href="javascript:void(0)">1</a></li><li
aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation01"
id="slick-slide01"><a href="javascript:void(0)">2</a></li><li aria-hidden="true"
role="presentation" aria-selected="false" aria-controls="navigation02" id="slick-slide02">
<a href="javascript:void(0)">3</a></li></ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This code is for static
when i click on 1 it will slide 3 image
<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 id="Div2" class="multiples" runat="server">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.multiples').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
autoplaySpeed: 2000,
dots: true,
customPaging: function (slider, i) {
var thumb = $(slider.$slides[i]).data();
return '<a class="/AsButton">' + i + '</a>';
}
});
});
</script>
<style type="text/css">
/* the slides */
./AsButton
{
color: #333;
background-color: #fff;
}
.slick-slide
{
margin: 0 10px;
padding-left: 50px !important;
}
/* the parent */
.slick-list
{
margin: 0 -10px;
}
a
{
margin-right: 5px;
}
.slick-slide .slick-current .slick-active
{
width: 180px;
padding-bottom: 20px;
padding-top: 20px;
}
</style>
</div>
</div>
</div>
public void getPoplarDish()
{
clsSubCategory objSubCat = new clsSubCategory(true);
objSubCat.SelectAll();
string str = string.Empty;
int i = 0;
for (i = 0; i < objSubCat.ListclsSubCategory.Count; i++)
{
str += @" <div style='border-radius: 10px; border: 1px solid #ddd; background-color: White;
padding-top: 10px'>
<img style='height: 150px; width: 150px;' src='../images/SubCategory/" + objSubCat.ListclsSubCategory[i].SubCategoryID + objSubCat.ListclsSubCategory[i].ImgExtension + @"'/>
<br />
<h3>
<a href='' style='font-size: 18px;'>" + objSubCat.ListclsSubCategory[i].SubCategoryName + @"</a></h3>
<p class='price'>
$100</p>
</div>";
}
Div2.InnerHtml = str;
}
this code is dynamic it's working but the problme is i am not using class which are used in static so the design are getting change so how to use class in dynamic
