如何在桌面上制作带有4张幻灯片的轮播仅在移动设备上显示一张幻灯片？

Question

如何在移动设备上显示带有4张幻灯片的旋转木马切换到一张幻灯片和箭头？

我的轮播使用HTML，CSS，JS

创建

这是HTML代码：

                       <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                <!-- First image from slider -->
                                                    <img src="assets/images/iv.jpeg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                    <img src="assets/images/dm.jpeg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                    <img src="assets/images/b.jpeg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                    <img src="assets/images/cc.jpeg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="item">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                    <img src="assets/images/dc.jpg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                    <img src="assets/images/da.jpeg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                    <img src="assets/images/ptd.jpeg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="port_item xs-m-top-30">
                                                <div class="port_img">
                                                    <img src="assets/images/dro.jpeg" alt="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                            <i class="fa fa-angle-left" aria-hidden="true"></i>
                            <span class="sr-only">Previous</span>
                        </a>

                        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                            <i class="fa fa-angle-right" aria-hidden="true"></i>
                            <span class="sr-only">Next</span>
                        </a>

以上代码基本上是显示图像。一个listbox显示4张图片。当用户点击Next箭头时，它会滑动到下一张幻灯片并显示另外4张图片。

如何更改它，以便在为移动显示屏触发max-width时，轮播将变为响应状态，并且仅在4张幻灯片上显示1张幻灯片。

目前我的@media (max-width: 400px)并未包含任何内容。 通过使用HTML中提供的类名，您可以帮我写几行来解​​决移动设备的问题。

我还添加了一些图片供参考。 - Desktop Carousel Display - Mobile Carousel Display