实现滑盖iPhone支持

$('.slider').slider({full_width: true, indicators: false});

.slider #disaster{
  padding-top: 15em;
}

@media screen and (max-width: 800px) {
  .slider #disaster{
    padding-top: 8em;
  }
}

        <!-- SLIDER -->
                <div class="slider" style="height: 100vh;">
                <ul class="slides" style="height: 100vh;">
                        <li style="height: 100vh;">
                            <img src="./images/planning.webp" data-src="./images/planning.webp" class="lazy" style="height: 100vh; width: 100%; object-position: 60% center; object-fit: cover; z-index: -1;"/>
                            <div class="caption left-align" style="padding-top: 10em;">
                                <h2><span style="color: blue">EURO</span>TECH</h2>
                                <h4>It's all about efficiency & safety</h4>
                                <h5>
                                        You can either choose to work <span style="border-bottom: 1px solid red;">harder</span> or you can work <span style="border-bottom: 1px solid blue;">smarter</span>
                                </h5>
                            </div>
                        </li>
                  <li style="height: 100vh;">
                            <img src="images/tunnel.webp" data-src="images/tunnel.webp" class="lazy" style="height: 100vh; width: 100%; object-position: 60% center; object-fit: cover; z-index: -1;"/>
                    <div class="caption left-align">
                                <h2>Real time tracking</h2>
                                <p class="white-text">
                                        <i class="fas fa-check" style="color: #00db25; font-size: 1.3em;"></i> Our devices allows you to track you employee in real time.<br/>
                                        <i class="fas fa-check" style="color: #00db25; font-size: 1.3em;"></i> Gives you full control on your mine personnel.<br/>
                                        <i class="fas fa-check" style="color: #00db25; font-size: 1.3em;"></i> Incase of injuries, you know where to search.<br/>
                                        <i class="fas fa-check" style="color: #00db25; font-size: 1.3em;"></i> Knowing how to deploy your forces.<br/>
                                        <i class="fas fa-check" style="color: #00db25; font-size: 1.3em;"></i> Efficiency at her best.
                                </p>
                    </div>
                  </li>
                  <li style="height: 100vh;">
                            <img src="./images/header.webp" data-src="./images/header.webp" class="lazy" style="height: 100vh; width: 100%; object-position: center center; object-fit: cover; z-index: -1;"/>
                    <div class="caption center-align" id="disaster">
                                <h1><a class="btn-floating pulse" style="background-color: red; width: 50px; height: 50px;"><i class="fas fa-exclamation" style="font-size: 2.3em; margin-top: 7px;"></i></a></h1>
                                <h2>Avoiding the next disaster</h2>
                                <p class="white-text">
                                    Together we can prevent the next case with unique underground tracking devices,<br/>
                                    digital solutions and advanced mining products.
                                </p>
                    </div>
                  </li>
                </ul>
              </div>