如何制作带有箭头的溢出水平卡片？ （使用引导 4.5）

Posted 2023-02-24

【中文标题】如何制作带有箭头的溢出水平卡片？ （使用引导 4.5）

【英文标题】：How to make an overflow horizontal cards with arrows? (using Bootstrap 4.5)

【发布时间】：2021-04-22 13:00:21

【问题描述】：

我是这样的sn-p（使用引导程序），它可以制作一个可以水平滚动的溢出卡。

<div class="container">
    -- If you look to others for fulfillment, you will never truly be fulfilled. --
    <h4 class="mb-4">Header Title</h4>
    <div class="container-fluid" id="container-scroll">
        <div class="overflow-auto row flex-row flex-nowrap mt-4 pb-4 pt-2">
            <div class="col-md-4 col-sm-6">
                <div class="card" style="width: 20rem;">
                    <img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
                        class="img-fluid rounded">
                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <div class="card-text">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
                                    aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row mt-3">
                                <div class="col">
                                    <p>Rp 20.000.000</p>
                                </div>
                                <div class="col text-right">
                                    <p>4 hari lagi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card" style="width: 20rem;">
                    <img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
                        class="img-fluid rounded">
                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <div class="card-text">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
                                    aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row mt-3">
                                <div class="col">
                                    <p>Rp 20.000.000</p>
                                </div>
                                <div class="col text-right">
                                    <p>4 hari lagi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card" style="width: 20rem;">
                    <img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
                        class="img-fluid rounded">
                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <div class="card-text">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
                                    aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row mt-3">
                                <div class="col">
                                    <p>Rp 20.000.000</p>
                                </div>
                                <div class="col text-right">
                                    <p>4 hari lagi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="card" style="width: 20rem;">
                    <img src="https://imgix.kitabisa.com/8bd765d4-2fa3-4ba5-a983-7d1ddee51705.jpg?ar=16:9&w=280&auto=format,compress"
                        class="img-fluid rounded">
                    <div class="card-body">
                        <h5 class="card-title">Card Title</h5>
                        <div class="card-text">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" style="width: 30%" aria-valuenow="30"
                                    aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="row mt-3">
                                <div class="col">
                                    <p>Rp 20.000.000</p>
                                </div>
                                <div class="col text-right">
                                    <p>4 hari lagi</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</div>

现场演示可以在这里看到：https://codepen.io/yehezkiel-g/pen/vYXbmxQ

现在的问题是我想为导航制作左右箭头，如下图所示。

对此有什么建议吗？顺便说一句，我正在使用 Laravel Livewire。谢谢 :D

【参考方案1】：

这将对您有所帮助。 制作轮播，上一个/下一个按钮：

<a class="btn btn-secondary-outline prev" href="" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
<a class="btn btn-secondary-outline next" href="" title="more"><i class="fa fa-lg fa-chevron-right"></i></a>

https://getbootstrap.com/docs/4.0/components/carousel/

https://www.codeply.com/go/WEbiqQvGhy

【讨论】：

codepen.io/yehezkiel-g/pen/zYKezxL 这样？？？箭头存在，但无法导航内容。如果我在这个 sn-p 中错了，请纠正我