如何使用JQuery创建动态滑块?

时间:2016-12-21 10:35:28

标签: javascript jquery html css json

我有一些标签,上面有几个滑块。我想动态更改滑块内容。

我使用ASP.NET MVC 5,我的数据类型格式为JSON

如何在每个标签中创建动态滑块?

<div class="container" style="overflow-x:hidden;">
    <section>

        <ul id="myTab2" class="nav nav-tabs nav-tabs-style-2">
            <li>
                <a href="#tab2-1" data-toggle="tab" onclick="LoadMainHomeTabData(1)">خرید/فروش ماشین آلات تولیدی </a>
            </li>
            <li class="active">
                <a href="#tab2-2" data-toggle="tab" onclick="LoadMainHomeTabData(2)">خرید/فروش کالای مصرفی</a>
            </li>
            <li>
                <a href="#tab2-3" data-toggle="tab" onclick="LoadMainHomeTabData(3)">خرید/فروش خدمات</a>
            </li>
            <li>
                <a href="#tab2-4" data-toggle="tab" onclick="LoadMainHomeTabData(4)">خرید/فروش شرکت</a>
            </li>
            <li>
                <a href="#tab2-5" data-toggle="tab" onclick="LoadMainHomeTabData(5)">تقویم نمایشگاه ها</a>
            </li>
            <li>
                <a href="#tab2-6" data-toggle="tab" onclick="LoadMainHomeTabData(6)">مناقصه/مزایده</a>
            </li>

            <li>
                <a href="#tab2-7" data-toggle="tab" onclick="LoadMainHomeTabData(7)">فرصت های شغلی</a>
            </li>
            <li>
                <a href="#tab2-8" data-toggle="tab" onclick="LoadMainHomeTabData(8)">نیروی کار ماهر</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="fade tab-pane" id="tab2-1">

                <div class="container">
                    <br />
                    <p style="font-size:24px;font-weight:bold;text-align:center;color:#000">خرید و فروش ماشین آلات تولیدی</p>
                    <br />
                    <div id="ca-container" class="ca-container">
                        <div class="ca-wrapper" id="mc">

                            <div class="ca-item ca-item-1" id="cart1">
                                <div class="ca-item-main">
                                    <div class="ca-icon">
                                        <img src="~/Content/CircularContentCarousel/images/pluus.PNG" /></div>
                                    <br /><br /><br /><br /><br />
                                    <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center">جای محصول شما اینجا خالیست</p>

                                    <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">
                                    برای نمایش محصول خود <a href="@ServerDirectory.Host/UserManagment/SignUp">ثبت نام کنید</a> </p>

                                </div>
                            </div>
                            @{
                                var machineryTradeList = new Logic.AllCoChain.MachineryTradeLogic().GetMachineryTradeList();
                            }
                            @{
                                for (int i = 0; i < machineryTradeList.Count; i++)
                                {
                                    var mtradeType = machineryTradeList[i].TradeType == AllCoChain.Models.TradeType.MachineryBuyTrade ? "خرید دستگاه" : "فروش دستگاه";
                                    <div class="ca-item ca-item-@(i+2)">
                                        <div class="ca-item-main">
                                            @if (!string.IsNullOrEmpty(machineryTradeList[i].LogoPath))
                                            {
                                                <div class="ca-icon"><img src="@ServerDirectory.UploadVirtual/MachineryTrades/@machineryTradeList[i].LogoPath" style="width:233px; height:189px;"/></div>
                                            }
                                            else
                                            {
                                                <div class="ca-icon" style="border:solid #e1e1e1 1px;border-radius:10px;"></div>
                                            }
                                            <br />
                                            <p  style="font-family:IRANSans-Bold-web;color:#000;text-align:center">@machineryTradeList[i].Name</p>
                                            <h4>
                                        <span class="ca-quote">&ldquo;</span>
                                                <br />
                                                @if (machineryTradeList[i].TradeType == AllCoChain.Models.TradeType.MachineryBuyTrade)
                                                {
                                                    <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center" class="label label-primary">
                                                        نوع تجارت  : @mtradeType
                                                    </p>
                                                }
                                                else
                                                {
                                                    <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center" class="label label-danger">
                                                        نوع تجارت  : @mtradeType
                                                    </p>
                                                }
                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">
                                                قیمیت : @machineryTradeList[i].Price</p>

                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">
                                                نشانی : @machineryTradeList[i].State - @machineryTradeList[i].City</p>
                                    </h4>
                                            <a href="@ServerDirectory.Host/MachineryTrade/MachineryTradeViewInfo?id=@machineryTradeList[i].Id&from=home" class="ca-more">ادامه مطلب</a>
                                </div>
                                <div class="ca-content-wrapper">
                                    <div class="ca-content">
                                                <h6 style="text-align:center">@machineryTradeList[i].Name</h6>
                                        <a href="#" class="ca-close">بستن</a>
                                        <div class="ca-content-text">
                                                    <p style="text-align:right">تاریخ انتشار : @machineryTradeList[i].PulisheDate.ToString(PersianDateType.YYYYMMDD)</p>
                                                    <p style="text-align:right">توضیحات فنی : @machineryTradeList[i].TechnicalDescription</p>
                                                    <p style="text-align:right">توضیحات بیشتر @machineryTradeList[i].MoreDescription</p>
                                        </div>
                                        <ul style="float:right">
                                                    <li><a  target="_self" href="@ServerDirectory.Host/MachineryTrade/MachineryTradeViewInfo?id=@machineryTradeList[i].Id&from=home" class="btn btn-default" >ادامه مطلب</a></li>
                                            <li><a href="#">به اشتراک گذاری</a></li>
                                            <li><a href="#">هم اکنون عضو سایت نیستید؟</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                                }
                            }
                            <div class="ca-item ca-item-5">
                                <div class="ca-item-main">
                                    <div class="ca-icon">
                                    <img src="~/Content/CircularContentCarousel/images/eye.png" />
                                    </div>
                                    <br /><br /><br /><br />
                                    <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center;font-size:20px;">مشاهده همه</p>
                                    <br /><br />
                                    <div style="margin-right:20px;">
                                        <h4 style="padding-top:5%;text-align:center;">
                                            <a target="_self" href="@ServerDirectory.Host/MachineryTrade/MachineryTradeShowAll" class="btn btn-block btn-info"  style="font-family:IRANSans-Light-web;font-style:normal;">مشاهده همه موارد</a>
                                    </h4>
                                </div>
                                        </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

            </div>
            <div class="fade in tab-pane active" id="tab2-2">

                <div class="container">
                    <br />
                    <p style="font-size:24px;font-weight:bold;text-align:center;color:#000;">خرید و فروش مواد اولیه / محصول</p>
                    <br />
                    <div id="ca-container" class="ca-container">
                        <div class="ca-wrapper" id="mc2">

                            <div class="ca-item ca-item-1" id="cart2">
                                <div class="ca-item-main">
                                    <div class="ca-icon">
                                        <img src="~/Content/CircularContentCarousel/images/pluus.PNG" />
                                </div>
                                    <br /><br /><br /><br /><br />
                                    <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center">جای محصول شما اینجا خالیست</p>

                                    <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">
                                        برای نمایش محصول خود <a href="@ServerDirectory.Host/UserManagment/SignUp">ثبت نام کنید</a>
                                    </p>

                            </div>
                            </div>
                            @{
                                var productTradeList = new Logic.AllCoChain.ProductTradeLogic().GetProductTradeList();
                            }
                            @{
                                for (int i = 0; i < productTradeList.Count; i++)
                                {
                                    var ptradeType = productTradeList[i].TradeType == AllCoChain.Models.TradeType.ProductBuyTrade ? "خرید محصول" : "فروش محصول";
                                    <div class="ca-item ca-item-@(i+2)">
                                        <div class="ca-item-main">
                                            @if (!string.IsNullOrEmpty(productTradeList[i].LogoPath))
                                            {
                                                <div class="ca-icon" style="border:solid #e1e1e1 1px;border-radius:10px;"><img src="@ServerDirectory.UploadVirtual/ProductTradeTrades/@productTradeList[i].LogoPath" style="width:233px; height:189px;" /></div>
                                            }
                                            else
                                            {
                                                <div class="ca-icon" style="border:solid #e1e1e1 1px;border-radius:10px;"></div>
                                            }
                                            <br />
                                            <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center">@productTradeList[i].Name</p>
                                            <h4>
                                        <span class="ca-quote">&ldquo;</span>
                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">نوع تجارت  : @ptradeType</p>
                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">قیمت : @productTradeList[i].Price</p>
                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">نشانی : @productTradeList[i].State - @productTradeList[i].City</p>
                                            </h4><br />
                                            @*<a href="#" class="ca-more" style="align-content:flex-end">ادامه مطلب</a>*@
                                </div>
                                <div class="ca-content-wrapper">
                                    <div class="ca-content">
                                                <h6 style="text-align:center">@productTradeList[i].Name</h6>
                                        <a href="#" class="ca-close">بستن</a>
                                        <div class="ca-content-text">
                                                    <p style="text-align:right">تاریخ انتشار : @productTradeList[i].PulisheDate</p>
                                                    <p style="text-align:right">توضیحات فنی : @productTradeList[i].TechnicalDescription</p>
                                                    <p style="text-align:right">توضیحات بیشتر @productTradeList[i].MoreDescription</p>
                                        </div>
                                        <ul style="float:right">
                                                    <li><a href="#" class="ca-more">ادامه مطلب</a></li>
                                            <li><a href="#">به اشتراک گذاری</a></li>
                                            <li><a href="#">هم اکنون عضو سایت نیستید؟</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                                }
                            }
                            <div class="ca-item ca-item-1">
                                <div class="ca-item-main">
                                    <div class="ca-icon">
                                        <img src="~/Content/CircularContentCarousel/images/eye.png" />
                                    </div>

                                    <br /><br /><br /><br />
                                    <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center;font-size:20px;">مشاهده همه</p>
                                    <br /><br />
                                    <div style="margin-right:20px;">
                                        <h4 style="padding-top:5%;text-align:center;padding-right:30%;">
                                            <a href="#" class="ca-more" style="font-family:IRANSans-Light-web;font-style:normal;">مشاهده همه موارد</a>
                                    </h4>
                                </div>

                                </div>
                            </div>

                        </div>
                                </div>
                                        </div>

                                    </div>
            <div class="fade tab-pane" id="tab2-3">

                <div class="container">
                    <br />
                    <p style="font-size:24px;font-weight:bold;text-align:center;color:#000;">ارائه / دریافت خدمات</p>
                    <br />
                    <div id="ca-container" class="ca-container">
                        <div class="ca-wrapper" id="mc3">

                            <div class="ca-item ca-item-1" id="cart3">
                                <div class="ca-item-main">
                                    <div class="ca-icon">
                                        <img src="~/Content/CircularContentCarousel/images/pluus.PNG" />
                                    </div>
                                    <br /><br /><br /><br /><br />
                                    <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center">جای محصول شما اینجا خالیست</p>

                                    <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">
                                        برای نمایش محصول خود <a href="@ServerDirectory.Host/UserManagment/SignUp">ثبت نام کنید</a>
                                    </p>

                                </div>
                            </div>
                            @{
                                var serviceTradeList = new Logic.AllCoChain.ServiceTradeLogic().GetServiceTradeList();
                            }
                            @{
                                for (int i = 0; i < serviceTradeList.Count; i++)
                                {
                                    var stradeType = serviceTradeList[i].TradeType == AllCoChain.Models.TradeType.ServiceBuyTrade ? "دریافت خدمات" : "ارائه خدمات";
                                    <div class="ca-item ca-item-@(i+2)">
                                <div class="ca-item-main">
                                    <div class="ca-icon"></div>
                                    <br />
                                            <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center">@serviceTradeList[i].Title</p>
                                    <h4>
                                        <span class="ca-quote">&ldquo;</span>
                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">نوع تجارت  : @stradeType</p>
                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">در گروه  : @serviceTradeList[i].Service.Title</p>
                                                <p style="font-family:IRANSans-Light-web;font-style:normal;text-align:center">نشانی : @serviceTradeList[i].State - @serviceTradeList[i].City</p>
                                    </h4>
                                            @*<a href="#" class="ca-more">ادامه مطلب</a>*@
                                </div>
                                <div class="ca-content-wrapper">
                                    <div class="ca-content">
                                                <h6 style="text-align:center">@serviceTradeList[i].Title</h6>
                                        <a href="#" class="ca-close">بستن</a>
                                        <div class="ca-content-text">
                                                    <p style="text-align:right">تاریخ انتشار : @serviceTradeList[i].PulisheDate</p>
                                                    <p style="text-align:right">توضیحات فنی : @serviceTradeList[i].TechnicalDescription</p>
                                                    <p style="text-align:right">توضیحات بیشتر @serviceTradeList[i].MoreDescription</p>
                                        </div>
                                        <ul style="float:right">
                                                    <li><a href="#" class="ca-more">ادامه مطلب</a></li>
                                            <li><a href="#">به اشتراک گذاری</a></li>
                                            <li><a href="#">هم اکنون عضو سایت نیستید؟</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                                }
                            }
                            <div class="ca-item ca-item-1">
                                <div class="ca-item-main">

                                    <div class="ca-icon">
                                        <img src="~/Content/CircularContentCarousel/images/eye.png" />
                                    </div>

                                    <br /><br /><br /><br />
                                    <p style="font-family:IRANSans-Bold-web;color:#000;text-align:center;font-size:20px;">مشاهده همه</p>
                                    <br /><br />
                                    <div style="margin-right:20px;">
                                        <h4 style="padding-top:5%;text-align:center;padding-right:30%;">
                                            <a href="#" class="ca-more" style="font-family:IRANSans-Light-web;font-style:normal;">مشاهده همه موارد</a>
                                    </h4>
                                </div>

                                </div>
                            </div>

                        </div>
                                </div>
                                        </div>

                                    </div>
            <div class="fade tab-pane" id="tab2-4">

                    <span style="font-size:24px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align:center">
                        <h2 class="h2">کاربر گرامی</h2>
                        <br />
                        <br />
                        <p class="p" style="text-align:center">
                         این بخش در حال تکمیل شدن است، لطفا شکیبا باشید
                            </p>
                        <br />
                        <br />
                        <p style="text-align:center">با تشکر، تیم آلکوچین</p> 
                    </span>

                                </div>

    </section>
</div>

1 个答案:

答案 0 :(得分:0)

检查此库:

  

Owl Carousel.

     

触控启用的jQuery插件,可让您创建漂亮的响应   旋转木马滑块。

我最近在工作中使用它,它非常强大并且有很多事件/回调可供使用。您可以随时替换其数据