我试图在桌面上连续显示10张图片,在平板电脑中连续显示5张图片,点击下一步按钮我想显示剩余的5张图片。在手机中,我想要显示一张图像。< / p>
但问题是当我点击平板电脑视图中的下一个按钮时,它不起作用而不显示下一组图像。
我正在尝试在jquery中为div添加活动类。
这是我的代码,
脚本:
$(document).ready(function () {
if ($(window).width() < 768) {
$('[id^="icon_FirstSet_"]').removeClass('active');
$('[id^="icon_SecSet_"]').removeClass('active');
$('#icon_FirstSet_1').addClass('active');
// small screens
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
$('[id^="icon_FirstSet_"]').removeClass('active');
$('[id^="icon_SecSet_"]').removeClass('active');
$('[id^="icon_FirstSet_"]').addClass('active');
//medium screens
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
$('[id^="icon_FirstSet_"]').removeClass('active');
$('[id^="icon_SecSet_"]').removeClass('active');
$('[id^="icon_FirstSet_"]').addClass('active');
$('[id^="icon_SecSet_"]').addClass('active');
// big screens
}
else {
$('[id^="icon_FirstSet_"]').removeClass('active');
$('[id^="icon_SecSet_"]').removeClass('active');
$('[id^="icon_FirstSet_"]').addClass('active');
$('[id^="icon_SecSet_"]').addClass('active');
// huge screens
}
$('.carousel').carousel();
});
代码:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner " role="listbox">
<div class="item" id="icon_FirstSet_1">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 " >
<div id="divslide1" >
<a id="lnkslide1" href="#lnkslide1">
<div>
<img id="imgslide1" src="~/Content/Images/App/Onslide1.png" />
</div>
</a>
</div>
</div>
</div>
<div class="item" id="icon_FirstSet_2">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide2" href="#lnkslide2">
<div>
<img id="imgslide2" src="~/Content/Images/App/slide2.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_FirstSet_3">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide3" href="#lnkslide3">
<div>
<img id="imgSlide3" src="~/Content/Images/App/Slide3.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_FirstSet_4">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide4" href="#lnkslide4">
<div>
<img id="imgslide4" src="~/Content/Images/App/slide4.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_FirstSet_5">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide5" href="#lnkslide5">
<div>
<img id="imgslide5" src="~/Content/Images/App/slide5.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_SecondSet">
<div class="item" id="icon_SecondSet_1">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12 ">
<a id="lnkslide6" href="#lnkslide6">
<div>
<img id="imgslide6" src="~/Content/Images/App/slide6.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_SecondSet_2">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide7" href="#lnkslide7">
<div>
<img id="imgslide6" src="~/Content/Images/App/slide7.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_SecondSet_3">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide8" href="#lnkslide8">
<div>
<img id="imgslide8" src="~/Content/Images/App/slide8.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_SecondSet_4">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide9" href="#lnkslide9">
<div>
<img id="imgslide9" src="~/Content/Images/App/slide9.png" />
</div>
</a>
</div>
</div>
<div class="item" id="icon_SecondSet_4">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-12 ">
<a id="lnkslide10" href="#lnkslide10">
<div>
<img id="imgslide10" src="~/Content/Images/App/slide10.png" />
</div>
</a>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" >
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
任何人都可以帮忙吗?提前谢谢!