Как сделать слайдер из background-image, чтобы не изменялось меню?

Question

[comanch777]

Добрый день, решил сверстать бесплатный шаблон этот

Как сделать первый слайдер, чтобы менялись картинки и текст, который в центре, а навигация оставалась на месте? в интернете не нашел
https://codepen.io/comanch/pen/zLgMrx

Comments

[Danya Wyse]

Автор, у тебя получилось ? Я просто такой же макет верстаю :D
originalwyse.ru/waxom

Answer 1

[Aleksey Solovyev]

Что именно у Вас не получилось?

Создаете header, который будет в себе содержать:

• Слайдер
  
• Навигацию
  

Слайдер будет во весь header 100% на 100%. В слайдере лежат слайды(100% на 100%), которые мы и меняем. Если не умеете писать слайдер, то берите готовое решение.
Вот разметка, которая нужна для плагина:

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

Навигация будет position: absolute и прижата к верху top: 0.

ps или слайдер absolute, а nav static. Как для Вас удобнее... Сути не меняет.

Получаем разметку:

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

Стили:

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 что-то такое, если на коленках - https://jsfiddle.net/vg3nb7e0/1/