Boostrap缩略图轮播项目无响应 [英] Boostrap Thumbnail Carousel Items are not responsive
本文介绍了Boostrap缩略图轮播项目无响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想重新打开此问题。
我有一个引导缩略图轮播，在桌面上效果很好。旋转木马内部的容器旋转3个div，每个div包含6张图像。
I have a bootstrap thumbnail carousel that works great on a desktop. The carousel-inner container rotates through 3 item divs, each containing 6 images.
随着屏幕变小，容器也变小，但仍显示所有图像。在某个时刻（在电话上），这6张图像无法再水平显示，因此它们将垂直显示。但是我想显示的是一次6张图像中的1张，并滚动浏览它们。
As the screen gets smaller, the container also gets smaller but still shows all images. At some point (on a phone) the 6 images can no longer be rendered horizontally, so they are rendered vertically. But what I'd rather show is 1 of the 6 images at a time and scroll through them.
这是我想出的页面。如果您在移动设备上查看它，就会发现问题。
Here's the page I've come up with. If you view it on a mobile device, you'll see the problem.
这是我正在使用的代码。有人可以建议一种获得所需的响应输出的方法吗？
Here's the code I'm using. Can anyone suggest a way to get the desired responsive output?
<script>
$(document).ready(function () {
$('#myCarousel').carousel({
interval: 3000
})
$('#myCarousel').on('slid.bs.carousel', function () {
//alert("slid");
});
});
</script>
<div class="container">
<div class="col-md-12">
<!---h1>Bootstrap 3 Thumbnail Slider</h1--->
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active img-responsive">
<div class="row">
<div class="col-xs-2">
<asp:Hyperlink ID="hyperlink1" runat="server" NavigateUrl="~/images/AZT/Superstition.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/Superstition.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-xs-2">
<asp:Hyperlink ID="hyperlink4" runat="server" NavigateUrl="~/images/AZT/MariHorse.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/MariHorseThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-xs-2">
<asp:Hyperlink ID="hyperlink8" runat="server" NavigateUrl="https://blog.jacobemerick.com/hiking/deer-creek-along-the-mazatzal-divide/" Target="_blank">
<asp:Image runat="server" src="../images/AZT/WideTrailMaz.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-xs-2">
<a title="Alan Levine from Strawberry, United States [CC BY 2.0 (https://creativecommons.org/licenses/by/2.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Mazaztal_Peaks.jpg" target="_blank"><img width="150" alt="Mazaztal Peaks" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Mazaztal_Peaks.jpg/512px-Mazaztal_Peaks.jpg"></a>
</div>
<div class="col-xs-2">
<a title="Desertrat143 [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:4_Peaks_with_snow.jpg" target="_blank"><img width="150" alt="4 Peaks with snow" class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/4_Peaks_with_snow.jpg/512px-4_Peaks_with_snow.jpg"></a>
</div>
<div class="col-xs-2">
<asp:Hyperlink ID="hyperlink9" runat="server" NavigateUrl="https://blog.jacobemerick.com/hiking/deer-creek-along-the-mazatzal-divide/" Target="_blank">
<asp:Image runat="server" src="../images/AZT/DeerCreekMaz.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink11" runat="server" NavigateUrl="https://blog.jacobemerick.com/hiking/deer-creek-along-the-mazatzal-divide/" Target="_blank">
<asp:Image runat="server" src="../images/AZT/BearSpringMaz.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink12" runat="server" NavigateUrl="https://blog.jacobemerick.com/hiking/deer-creek-along-the-mazatzal-divide/" Target="_blank">
<asp:Image runat="server" src="../images/AZT/188Maz.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink13" runat="server" NavigateUrl="~/images/AZT/SunnyEnjoyingView.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/SunnyEnjoyingViewThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink14" runat="server" NavigateUrl="~/images/AZT/CraggyTree.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/CraggyTree.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink15" runat="server" NavigateUrl="~/images/AZT/FourPeaks.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/FourPeaksThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink16" runat="server" NavigateUrl="~/images/AZT/OlivSnow.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/OliviaSnowThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
<div class="item">
<div class="row">
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink17" runat="server" NavigateUrl="~/images/AZT/log.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/LogThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink18" runat="server" NavigateUrl="~/images/AZT/JimVickieSteveObelisk.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/JimVickieSteveObeliskThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink19" runat="server" NavigateUrl="~/images/AZT/reavisranch.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/reavisranch.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink20" runat="server" NavigateUrl="~/images/AZT/SunnySteveFunnyPose.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/SunnySteveFunnyPose.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink21" runat="server" NavigateUrl="~/images/AZT/AlexEnjoyingView.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/AlexEnjoyingViewThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
<div class="col-sm-2">
<asp:Hyperlink ID="hyperlink22" runat="server" NavigateUrl="~/images/AZT/Flowers.jpg" Target="_blank">
<asp:Image runat="server" src="../images/AZT/FlowersThumb.jpg" alt="MissingImage" class="img-responsive" width="150px"></asp:Image>
</asp:Hyperlink>
</div>
</div>
<!--/row-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" style="color:yellow"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" style="color:yellow"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>
推荐答案
可能不是最佳解决方案：
may be not best solution :
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 10000
})
$('#myCarousel').on('slid.bs.carousel', function() {
//alert("slid");
});
defaultContent = ""
$(window).resize(function() {
if(defaultContent == "")
{
defaultContent = $('.carousel-inner').html()
}
if (window.innerWidth < 800 && $('.col-sm-3').length) {
$('.col-sm-3').addClass('item')
tmphtml = ""
$('.col-sm-3').each(function(index) {
$(this).html($(this).find('a').html() + '<div class="carousel-caption"></div>')
$(this).removeClass('col-sm-3')
})
$('.row').each(function(index) {
tmphtml += $(this).html()
})
$('.carousel-inner').html(tmphtml)
$($('.item').first()).addClass('active')
} else if (window.innerWidth > 800){
$('.carousel-inner').html(defaultContent)
}
$('#myCarousel').carousel({
interval: 10000
})
});
});
我认为最好的解决方案是使用猫头鹰传送带
I think best solution is using owl carousel
PS：在您的情况下 col -sm-3 应该替换为 col-xs-2
PS: in your case col-sm-3 should be replaced with col-xs-2
这篇关于Boostrap缩略图轮播项目无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
