我有一些选项卡，上面有几个 slider 。我想动态更改 slider 内容。
我使用 ASP.NET MVC 5，我的数据类型格式是 JSON。
如何在每个选项卡中创建动态 slider ？
<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">“</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">“</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">“</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>
最佳答案
检查这个库:
Owl Carousel.
Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
我最近在工作中使用它，它非常强大并且有很多事件/回调可以玩。您当然可以即时替换其数据
关于javascript - 如何使用 JQuery 创建动态 slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41260695/