how to create a responsive carousel - html

Question

I want to create a carousel(class="carousel-inner ") and display an icon(class="scroll-icon") into it. But I cannot make it responsive so the icon's position cannot be responsive. how to make a responsive carousel-inner?
large screen
small screen(blue area belongs to carousel-inner)
<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>

Answer 1

Change top:700px to bottom: 0 on your icon's style attribute:
<img class="scroll-icon" style="position: absolute; z-index: 999999999999; left: 50%; bottom: 0" src="{{asset("/images/scroll.svg")}}"/>
Have in mind that this will move your scroll icon to the bottom of the .banner div.