我想创建一个轮播(class=“carousel-inner”)并在其中显示一个图标(class=“scroll-icon”)。但是我不能让它响应,所以图标的位置不能响应。如何做出一个反应灵敏的旋转木马-内部?
大屏幕
小屏幕(蓝色区域属于旋转木马-内部)
<div class="home">
<div class="banner">
<div id="carouselExampleSlidesOnly" class="carousel slide d-none d-md-block " data-ride="carousel">
<div class="carousel-inner " style="height: 1300px ">
<div class="carousel-item active" data-aos="fade-in">
<img class="d-block w-100 img-fluid" data-aos="fade-down" src="{{asset('images/home/deneme.jpg')}}" alt="First slide" >
</div>
<div class="carousel-item" data-aos="fade-in">
<img class="d-block w-100 img-fluid" data-aos="fade-in" src="{{asset('images/home/carousel2.jpg')}}" alt="Second slide">
</div>
<div class="carousel-item" data-aos="fade-in">
<img class="d-block w-100 img-fluid" data-aos="fade-in" src="{{asset('images/home/carousel3-2.jpg')}}" alt="Third slide">
</div>
</div>
</div>
<img class="scroll-icon" style="position: absolute; z-index: 999999999999; left: 50%; top:700px" src="{{asset("/images/scroll.svg")}}"/>
</div>
将图标的style
属性上的top:700px
更改为bottom:0
:
请记住,这将使您的滚动图标移动到。banner div的底部。