i want to display slider as per click of numberi have 123 no when i click on 1 it will slide 3 image at a timelike same on other 2here is my code ltpopular dises startgt ltdiv class34populardishes34gt ltdiv class34bgimg2 ptb10034gt ltdiv class34container34gt ltdiv class34row34gt ltdiv class34colmd8 colmdoffset234gt

Hi jordanRefer below sample code and change the code according to your needHTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegtltheadgtltbodygt ltform id34form134 runat34server34gt ltdivgt ltdiv class34container34gt ltdiv style34width 800px borderradius 10px height 400px paddingleft 20px34gt lth3 style34textalign center margintop 23px fontsize xxlarge textdecoration underline34gt Our Popular Disheslth3gt lthr gt ltdiv id34Div234 class34multiples34 runat34server34gt ltdiv style34borderradius 10px border 1px solid ddd backgroundcolor White paddingtop 10px34gt ltimg style34height 150px width 150px34 src34h

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

jordan

SOLVED CLOSED ACTIVE ANSWERED
User: jordan
Posted: on Mar 10, 2017 03:39 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 4734

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>

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 2

Reply
ANSWER
User: AnandM
Replied: on Mar 10, 2017 05:11 AM
Modified: on Mar 10, 2017 05:14 AM
Report

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

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

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

Company

Explore

Follow us

Contact Us