Question

我对网络编码非常陌生，我需要制作背景幻灯片。但是使用幻灯片代码，我的主导航消失了。 Heare是我的代码，带有幻灯片放映和图像外观。

使用幻灯片显示链接到照片

<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>

背景幻灯片问题

2 个答案: