2

我为媒体滑块制作了一个引导轮播。此滑块仅接受 YouTube、Vimeo 和图像链接。

这是完整的工作（HTML/CSS/JS）示例：https ://jsfiddle.net/yrkd4fs1/

这也是我的 HTML 代码：

<div id="popup-slider" class="carousel slide popup-slider" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="https://vimeo.com/51701785">Test 1</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://newevolutiondesigns.com/images/freebies/cool-wallpaper-3.jpg">Test 2</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=X36DOTEzjHw">Test 3</a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=FP9xp6S5MAY">Test 4</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=gGHBmi4rfCk">Test 5</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=ComE3Ozdjm4">Test 6</a>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="row">
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=n9Onsk7IBjo">Test 7</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=_Vqbr__8dOE">Test 8</a>
                </div>
                <div class="col-xs-12 col-sm-4">
                    <a href="https://www.youtube.com/watch?v=JwkcGVDlSAM">Test 9</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#popup-slider" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#popup-slider" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

我的问题始于移动设备。我需要以某种方式在移动设备或低于 520 像素的屏幕上的每张幻灯片上仅显示一个视频，然后我在这里堆叠。

怎么做？

4

0 回答 0