0
<section class="slider">
    <div class="carousel" id="carousel">
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
    <button href="#" class="btn btn--head">Get Started</button>
        </div>
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
        <button href="#" class="btn btn--head">Get Started</button>
        </div>
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
    <button href="#" class="btn btn--head">Get Started</button>
        </div>
    </div>
        <img src="img/arrow.svg" alt="" class="arrow arrow--left" onclick="prevSlide()">
        <img src="img/arrow.svg" alt="" class="arrow arrow--right" onclick="nextSlide()">
        <div class="dots">
            <div class="dots-item active"></div>
            <div class="dots-item"></div>
            <div class="dots-item"></div>
        </div>
</section>

.slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5); 
    background: url("../../img/back.png") no-repeat center top;
}

.carousel {
    width: 300%;
    position: absolute;
    top: 0;
    left: 0%;
    height: 100%;
    display: flex;
    transition: .3s ease-out;
    text-align: center;
    -ms-align-items: center;
    align-items: center;
    margin: 381px 0;
}

.carousel-item {
    width: calc(100% / 3);
    height: 100%;
}

.carouserl-item img {
    width: 100%;
    height: 100%;
}
.arrow {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, .3);
    padding: 15px;
    border-radius: 50%;
    top: calc(50% - 35px);
    cursor: pointer;
}

.arrow--left {
    left: 5%;
}

.arrow--right {
    right: 5%;
    transform: rotate(180deg);
}

.dots {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 2;
    bottom: 20px;
    width: 100%;
}

.dots-item {
    width: 15px;
    height: 15px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 50px;
    cursor: pointer;
    margin: 0 5px;
    transition: .2s ease-out;
}

.dots-item.active {
    border: 2px solid rgba(0, 0, 0, .7);
    background-color: transparent;
}

.slider-item {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    animation: fade .3s ease-out;
}

.slider-item.active {
    display: block;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Слайдер работает как надо, но как расположить кнопку под текстом? Она у меня идет справа от .sm, надо чтоб по середине введите сюда описание изображения

1
  • а если просто обернуть в тег div тогда она сама упадёт в низ
    – user33274
    14 мая 2018 в 14:36

2 ответа 2

1

Для button добавляете следующий стиль:

button { display: inline-block; position: absolute; top: 50px; left: 15%; }

Превосходно работает для десктопной версии. Для адаптивности нужно менять значения свойств.

.slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-attachment: fixed;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.5); 
    background: url("../../img/back.png") no-repeat center top;
}

.carousel {
    width: 300%;
    position: absolute;
    top: 0;
    left: 0%;
    height: 100%;
    display: flex;
    transition: .3s ease-out;
    text-align: center;
    -ms-align-items: center;
    align-items: center;
    margin: 381px 0;
}

.carousel-item {
    width: calc(100% / 3);
    height: 100%;
}

.carouserl-item img {
    width: 100%;
    height: 100%;
}
.arrow {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, .3);
    padding: 15px;
    border-radius: 50%;
    top: calc(50% - 35px);
    cursor: pointer;
}

.arrow--left {
    left: 5%;
}

.arrow--right {
    right: 5%;
    transform: rotate(180deg);
}

.dots {
    position: absolute;
    display: flex;
    justify-content: center;
    z-index: 2;
    bottom: 20px;
    width: 100%;
}

.dots-item {
    width: 15px;
    height: 15px;
    background-color: rgba(0, 0, 0, .7);
    border-radius: 50px;
    cursor: pointer;
    margin: 0 5px;
    transition: .2s ease-out;
}

.dots-item.active {
    border: 2px solid rgba(0, 0, 0, .7);
    background-color: transparent;
}

.slider-item {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: none;
    animation: fade .3s ease-out;
}

.slider-item.active {
    display: block;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
button {

  position: absolute;
  top: 50px;
  left: 15%;
}
голос «против»
избранное
<section class="slider">
    <div class="carousel" id="carousel">
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
    <button href="#" class="btn btn--head">Get Started</button>
        </div>
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
        <button href="#" class="btn btn--head">Get Started</button>
        </div>
        <div class="carousel-item">
            <span class="banner__text">Unique and Modern Design 3</span>
        <span class="lg">Portfolio PSD Template</span>
        <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
    <button href="#" class="btn btn--head">Get Started</button>
        </div>
    </div>
        <img src="img/arrow.svg" alt="" class="arrow arrow--left" onclick="prevSlide()">
        <img src="img/arrow.svg" alt="" class="arrow arrow--right" onclick="nextSlide()">
        <div class="dots">
            <div class="dots-item active"></div>
            <div class="dots-item"></div>
            <div class="dots-item"></div>
        </div>
</section>

0

Как я предложил в комментарии обернуть просто в div

смотреть во весь экран

.slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-attachment: fixed;
  background-size: cover;
  background-blend-mode: multiply;
  background-color: rgba(0, 0, 0, 0.5);
  background: url("../../img/back.png") no-repeat center top;
}

.carousel {
  width: 300%;
  position: absolute;
  top: 0;
  left: 0%;
  height: 100%;
  display: flex;
  transition: .3s ease-out;
  text-align: center;
  -ms-align-items: center;
  align-items: center;
  margin: 381px 0;
}

.carousel-item {
  width: calc(100% / 3);
  height: calc(100% + 90px);
}

.carouserl-item img {
  width: 100%;
  height: 100%;
}

.arrow {
  width: 40px;
  height: 40px;
  position: absolute;
  z-index: 2;
  background-color: rgba(0, 0, 0, .3);
  padding: 15px;
  border-radius: 50%;
  top: calc(50% - 35px);
  cursor: pointer;
}

.arrow--left {
  left: 5%;
}

.arrow--right {
  right: 5%;
  transform: rotate(180deg);
}

.dots {
  position: absolute;
  display: flex;
  justify-content: center;
  z-index: 2;
  bottom: 20px;
  width: 100%;
}

.dots-item {
  width: 15px;
  height: 15px;
  background-color: rgba(0, 0, 0, .7);
  border-radius: 50px;
  cursor: pointer;
  margin: 0 5px;
  transition: .2s ease-out;
}

.dots-item.active {
  border: 2px solid rgba(0, 0, 0, .7);
  background-color: transparent;
}

.slider-item {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  animation: fade .3s ease-out;
}

.slider-item.active {
  display: block;
}

.carousel-item div {
  padding: 20px 0;
  background:liteblue;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
голос «против» избранное
<section class="slider">
  <div class="carousel" id="carousel">
    <div class="carousel-item">
      <span class="banner__text">Unique and Modern Design 3</span>
      <span class="lg">Portfolio PSD Template</span>
      <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
      <div>
        <button href="#" class="btn btn--head">Get Started</button>
      </div>
    </div>
    <div class="carousel-item">
      <span class="banner__text">Unique and Modern Design 3</span>
      <span class="lg">Portfolio PSD Template</span>
      <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
      <div> <button href="#" class="btn btn--head">Get Started</button> </div>
    </div>

    <div class="carousel-item">
      <span class="banner__text">Unique and Modern Design 3</span>
      <span class="lg">Portfolio PSD Template</span>
      <span class="sm">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</span>
      <div>
        <button href="#" class="btn btn--head">Get Started</button>
      </div>
    </div>
  </div>
  <img src="img/arrow.svg" alt="" class="arrow arrow--left" onclick="prevSlide()">
  <img src="img/arrow.svg" alt="" class="arrow arrow--right" onclick="nextSlide()">
  <div class="dots">
    <div class="dots-item active"></div>
    <div class="dots-item"></div>
    <div class="dots-item"></div>
  </div>
</section>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.