将链接放在滑块中

问题描述 投票:-3回答:2

我试图在这个滑块上放置链接:https://www.codeply.com/go/3EQkUOhhZz

我试过但是图像越来越小并且出现了一些错误。

所以我需要在滑块上添加一个href图像

HTML

<div class="container text-center my-3">
<div class="row mx-auto my-auto">
    <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
        <div class="carousel-inner w-100" role="listbox">
            <div class="carousel-item active">
                <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=1">
            </div>
            <div class="carousel-item">
                <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=2">
            </div>
            <div class="carousel-item">
                <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=3">
            </div>
            <div class="carousel-item">
                <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=4">
            </div>
            <div class="carousel-item">
                <img class="d-block col-3 img-fluid" src="http://placehold.it/350x180?text=5">
            </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

CSS

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
 display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(25%);
}
.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
transform: translateX(-25%);
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
transform: translateX(0);
}
html css
2个回答
2
投票

d-block col-3放到锚标签而不是img

<a href="#" class="d-block col-3"><img class="img-fluid" src="http://placehold.it/350x180?text=1"></a>

0
投票

更新您的标记如下:

<div class="container text-center my-3">
    <h2>Bootstrap 4 Multiple Item Carousel</h2>
    <div class="row mx-auto my-auto">
        <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
            <div class="carousel-inner w-100" role="listbox">
                <div class="carousel-item active">
                    <a href="#" class="d-block col-3"><img class="img-fluid" src="http://placehold.it/350x180?text=1"></a>
                </div>
                <div class="carousel-item">
                    <a href="#" class="d-block col-3"><img class="img-fluid" src="http://placehold.it/350x180?text=2"></a>
                </div>
                <div class="carousel-item">
                    <a href="#" class="d-block col-3"><img class="img-fluid" src="http://placehold.it/350x180?text=3"></a>
                </div>
                <div class="carousel-item">
                    <a href="#" class="d-block col-3"><img class="img-fluid" src="http://placehold.it/350x180?text=4"></a>
                </div>
                <div class="carousel-item">
                    <a href="#" class="d-block col-3"><img class="img-fluid" src="http://placehold.it/350x180?text=5"></a>
                </div>
                <div class="carousel-item">
                    <a href="#" class="d-block col-3"><img class="img-fluid" src="http://placehold.it/350x180?text=6"></a>
                </div>
            </div>
            <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <h4>Advances one slide at a time</h4>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.