I am currently working on a website project using ASP.NET MVC Core 1.1.2. I want to create a full-screen slider for the homepage that appears stretched both on desktop and mobile browsers. However, when I view the slider on my browser, there is an annoying gap underneath it as shown below in this example: ():
https://i.sstatic.net/NMQbk.jpg
Here is the section of code related to the slider:
<div class="fullscreenbanner-container">
<div class="fullscreenbanner">
<ul>
<li data-transition="parallaxvertical" data-slotamount="5" data-masterspeed="1000" data-title="Slide 1">
<img src="~/img/index/slider/slider05.jpg" alt="slidebg1" data-bgfit="contain" data-bgposition="top left" data-bgrepeat="no-repeat">
<div class="slider-caption container">
<div class="tp-caption rs-caption-1 sft start"
data-hoffset="0"
data-y="270"
data-speed="800"
data-start="1000"
data-easing="Back.easeInOut"
data-endspeed="300">
AMSTERDAM
<span></span>
</div>