バックグラウンドのスライドショーの問題

Question

私は非常にWebコーディングに新しいので、私はバックグラウンドスライドショーをする必要があります。 しかし、スライドショーコードで私のメインナビゲーションが消えます。ヒアはスライドショーとイメージがどのように見えるかを示すコードです。スライドショー

<div class="bgded overlay";> 
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> 
    <ol class="carousel-indicators"> 
     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> 
     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> 
     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox" class="bgded overlay"> 
     <!-- Slide One - Set the background image for this slide in the line below --> 
     <div class="carousel-item active" style="background-image: url('woodtrails2en.png')"> 
     <div class="carousel-caption d-none d-md-block" class="bgded overlay"> 

     </div> 
     </div> 
     <!-- Slide Two - Set the background image for this slide in the line below --> 
     <div class="carousel-item" style="background-image: url('wall4.png')"> 
     <div class="carousel-caption d-none d-md-block"> 

     </div> 
     </div> 
     <!-- Slide Three - Set the background image for this slide in the line below --> 
     <div class="carousel-item" style="background-image: url('wall2.jpg')"> 
     <div class="carousel-caption d-none d-md-block"> 

     </div> 
     </div> 
    </div> 
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> 
     <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> 
     <span class="carousel-control-next-icon" aria-hidden="true"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 

<!-- ################################################################################################ --> 
    <div id="logo" class="fl_left"> 

    <a href="index.html"><h1><img src="woodluck_EN.png"> <img src="ms.png"></h1></a> 

    </div> 
    <nav id="mainav" class="fl_right"> 
    <ul class="clear"> 

     <li><a href="index.html">Home</a></li> 




     <li><a href="pages\gallery.html">Gallery</a></li> 

     <li><a href="Kontaktai.html">Contact</a></li> 

           <div class="flag" id="flags"> 
     <li><a href="C:\Users\dimen_000\Desktop\Manto\Klientams\garler\index.html">LT</a></li> 
     <li><a href="C:\Users\dimen_000\Desktop\Manto\Klientams\WoodTrails\index.html">EN</a></li> 
     </div> 

    </ul> 
    </div> 
    </nav> 


    <!-- ################################################################################################ --> 
</header> 

と、ここでの写真へ

リンクは、スライドショー

なしコードでありますスライドショーのない写真の

リンクは

<!-- Top Background Image Wrapper --> 

<a href="index.html"><h1><img src="woodluck_EN.png"> <img src="ms.png"></h1></a> 

    </div> 
    <nav id="mainav" class="fl_right"> 
    <ul class="clear"> 

     <li><a href="index.html">Home</a></li> 




     <li><a href="pages\gallery.html">Gallery</a></li> 

     <li><a href="Kontaktai.html">Contact</a></li> 

           <div class="flag" id="flags"> 
     <li><a href="../index.html">LT</a></li> 
     <li><a href="index.html">EN</a></li> 
     </div> 

    </ul> 
    </nav> 

だから私のメインのMAV disapearsは、スライドショーすべてがうまくいけなくて。助けてください男！ありがとう！

Answer 1

Flickityを使用することを強くお勧めします。オープンソースのスライダです。CSSとJSをダウンロードしてファイルに追加するだけです。次に、あらかじめ定義されたクラスを使用します。たとえば...

<div id="slider"> 
     <div class="main-carousel"> 
      <div class="carousel-cell"> 
       <li><img src="#"/></li> 
      </div> 
     </div> 
    </div> 

Answer 2

  <div id="home-slider" class="carousel slide" data-ride="carousel" data- 
     interval="5000"> 
     <div class="carousel-inner"> 
     <div class="item active" style="background-image: url(images/slider/1.jpg)"> 
      <div class="caption"> 
      <h1 class="animated fadeInLeftBig">Na mieru <span>pre Vás</span></h1> 
      <p class="animated fadeInRightBig">Každá naša sauna je originál vyrábaný 
     na mieru pre Vás, podľa Vašich požiadaviek.</p> 
      <a data-scroll class="btn btn-start bttn-stt animated fadeInUpBig" data- 
     scroll-time = 1.25 href="#form_description">Cenová ponuka</a> 
      </div> 
     </div> 
     <div class="item" style="background-image: url(images/slider/2.jpg)"> 
      <div class="caption"> 
      <h1 class="animated fadeInLeftBig">Kvalitné <span>vyhotovenie </span> 
     </h1> 
      <p class="animated fadeInRightBig">Precízne remeselné spracovanie a 
     používanie kvalitných materiálov je pre nás otázkou hrdosti</p> 
      <a data-scroll class="btn btn-start scrol-btn animated fadeInUpBig" 
     data-scroll-time = 1.25 href="#gallery">Galéria</a> 
      </div> 
     </div> 
     <div class="item" style="background-image: url(images/slider/3.jpg)"> 
      <div class="caption"> 
      <h1 class="animated fadeInLeftBig">SKUTOČNE <span>PRÍRODNÉ</span></h1> 
      <p class="animated fadeInRightBig">Ponúkame Vám sauny bez chémie - 
     žiadne lepidlá, chemické nátery a iné škodlivé látky, ktoré by sa pri 
     vysokých teplotách mohli uvoľňovať.</p> 
      <a data-scroll class="btn btn-start animated fadeInUpBig" 
     href="#product" data-scroll-time = 1.25>Prečo EKO?</a> 
      </div> 
     </div> 
     </div> 
     <a class="left-control" href="#home-slider" data-slide="prev"><i 
    class="fa fa-angle-left"></i></a> 
     <a class="right-control" href="#home-slider" data-slide="next"><i 
     class="fa fa-angle-right"></i></a> 

     </div>