Bootstrap 缩略图轮播项目没有响应答案

【问题标题】：Boostrap Thumbnail Carousel Items are not responsiveBootstrap 缩略图轮播项目没有响应
【发布时间】：2020-04-15 19:39:14
【问题描述】：

我想重新打开this question。

我有一个在桌面上运行良好的引导缩略图轮播。 carousel-inner 容器在 3 个项目 div 中旋转，每个 div 包含 6 个图像。

随着屏幕变小，容器也会变小，但仍会显示所有图像。在某些时候（在手机上），这 6 个图像无法再水平渲染，因此它们被垂直渲染。但我更愿意一次显示 6 张图片中的 1 张并滚动浏览它们。

Here's the page I've come up with。如果您在移动设备上查看它，就会发现问题。

这是我正在使用的代码。任何人都可以提出一种获得所需响应输出的方法吗？

    <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>

【问题讨论】：

标签： carousel responsive

【解决方案1】：

可能不是最佳解决方案：

$(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

我认为最好的解决方案是使用owl carousel

PS：在您的情况下，col-sm-3 应替换为 col-xs-2

【讨论】：