How to make a slider from background-image so that the menu does not change?

Question

css

Good afternoon, I decided to make this free template

How to make the first slider so that the pictures and text in the center change, but the navigation remains in place? I did not find it on the Internet
https://codepen.io/comanch/pen/zLgMrx

Answer 1

What exactly didn't work for you?
Create a header that will contain:
The slider will be in the entire header 100% by 100%. The slider contains slides (100% to 100%), which we change. If you don’t know how to write a slider, then take a ready-made solution .
Here is the markup required for the plugin:

<div class="siema">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>
  <div>Hi, I'm slide 4</div>
</div>

Navigation will be pressed to the top . ps or the slider is absolute , while nav is static . As it is more convenient for you ... It does not change the essence. We get the markup:position: absolutetop: 0

<header>
    <section class="slider">
        <div class="slider__slide">  <!-- тут текст и картинка-->  </div>
        <div class="slider__slide">  <!-- тут текст и картинка-->  </div>
        <div class="slider__slide">  <!-- тут текст и картинка-->  </div>
        ....
    </section>
    
    <nav> <!--  тут меню  --> </nav>
</header>

Styles:

header{
    position: relative;
    width: 100%;
    height: 100vh;
}
.slider{
    width: 100%;
    height: 100%;
}
.slider__slide{
    width: 100%;
    height: 100%;
    background: url() cover;
    .....
}


nav{
    position: absolute;
    top: 0;
}

ps something like this if on your knees - https://jsfiddle.net/vg3nb7e0/1/