如何解决在带有图像和文本的引导程序轮播中,我可以拥有在模式或新浏览器窗口中打开图像的链接吗?
我有一个包含图像和文本的引导程序轮播,我正在尝试在段落内设置一个链接(该链接也可以在同一图像上),以便在新窗口中打开图像。
但我只得到点击后在新窗口中不显示图像(或其他任何内容)的链接。
以下是我使用的代码:
<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/id/1051/300/200" class="d-block w-100" alt="...">
<div class="image-description">
<p>
<a href="https://picsum.photos/id/1051/300/200" target="_blank">Click here</a> to see it bigger
</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/103/300/200" class="d-block w-100" alt="...">
<div class="image-description">
<p>
ble ble ble
</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1039/300/200" class="d-block w-100" alt="...">
<div class="image-description">
<p>
bli bli bli
</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/104/300/200" class="d-block w-100" alt="...">
<div class="image-description">
<p>
blo blo blo
</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/id/1043/300/200" class="d-block w-100" alt="...">
<div class="image-description">
<p>
blu blu blu
</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselFade" 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="#carouselFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
欢迎提供有关如何实现我想要的结果的建议:)
也可以使用 bootstrap modal 来完成(我已经尝试过,但我无法让它工作,这就是我尝试其他策略的原因)。
如果你有办法做到这一点,请告诉我。
谢谢大家!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。