Обратное пролистывание элементов по нажатии на кнопку на JavaScript

Question

Обратное пролистывание элементов по нажатии на кнопку на JavaScript

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

Прошу оказать помощь с тем, над чем сейчас работаю.

Вот такая задумка у дизайнера. По клику на кнопки меняется:

Изображение
Заголовок слева
Текст справа

Собственно, задумка дизайнера

На данный момент, я сделал основу и пока не стилизовал, хочу прописать логику. Сделал, как мне показалось логично. Но столкнулся с рядом проблем.

Диагональный слайдер, который я прописал с overflow: hidden, отображает только текущий слайд, это желательно как-то поправить, но не обязательно.
Я прописал логику, которая по клику на кнопки меняет текст справа и изображение, но только влево (Next).
Также прописал скрипт, что при нажатии на заголовок, у него добавляется класс active, если нажимать на заголовки последовательно, а после 5го возвращаться сразу на 1, то выглядит, как-будто все работает, но при нажатии на кнопки заголовки не меняются, а также проблема с обратным пролистыванием (с 5-1).

Скорее всего напортачил, перемудрил, затупил или не понял где-то в JS. Но может и в разметке и стилях.

Очень надеюсь на Вашу поддержку и помощь. Заранее спасибо! Для большего удобства (наверное), прикладываю ссылку на CodePen: https://codepen.io/andreypantyukhin/pen/abRYwZY

const carousel = document.querySelector(".carousel");
const carousels = document.querySelector(".carousels");
const subtext = document.querySelector(".subtext");
const text = document.querySelector(".text");
var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("textitem");
let currentIndex = 0;

function moveCarousely() {
  carousel.style.transform = `translatey(-${currentIndex * 100}%)`;
}

function moveCarouselx() {
  carousels.style.transform = `translatex(-${currentIndex * 20}%)`;
  //carousels.style.transform = `translatex(-${currentIndex * 20}%)`;
}

function subtextX() {
  subtext.style.transform = `translatex(-${currentIndex * 20}%)`;
  //carousels.style.transform = `translatex(-${currentIndex * 20}%)`;
}

function moveCarouselyB() {
  carousel.style.transform = `translatey(-${currentIndex * 0}%)`;
}

function moveCarouselxB() {
  carousels.style.transform = `translatex(-${currentIndex * 0}%)`;
  //carousels.style.transform = `translatex(-${currentIndex * 20}%)`;
}

function subtextXB() {
  subtext.style.transform = `translatex(-${currentIndex * 0}%)`;
  //carousels.style.transform = `translatex(-${currentIndex * 20}%)`;
}

function nextSlide() {
  currentIndex++;
  if (currentIndex > 4) {
    currentIndex = 0;
  }
  moveCarousely();
}

for (var i = currentIndex; i < btns.length; i++) {
  btns[i].addEventListener("click", function () {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    nextSlide();
    moveCarouselx();
    subtextX();
  });
}

function myFunction1() {
  nextSlide();
  moveCarouselx();
  subtextX();
  titleScroll();
}

function myFunction2() {
  moveCarouselyB();
  moveCarouselxB();
  subtextXB();
}

//setInterval(nextSlide, 3000);
//setInterval(moveCarouselx, 3000);
//setInterval(subtextX, 3000);

.sectionex {
  width: 100vw;
  height: 100vh;
  margin-bottom: 168px;
  background-color: grey;
}

.lastsec {
  margin-top: -600px;
}

.my-slider {
  /*display: flex;
  justify-content: space-between;*/
  margin-bottom: 168px;
}

.carousel-container {
  top: -440px;
  left: 40%;
  display: flex;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  max-height: 500px;
}

.carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  margin-right: 40px;
  flex-basis: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  transition: transform 0.5s ease-in-out;
}

.slide:nth-child(1) {
  background-color: red;
  transform: translateY(0%);
}

.slide:nth-child(2) {
  background-color: green;
  transform: translateY(100%);
}

.slide:nth-child(3) {
  background-color: blue;
  transform: translateY(200%);
}

.slide:nth-child(4) {
  background-color: purple;
  transform: translateY(300%);
}

.slide:nth-child(5) {
  background-color: grey;
  transform: translateY(400%);
}

.text {
  top: 20px;
  left: 20px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
  font-size: 36px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
}

.textitem {
  width: 500px;
}

.text .active {
  font-size: 48px;
  font-weight: 600;
  color: rgba(0, 0, 0, 1);
}

.subtext-box {
  top: -1000px;
  left: 70%;
  position: relative;
  max-width: 550px;
  border: 2px solid #333;
  overflow: hidden;
}

.subtext {
  width: 2750px;
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.subtextitem {
  padding: 20px;
  width: 100% !important;
}

.btnso {
  /*display: none;*/
  position: relative;
  width: 10%;
  height: 50px;
}

.btnso-next {
  top: -710px;
  left: 60%;
}

.btnso-prev {
  top: -160px;
  left: 28%;
}

<div class="sectionex"></div>
<div class="my-slider">
  <div class="text" id="myDIV">
    <div class="textitem active">Awsome Slide Title 1</div>
    <div class="textitem">Awsome Slide Title 2</div>
    <div class="textitem">Awsome Slide Title 3</div>
    <div class="textitem">Awsome Slide Title 4</div>
    <div class="textitem">Awsome Slide Title 5</div>
  </div>

  <button class="btnso btnso-prev">prev</button>
  <div class="carousel-container">
    <div class="carousel">
      <div class="carousels">
        <div class="slide slide1">Slide 1</div>
        <div class="slide slide2">Slide 2</div>
        <div class="slide slide3">Slide 3</div>
        <div class="slide slide4">Slide 4</div>
        <div class="slide slide5">Slide 5</div>
      </div>
    </div>
  </div>
  <button class="btnso btnso-next">next</button>
  <div class=" subtext-box">
    <div class="subtext">
      <div class="subtextitem">1Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto sed dicta nulla aspernatur dolorem accusantium expedita enim aliquid magnam ad voluptate placeat accusamus nam illum suscipit deleniti, est molestiae doloribus!</div>
      <div class="subtextitem">2Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto sed dicta nulla aspernatur dolorem accusantium expedita enim aliquid magnam ad voluptate placeat accusamus nam illum suscipit deleniti, est molestiae doloribus!</div>
      <div class="subtextitem">3Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto sed dicta nulla aspernatur dolorem accusantium expedita enim aliquid magnam ad voluptate placeat accusamus nam illum suscipit deleniti, est molestiae doloribus!</div>
      <div class="subtextitem">4Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto sed dicta nulla aspernatur dolorem accusantium expedita enim aliquid magnam ad voluptate placeat accusamus nam illum suscipit deleniti, est molestiae doloribus!</div>
      <div class="subtextitem">5Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto sed dicta nulla aspernatur dolorem accusantium expedita enim aliquid magnam ad voluptate placeat accusamus nam illum suscipit deleniti, est molestiae doloribus!</div>
    </div>
  </div>
</div>
<div class="sectionex lastsec"></div>

css javascript html dom

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

Answer 1

▲ 1Принят

Вы действительно хотите самостоятельно изобретать слайдер ? Я бы на вашем месте использовал уже готовые варианты, которые потом можно б было переиспользовать для других слайдеров на сайте. К примеру - Swiper или Slick

А вот те боковые ссылки на слайды (слева вверху), это по факту точки переключения, просто через слова...

Обратное пролистывание элементов по нажатии на кнопку на JavaScript

Ответы