问题
I would like to re-open this question.
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.
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>
回答1:
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
})
});
});
working example
I think best solution is using owl carousel
PS: in your case col-sm-3 should be replaced with col-xs-2
来源：https://stackoverflow.com/questions/59473558/boostrap-thumbnail-carousel-items-are-not-responsive