0
我正在ASP.NET網站上的滑塊代碼上工作。從頁面主題我看到下面的HTML/JS和CSS。目前顯示兩張幻燈片。如果我嘗試添加一個新的滑塊html併爲這張新幻燈片調整css，則根本不會顯示第三張幻燈片。如何調整滑塊代碼以顯示2個以上的幻燈片
任何想法？ 謝謝，
<script type="text/javascript">
$(function() {
\t $(".camp-tabs").r2iTabs(".camp-slides > .camp-slide", {
\t \t effect: 'fade',
\t \t fadeOutSpeed: "slow",
\t \t rotate: true
\t }).r2iSlideshow({clickable: false, autoplay: true, interval: 6000});
\t $(".promo-scrollable").r2iScrollable({
\t \t circular: true,
\t \t itemsPerFrame: '3',
\t \t next: '.promo-next',
\t \t prev: '.promo-prev'
\t });
\t $('.promo-box').mouseenter(function() {
\t \t $(this).children('.promo-bot').slideDown('fast');
\t }).mouseleave(function() {
\t \t $(this).children('.promo-bot').slideUp('fast');
\t });
\t $('.promo-items').mouseenter(function() {
\t \t $(this).parents('.promos').css({'z-index': 1000});
\t }).mouseleave(function() {
\t \t $(this).parents('.promos').css({'z-index': 1});
\t });
\t $("#twitterScrollable").r2iScrollable({
\t \t circular: true,
\t \t itemsPerFrame: '1',
\t \t next: '.test-next',
\t \t prev: '.test-prev'
\t }).r2iAutoscroll({autoplay:true, interval:6000});
\t
\t $("#highlightScrollable").r2iScrollable({
\t \t circular: true,
\t \t itemsPerFrame: '1',
\t \t next: '.test-next',
\t \t prev: '.test-prev'
\t }).r2iAutoscroll({autoplay:true, interval:6000});
\t $('#formOverlay').r2iOverlay({
\t \t mask: {
\t \t \t opacity: .7,
\t \t \t color: '#000',
\t \t \t loadSpeed: 500,
\t \t \t id: '#videoOverlayMask'
\t \t }
\t });
\t
});
</script>/*--- SLIDER---*/
.camp-wrap {position:relative;}
.camp-wrap .camp-slides {position:relative; height:400px;}
.camp-wrap .camp-slides .camp-slide {position:absolute; top:0; left:0; width:100%; display:none;}
.camp-wrap .camp-slides .camp-slide img {position:absolute; left:50%; margin:0 0 0 -1220px; top:0;}
.camp-wrap .camp-slides .camp-slide .camp-text {z-index:2; position:relative; text-align:center; padding:128px 0 0; margin:0 auto;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still {width:790px; padding-top:75px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-it {width:740px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-pro {width:930px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-serv {width:1090px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-fed {width:950px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-byod {width:860px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-carrier {width:840px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-euc {width:760px;}
.camp-wrap .camp-slides .camp-slide .camp-text .camp-sm {background:url(images/shade.png) repeat; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; font-size:25px; height:50px; line-height:50px; padding:0; margin:0 auto 10px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still .camp-sm {width: 180px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-byod .camp-sm {width: 220px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-carrier .camp-sm {width: 280px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-euc .camp-sm {width: 280px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-it .camp-sm {width:480px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-pro .camp-sm {width:550px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-serv .camp-sm {width:350px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-fed .camp-sm {width:685px;}
.camp-wrap .camp-slides .camp-slide .camp-text .camp-lg {background:url(images/shade.png) repeat; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; text-transform:uppercase; font-size:72px; height:88px; line-height:88px; padding:0; margin:0 0 10px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still .camp-lg {font-size: 72px;height: auto;line-height: 72px;
}
.camp-wrap .camp-slides .camp-slide .camp-text .camp-lg-carrier {background:url(images/shade.png) repeat; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; text-transform:uppercase; font-size:50px; height:68px; line-height:68px; padding:0; margin:0 0 10px;}
.camp-wrap .camp-slides .camp-slide .camp-text.camp-still .camp-lg-carrier {font-size: 50px;height: auto;line-height: 68px;
}
.camp-wrap .camp-slides .camp-slide .camp-text a:link,
.camp-wrap .camp-slides .camp-slide .camp-text a:visited,
.camp-wrap .camp-slides .camp-slide .camp-text a:active {display:block; float:right; background:url(images/shade-hov.png) repeat-x 0 0; font-size:16px; color:#fff; font-family: 'Source Sans Pro', sans-serif; font-weight:700; line-height:32px; height:32px; padding:0 16px 0 20px;}
.camp-wrap .camp-slides .camp-slide .camp-text a:hover {background:url(images/shade-hov.png) repeat-x 0 bottom;}
.camp-wrap .camp-slides .camp-slide .camp-text a span {display:block; height:32px; background:url(images/arrow-white.png) no-repeat right center; padding-right:18px;}
.camp-wrap .camp-tabs {display:none;}
.camp-wrap .arrow {display:block; width:36px; height:40px; position:absolute; top:180px; background:url(images/arrow-camp.png) no-repeat; z-index:1000; cursor:pointer;}
.camp-wrap .backward {left:0; background-position:0 0;}
.camp-wrap .forward {right:0; background-position:-36px 0;}
.camp-wrap .backward:hover {background-position:0 -40px;}
.camp-wrap .forward:hover {background-position:-36px -40px;}<div class="campaign">
<div class="camp-wrap"> <a class="backward arrow"></a>
<div class="camp-slides">
<div class="camp-slide">
<div class="camp-text camp-euc">
<div class="camp-lg">Lorem ipsum</div>
<div class="camp-sm">Lorem ipsum</div>
<a href="/helloworld.aspx"><span>Learn More</span></a> </div>
<img src="<%= SkinPath %>images/banner01" alt="" /> </div>
<div class="camp-slide">
<div class="camp-text camp-carrier">
<div class="camp-lg-carrier">Lorem ipsum</div>
<div class="camp-sm">Lorem ipsum</div>
<a href="/hellospace.aspx"><span>Learn More</span></a> </div>
<img src="<%= SkinPath %>images/Careers-01.jpg" alt="" /> </div>
</div>
<a class="forward arrow"></a>
<div class="camp-tabs"><a href="#"> </a><a href="#"> </a></div>
</div>
</div>