Question

我正在使用ASP.NET网站上的滑块代码。从页面主题我看到以下html / js和CSS。目前显示两张幻灯片。如果我尝试添加新的滑块html并为此新幻灯片调整css，则根本不会显示第三张幻灯片。

有什么想法吗？谢谢，

＆＃13;

<script type="text/javascript">
$(function () {
	$(".camp-tabs").r2iTabs(".camp-slides > .camp-slide", {
		effect: 'fade',
		fadeOutSpeed: "slow",
		rotate: true
	}).r2iSlideshow({clickable: false, autoplay: true, interval: 6000});
	$(".promo-scrollable").r2iScrollable({
		circular: true,
		itemsPerFrame: '3',
		next: '.promo-next',
		prev: '.promo-prev'
	});
	$('.promo-box').mouseenter(function() {
		$(this).children('.promo-bot').slideDown('fast');
	}).mouseleave(function() {
		$(this).children('.promo-bot').slideUp('fast');
	});
	$('.promo-items').mouseenter(function() {
		$(this).parents('.promos').css({'z-index': 1000});
	}).mouseleave(function() {
		$(this).parents('.promos').css({'z-index': 1});
	});
	$("#twitterScrollable").r2iScrollable({
		circular: true,
		itemsPerFrame: '1',
		next: '.test-next',
		prev: '.test-prev'
	}).r2iAutoscroll({autoplay:true, interval:6000});
	
	$("#highlightScrollable").r2iScrollable({
		circular: true,
		itemsPerFrame: '1',
		next: '.test-next',
		prev: '.test-prev'
	}).r2iAutoscroll({autoplay:true, interval:6000});
	$('#formOverlay').r2iOverlay({
		mask: {
			opacity: .7,
			color: '#000',
			loadSpeed: 500,
			id: '#videoOverlayMask'
		}
	});
	
});
</script>

＆＃13;

/*--- 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;}

＆＃13;

<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="#">&nbsp;</a><a href="#">&nbsp;</a></div>
    </div>
  </div>

＆＃13;

Answer 1

我错过了一个重要的细节。对于新幻灯片，我添加了div容器：

      <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="/thirdslide.aspx"><span>Learn More</span></a> </div>
      <img src="<%= SkinPath %>images/thirdslide.jpg" alt="" /> </div>

但是我忘了调整camp-tabs部分。

<div class="camp-tabs"><a href="#">&nbsp;</a><a href="#">&nbsp;</a><a href="#">&nbsp;</a></div>

如何调整滑块代码以显示2个以上的幻灯片

1 个答案: