提问者:小点点

如何创建响应式轮播


我想创建一个轮播(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>




共1个答案

匿名用户

将图标的style属性上的top:700px更改为bottom:0:

请记住,这将使您的滚动图标移动到。banner div的底部。