HTML video ve resim slayt sorunu ?

Merhaba arkadaşlar yapmak istediğim video'lar slayt olarak dönüyor. bunların arısına resim'de eklemek istiyorum örneğin 2 video 1 resim 3 video 1 resim, (resimlere örneğin 5 saniye belirliyeyim resim 5 saniye bekledikten sonra videoya veya sırada resim varsa yine resime geçsin.)

Yardımcı olabilecek arkadaş varmı ?

kullandığım kod :

<section id="lab_video_slider">
  <div class="container-fluid">
    <div class="row">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

      <!-- Link Swiper's CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/css/swiper.min.css">
	  <link rel="stylesheet" href="a.css">

      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div id="slide_one" class="swiper-slide">
            <!-- VIDEO -->
            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="https://dl.dropbox.com/s/pjopy0mu4klisat/working-with-espresso.jpg">
			  <source src="https://dl.dropbox.com/s/931244iox7i0fpk/working-with-espresso.mp4" type="video/mp4">
                <source src="https://dl.dropbox.com/s/g3mo3w34pb8pp2l/working-with-espresso.webm" type="video/webm">
                  <source src="https://dl.dropbox.com/s/p37f0avio0x6bs8/working-with-espresso.ogv" type="video/ogg">
				  

            </video>
			
            <!-- END VIDEO -->
          </div>

          <div id="slide_two" class="swiper-slide">
  <div id="lab_video_text_overlay">
    <div class="container">

    </div>
  </div>
  <!-- end #lab_overlay -->

            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="https://dl.dropbox.com/s/ijyaav8qzkdtyt5/lab-coding-screenshot.jpg">      
	  <source type="video/mp4" src="https://dl.dropbox.com/s/5z4jupv385iboiu/lab-coding.mp4">
        <source src="https://dl.dropbox.com/s/5z4jupv385iboiu/lab-coding.mp4" type="video/mp4">
          <source src="https://dl.dropbox.com/s/79msa1jcni374v8/lab-coding.webm" type="video/webm">
            <source src="https://dl.dropbox.com/s/7bq2tyma5de88bt/lab-coding.ogg" type="video/ogg">
            </video>
          </div>

          <div id="slide_three" class="swiper-slide">
             <!-- VIDEO -->
            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="https://dl.dropbox.com/s/5aeyg9ntj1fs8v1/typing-numbers.jpg">
			 <source src="https://dl.dropbox.com/s/xmosdvoleruexky/typing-numbers.mp4" type="video/mp4">
                <source src="https://dl.dropbox.com/s/13z1t97pcvka88k/typing-numbers.webm" type="video/webm">
                  <source src="https://dl.dropbox.com/s/5pyuc35wnv5khe1/typing-numbers.ogv" type="video/ogg">
            </video>
            <!-- END VIDEO -->
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
      </div>

      <!-- Swiper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.2.5/js/swiper.min.js"></script>

      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            spaceBetween: 30,
            autoplay: 5000,
            autoplayDisableOnInteraction: false
        });
      </script>
    </div>
    <!-- end .row -->
  </div>
  <!-- end .container-->
  </div>
  <!-- end #section -->
  <marquee direction="left" onmouseover="" onmouseout="this.start();this.setAttribute('scrollamount', 7, 0);" scrollamount="7" behavior="scroll" style="max-height:250px;border:20px solid #aaa;background-color:#FF0000;color:#FFFFFF !important;border-color:#FF0000 !important;"><font size="6">
<b>Kayan Yazı</b></font></marquee>

Şöyle bir şey yaptım ama istediğiniz bunun gibi bir şey mi: https://codepen.io/anon/pen/mqzPYJ

Evet hocam tam olarak bu ancak mesala 2 tane daha resim eklemek istiyorum yada 2 resim 1 video daha bunları nasıl ekleyebilirim ?

swiper-wrapper class'ına sahip div içerisine istediğiniz kadar ekleyebilirsiniz. Eklediğiniz div'e swiper-slide class'ını eklemeniz gerekiyor. Mesela en sona 2 resim daha ekledim: https://codepen.io/anon/pen/KyGObP

Resim eklemek için alttaki div'i(ID'sini değiştirerek) kullanabilirsiniz.

<div id="slide_six" class="swiper-slide">
            
     <img src="https://www.w3schools.com/css/trolltunga.jpg"/>
            
</div>

Video için herhangi bir video div'ini kopyalayıp gerekli değişiklikleri(source, id) yapmanız gerekiyor. Mesela şu:

<div id="slide_four" class="swiper-slide">
            <!-- VIDEO -->
            <video class="slider-video" width="100%" preload="auto" loop="" autoplay="" style="visibility: visible; width: 100%;" poster="https://dl.dropbox.com/s/5aeyg9ntj1fs8v1/typing-numbers.jpg">
          <source src="https://dl.dropbox.com/s/xmosdvoleruexky/typing-numbers.mp4" type="video/mp4">
                <source src="https://dl.dropbox.com/s/13z1t97pcvka88k/typing-numbers.webm" type="video/webm">
                  <source src="https://dl.dropbox.com/s/5pyuc35wnv5khe1/typing-numbers.ogv" type="video/ogg">
            </video>
            <!-- END VIDEO -->
          </div>