Background slideshow issue - html

Question

I'm very new to web coding and i need to make background slide show.
But with slideshow code my main navigation disappears. Heare is my code with slide show and image how it looks.
link to photo with slideshow
<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">
<h1><img src="woodluck_EN.png"> <img src="ms.png"></h1>
</div>
<nav id="mainav" class="fl_right">
<ul class="clear">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<div class="flag" id="flags">
<li>LT</li>
<li>EN</li>
</div>
</ul>
</div>
</nav>
<!-- ################################################################################################ -->
</header>
and here is code without slideshow
link of photo without slideshow
<!-- Top Background Image Wrapper -->
<h1><img src="woodluck_EN.png"> <img src="ms.png"></h1>
</div>
<nav id="mainav" class="fl_right">
<ul class="clear">
<li>Home</li>
<li>Gallery</li>
<li>Contact</li>
<div class="flag" id="flags">
<li>LT</li>
<li>EN</li>
</div>
</ul>
</nav>
So my main mav disapears, without slideshow everything goes well. Please help guy! Thanks!

Answer 1

I highly suggest using Flickity it is an open source slider all you have to do is download the CSS and JS for it and add them to your files. Then use predefined classes with them. For example...
<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>