carousel - Boostrap 缩略图轮播项目没有响应
问题描述
我想重新打开这个问题。
我有一个在桌面上运行良好的引导缩略图轮播。carousel-inner 容器在 3 个项目 div 中旋转，每个 div 包含 6 个图像。
随着屏幕变小，容器也会变小，但仍会显示所有图像。在某些时候（在手机上），这 6 个图像无法再水平渲染，因此它们被垂直渲染。但我更愿意一次显示 6 张图像中的 1 张并滚动浏览它们。
这是我想出的页面。如果您在移动设备上查看它，您会发现问题所在。
这是我正在使用的代码。任何人都可以提出一种获得所需响应输出的方法吗？
<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>
解决方案
可能不是最好的解决方案：
$(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
})
});
});
我认为最好的解决方案是使用owl carousel
PS：在你的情况下col-sm-3应该替换为col-xs-2
推荐阅读
- python - 网络如何从这一行抓取数据.. 没有我找不到的 div 和类元素。我想从那行提取数据？如何
- angular - subscribe 方法中的箭头函数正在被立即调用
- version-control - 如何使用 monorepo 管理代码库权限？
- go - go-staticcheck：从不使用文件的值 (SA4006)
- maven - 用户如何在 Jenkins 中使用多个浏览器运行 Selenium-TestNG-Maven 项目
- matlab - 在 Matlab 中删除 >>
- grafana - LogQL 中的 Topk 值
- kubernetes - istio-ingressgateway LoadBalancer 在 AWS EC2 实例 k8s 中显示“待处理”
- linux - 如何在shell脚本中打印特殊字符后的每个单词
- javascript - Puppeteer vs. Chrome：THREE.js 中的“additive”混合模式的 WebGL alpha 问题