Как спозиционировать блоки?

Question

Помогите, пожалуйста, сделать так, чтобы блоки .archInfo, .interInfo, .restoreInfo, .landInfo и .arch2Info находились внутри блоков .arch, .inter, .restore, .land и .arch2 соответственно, и при использовании слайдера перемещались бы вместе с ними.

const sliderLine = document.querySelector('.portfolioSliderLine')
const buttonLeft = document.querySelector('.buttonLeft')
const buttonRight = document.querySelector('.buttonRight')

let offset = 0;

buttonRight.addEventListener('click', function() {
  offset = offset - 90;
  sliderLine.style.transition = 'all 1s ease 0s'
  console.log(offset);
  if (offset < -270) {
    setTimeout(function() {
      offset = 0
      sliderLine.style.transition = 'none'
      sliderLine.style.left = offset + 'vw'
    }, 1000)
  }
  sliderLine.style.left = offset + 'vw'
})

buttonLeft.addEventListener('click', function() {
  offset = offset + 90;
  sliderLine.style.transition = 'all 1s ease 0s'
  console.log(offset);
  if (offset > 0) {
    sliderLine.style.transition = 'none'
    offset = -360
    sliderLine.style.left = offset + 'vw'
    setTimeout(function() {
      sliderLine.style.transition = 'all 1s ease 0s'
      offset += 90
      sliderLine.style.left = offset + 'vw'
    }, 0)
  }
  sliderLine.style.left = offset + 'vw'
})

.portfolioContainer {
  margin: 4vw auto;
  width: 91%;
  height: auto;
}

.portfolioText {
  border-bottom: 0.3vw solid rgb(0, 0, 0);
  font-family: Cygre;
  font-size: 7.5vw;
}

.portfolioSlider {
  margin-top: 1.2vw;
  margin-left: auto;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.portfolioSliderLine {
  display: flex;
  width: 450vw;
  height: auto;
  position: relative;
  left: 0;
  background-color: aqua;
}

.arch {
  display: flex;
  width: 90vw;
  height: auto;
}

.arch img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

.inter {
  display: flex;
  width: 90vw;
  height: auto;
}

.restore {
  width: 90vw;
  height: auto;
}

.inter img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

.restore img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

.land {
  width: 90vw;
  height: auto;
}

.land img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

.arch2 {
  width: 90vw;
  height: auto;
}

.arch2 img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

.buttonSlider {
  transform: translateY(-100%);
  position: relative;
  top: -2vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  width: 50%;
  height: auto;
}

.buttonLeft {
  width: 3vw;
  height: 3vw;
}

.buttonLeft img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

.buttonRight {
  width: 3vw;
  height: 3vw;
}

.buttonRight img {
  object-fit: cover;
  height: auto;
  width: 100%;
}

.archInfo {
  position: relative;
  top: 50%;
  left: 3%;
  transform: translate(-50%, -50%);
  width: 20vw;
  height: 30vw;
  background-color: black;
  border-radius: 4vw;
}

.interInfo {
  position: relative;
  top: 50%;
  left: 3%;
  transform: translate(-50%, -50%);
  width: 20vw;
  height: 30vw;
  background-color: black;
  border-radius: 4vw;
}

<div class="portfolioContainer" id="portfolio">
  <div class="portfolioText">
    <p>PORTFOLIO</p>
  </div>
  <div class="portfolioSlider">
    <div class="portfolioSliderLine">
      <div class="arch">
        <div class="archInfo">

        </div>
        <img src="pics/arch2.png">
      </div>
      <div class="inter">
        <div class="interInfo">

        </div>
        <img src="pics/inter.png">
      </div>
      <div class="restore">
        <div class="restoreInfo">

        </div>
        <img src="pics/restore1.png">
      </div>
      <div class="land">
        <div class="landInfo">

        </div>
        <img src="pics/land.png">
      </div>
      <div class="arch2">
        <div class="arch2Info">

        </div>
        <img src="pics/arch2.png">
      </div>
    </div>
    <div class="buttonSlider">
      <div class="buttonLeft">
        <img src="pics/arrow-02.png">
      </div>
      <div class="buttonRight">
        <img src="pics/arrow-01.png">
      </div>
    </div>
  </div>
</div>

Когда выставила position: relative ширина блоков уменьшилась до 0. Не знаю уже, что тут делать...

Answer 1

Не нужно дублировать правила для элементов, которые должны выглядеть одинаково. Из-за этого увеличивается количество кода, сложнее вносить изменения и проще допустить ошибки. Схожие элементы нужно группировать общими селекторами (например, по тегу или дополнительному служебному классу).

const sliderLine = document.querySelector('.portfolioSliderLine');
const buttonLeft = document.querySelector('.buttonLeft');
const buttonRight = document.querySelector('.buttonRight');

let offset = 0;

buttonRight.addEventListener('click', function() {
  offset = offset - 90;
  sliderLine.style.transition = 'all 1s ease 0s';
  console.log(offset);
  if (offset < -270) {
    setTimeout(function() {
      offset = 0;
      sliderLine.style.transition = 'none';
      sliderLine.style.left = offset + 'vw';
    }, 1000)
  }
  sliderLine.style.left = offset + 'vw';
})

buttonLeft.addEventListener('click', function() {
  offset = offset + 90;
  sliderLine.style.transition = 'all 1s ease 0s';
  console.log(offset);
  if (offset > 0) {
    sliderLine.style.transition = 'none';
    offset = -360;
    sliderLine.style.left = offset + 'vw';
    setTimeout(function() {
      sliderLine.style.transition = 'all 1s ease 0s';
      offset += 90;
      sliderLine.style.left = offset + 'vw';
    }, 0)
  }
  sliderLine.style.left = offset + 'vw';
})

.portfolioContainer {
  margin: 4vw auto;
  height: auto;
  width: 91%;
}

.portfolioText {
  border-bottom: 0.3vw solid #000;
  font-family: Cygre;
  font-size: 7.5vw;
}
/* Слайдер */
.portfolioSlider {
  margin-top: 1.2vw;
  margin-left: auto;
  height: auto;
  width: 100%;
  overflow: hidden;
}
/* Лента слайдов */
.portfolioSliderLine {
  position: relative;
  left: 0;
  display: flex;
  height: auto;
  width: 450vw;
  background-color: aqua;
}
/* Слайд */
.portfolioSliderLine > div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 90vw;
}
/* Контент слайда */
.portfolioSliderLine > div > div {
  position: absolute;
  padding: 6vw;
  border-radius: 4vw;
  color: white;
  background-color: black;
}
/* Изображение слайда */
.portfolioSliderLine > div > img {
  height: auto;
  width: 100%;
  object-fit: cover;
}
/* Навигация слайдера */
.buttonSlider {
  position: relative;
  top: -2vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  height: auto;
  width: 50%;
  transform: translateY(-100%);
}
/* Кнопка слайдера */
.buttonSlider > div {
  position: relative;
  height: 3vw;
  width: 3vw;
}
/* Изображение кнопки слайдера */
.buttonSlider > div > img {
  height: auto;
  width: 100%;
  object-fit: cover;
}

<div class="portfolioContainer" id="portfolio">
  <div class="portfolioText">
    <p>PORTFOLIO</p>
  </div>
  <div class="portfolioSlider">
    <div class="portfolioSliderLine">

      <div class="arch">
        <div class="archInfo">archInfo</div>
        <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      </div>

      <div class="inter">
        <div class="interInfo">interInfo</div>
        <img src="https://i.sstatic.net/VxVNC.jpg" alt="yellow flower">
      </div>

      <div class="restore">
        <div class="restoreInfo">restoreInfo</div>
        <img src="https://i.sstatic.net/A9VLC.jpg" alt="green forest">
      </div>

      <div class="land">
        <div class="landInfo">landInfo</div>
        <img src="https://i.sstatic.net/oYG0R.jpg" alt="blue rose">
      </div>

      <div class="arch2">
        <div class="arch2Info">archInfo</div>
        <img src="https://i.sstatic.net/MraLT.jpg" alt="red wall">
      </div>

    </div>
    <div class="buttonSlider">

      <div class="buttonLeft">
        <img src="pics/arrow-02.png">
      </div>

      <div class="buttonRight">
        <img src="pics/arrow-01.png">
      </div>

    </div>
  </div>
</div>

БЛОГ НА HUSL

Как спозиционировать блоки?

Ответы (1 шт):