Image slider on number click using jQuery slick carousel plugin in ASP.Net

Last Reply on Mar 10, 2017 05:11 AM By AnandM

Posted on Mar 10, 2017 03:39 AM

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>

 

Posted on Mar 10, 2017 05:11 AM Modified on on Mar 10, 2017 05:14 AM

Hi jordan,

Refer below sample code and change the code according to your need

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="container">
            <div style="width: 800px; border-radius: 10px; height: 400px; padding-left: 20px;">
                <h3 style="text-align: center; margin-top: 23px; font-size: xx-large; text-decoration: underline">
                    Our Popular Dishes</h3>
                <hr />
                <div id="Div2" class="multiples" runat="server">
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm3.staticflickr.com/2854/10380193164_9b65e4c5ed_n.jpg"
                            alt="" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm8.staticflickr.com/7395/10380186284_4f9ac522ed_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm8.staticflickr.com/7424/10380408813_3cd984570d_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm4.staticflickr.com/3723/8986453414_a869ddc3aa_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm8.staticflickr.com/7130/6885958326_ecbb33e962_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm8.staticflickr.com/7051/7032054587_5f15e32a10_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm8.staticflickr.com/7228/6885959482_670fb32b58_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm8.staticflickr.com/7120/7032057469_ce0c1620d4_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm3.staticflickr.com/2828/10379529486_7abd3b99ef_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm4.staticflickr.com/3723/10379498815_2acedf4c6c_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm8.staticflickr.com/7397/10379841244_ec8c68ccc4_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                    <div style="border-radius: 10px; border: 1px solid #ddd; background-color: White;
                        padding-top: 10px">
                        <img style="height: 150px; width: 150px;" src="http://farm6.staticflickr.com/5528/10379655586_2a95e5f127_n.jpg" />
                        <br />
                        <h3>
                            <a href="">Dish Name Here</a></h3>
                        <p class="price">
                            $100</p>
                    </div>
                </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="linkAsButton">' + i + '</a>';
                        }
                    });
                });
            </script>
            <style type="text/css">
                /* the slides */
                .linkAsButton
                {
                    color: #333;
                    background-color: #fff;
                }
                .slick-slide
                {
                    margin: 0 10px;
                    padding-left: 50px !important;
                    height: 70%;
                }
                /* the parent */
                .slick-list
                {
                    margin: 0 -10px;
                }
                .slick-slide .slick-current .slick-active
                {
                    width: 180px;
                    padding-bottom: 20px;
                    padding-top: 20px;
                }
            </style>
        </div>
    </div>
    </form>
</body>
</html>

Demo