Как мне сделать чтобы по нажатию на кнопки сайт листался при параметре overflow: hidden; вот код страницы:

Рейтинг: 0Ответов: 1Опубликовано: 28.02.2023

const slides = document.querySelectorAll('.sidebar-item')
const up = document.querySelector('#up')
const down = document.querySelector('#down')

up.addEventListener('click', RGB)

down.addEventListener('click', RGB)

RGB()

function gRG() {
  let deg = Math.floor(Math.random() * 360);
  let a = Math.floor(Math.random() * 255);
  let b = Math.floor(Math.random() * 255);
  let c = Math.floor(Math.random() * 255);
  let d = Math.floor(Math.random() * 255);
  let e = Math.floor(Math.random() * 255);
  let f = Math.floor(Math.random() * 255);
  return `linear-gradient(${deg}deg, rgba(${a},${b},${c},1) 0%, rgba(${e},${f},${d},1) 100%)`
}

function RGB() {
  for (let i = 0; i < 4; i++) {
    let gradient = gRG()
    slides[i].style.background = gradient;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
}

.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.sidebar {
  height: 100%;
  width: 40%;
  position: absolute;
  top: 0;
  left: 0;
}

.sidebar>div {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sidebar h1 {
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: -30px;
}

.main-slide {
  height: 100%;
  width: 60%;
  position: absolute;
  top: 0;
  left: 40%;
}

.main-slide>div {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

button {
  background-color: #fff;
  border: none;
  color: #AAA;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

button:hover {
  color: #222;
}

button:focus {
  outline: none;
}

.container .controls button {
  position: absolute;
  left: 40%;
  top: 50%;
  z-index: 100;
  padding: 5px;
  border: none;
}

.down-button {
  transform: translateX(-100%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.up-button {
  transform: translateY(-100%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Slider</title>
</head>

<body>

  <div class="container">

    <div class="sidebar">

      <div class="sidebar-item">
        <h1>СЛАЙД 1</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>

      <div class="sidebar-item">
        <h1>СЛАЙД 2</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>

      <div class="sidebar-item">
        <h1>СЛАЙД 3</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>

    </div>

    <div class="main-slide">
      <div style="background-image: url(https://images.unsplash.com/photo-1677446320988-e65803c103f0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);"></div>
      <div style="background-image: url(https://images.unsplash.com/photo-1677503311210-fa140a7141da?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);"></div>
      <div style="background-image: url(https://images.unsplash.com/photo-1677021276420-76bb9d8deb0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);"></div>
    </div>

    <div class="controls">
      <button class="down-button" id="down">
                <i class="fas fa-arrow-down"></i>
            </button>
      <button class="up-button" id="up">
                <i class="fas fa-arrow-up"></i>
            </button>
    </div>

  </div>

  <script src="./main.js"></script>

</body>

</html>

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Вот способ намного легче как можно сделать вашу задумку:

const slider = document.querySelector('.sliders');
const sliders = document.querySelectorAll('.slide-block');
const up = document.getElementById('up');
const down = document.getElementById('down');

let slidersCount = sliders.length - 1;
let currentPosition = 0;

up.addEventListener('click', () => {
  move(1);
});

down.addEventListener('click', () => {
  move(-1);
});

for (let slide of sliders) {
  slide.style.background = getRandomGradient();
}

function move(step) {
  currentPosition += step;

  if (currentPosition > 0) {
    currentPosition = -slidersCount;
  }

  if (currentPosition < -slidersCount) {
    currentPosition = 0;
  }

  slider.style.transform = `translateY(calc(${currentPosition} * 100%))`;
}

function getRandomGradient() {
  let deg = Math.floor(Math.random() * 360);
  let a = Math.floor(Math.random() * 255);
  let b = Math.floor(Math.random() * 255);
  let c = Math.floor(Math.random() * 255);
  let d = Math.floor(Math.random() * 255);
  let e = Math.floor(Math.random() * 255);
  let f = Math.floor(Math.random() * 255);
  return `linear-gradient(${deg}deg, rgba(${a},${b},${c},1) 0%, rgba(${e},${f},${d},1) 100%)`
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.sliders {
  width: 100%;
  height: 100%;
  transition: 500ms;
}

.slide-block {
  display: flex;
  height: 100%;
}

.slide-left-side {
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
}

.slide-right-side {
  width: 60%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.slide-buttons {
  position: absolute;
  display: flex;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
}

.slide-buttons button {
  background-color: #fff;
  border: none;
  color: #AAA;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

#down {
  transform: translateY(50%);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

#up {
  transform: translateY(-50%);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
          integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
          crossorigin="anonymous" referrerpolicy="no-referrer"
    />
<section class="container">
  <div class="sliders">
    <div class="slide-block">
      <div class="slide-left-side">
        <h1>СЛАЙД 1</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="slide-right-side" style="background-image: url(https://images.unsplash.com/photo-1677446320988-e65803c103f0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);"></div>
    </div>

    <div class="slide-block">
      <div class="slide-left-side">
        <h1>СЛАЙД 2</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="slide-right-side" style="background-image: url(https://images.unsplash.com/photo-1677503311210-fa140a7141da?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);"></div>
    </div>

    <div class="slide-block">
      <div class="slide-left-side">
        <h1>СЛАЙД 3</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="slide-right-side" style="background-image: url(https://images.unsplash.com/photo-1677021276420-76bb9d8deb0a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);"></div>
    </div>

  </div>
  <div class="slide-buttons">
    <button class="down-button" id="down">
            <i class="fas fa-arrow-down"></i>
        </button>
    <button class="up-button" id="up">
            <i class="fas fa-arrow-up"></i>
        </button>
  </div>
</section>