one page html can't load slider image properly!

Hello dear Canvas support team,

The template works perfect for my website! It has everything I need!

I only have some basic html and css knowledge so i would need your help on some problems that are beyond my limit!
Thanks in advance!

I use one page. html and i did download the updated html from your dropbox to make sure it can use as a "index. html".
I found myself having problem:

1. not loading the images, even though i upload image to hosting site! you can find my folder sturcture as attachments
   here is the html (i only copy the first slide image html)

   <section id="slider" class="slider-element slider-parallax swiper_wrapper full-screen clearfix" data-autoplay="7000" data-speed="650" data-loop="true">

      <div class="slider-parallax-inner">
   
          <div class="swiper-container swiper-parent">
              <div class="swiper-wrapper">
                  <div class="swiper-slide dark" style="background-image: url('images/slider/swiper/2018_slider_1.jpg');">
                      <div class="container clearfix">
                          <div class="slider-caption slider-caption-center">
                              <h2 data-caption-animate="fadeInUp">Welcome to Canvas</h2>
                              <p class="d-none d-sm-block" data-caption-animate="fadeInUp" data-caption-delay="200">Create just what you need for your Perfect Website. Choose from a wide range of Elements & simply put them on our Canvas.</p>
                          </div>
                      </div> 
   

2. styling css seems broken and one wired thing is if i circle back the image (from 3-1), it will pop up the third image with not right css styling.

Thank you very much for your help!

the missed second screenshot!