Помогите реализовать слайдер

Question

Помогите пожалуйста реализовать слайдер, слайдер должен быть бесконечным, честно долго трудился, но смог вывести только массивы с классами слайдов, а затем даже удалить через js. Есть особенности в связи с которыми js пишу в обёртке DOM, так как у wordpress какие то проблемы и вместо наполненных классами массивов, выводил массивы пустые.

Слайдер с 5 элементами и бесконечной прокруткой, где при нажатии на правую стрелку, происходит след. [1 , 2, 3, 4, 5], [5, 1, 2, 3, 4], [4, 5, 1, 2, 3], [3, 4, 5, 1, 2,], [2, 3, 4, 5, 1] так, до 1 и аналогично при нажатии на левую стрелку, только зеркально.

Код написан максимально понятно, старался сделать его очень читабельным.

'use strict';

document.addEventListener("DOMContentLoaded", function(e) {
    let slideHtmlCollectionByClass;
    let slideArray;
    slideHtmlCollectionByClass = document.querySelectorAll('div.slide');
    slideArray = [];

    for(let i = 0; i < slideHtmlCollectionByClass.length; i++){
            slideArray[i] = slideHtmlCollectionByClass[i].getElementsByTagName('p');
            slideHtmlCollectionByClass[i].remove();
    }
});

html {
    min-width: 195px;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    min-width: 195px;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #2e2e2e;
    background-image: url(assets/images/background.jpg);
    background-repeat: no-repeat;
    background-position: fixed;
    background-size: 100%;
}

.slider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    position: relative;
    width: 100%;
    min-width: 195px;
    height: 175px;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 80%);
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.slide {
    max-width: 15vw;
    font-family: 'FuturaFuturisLightC';
    font-size: 23.5px;
    font-variant: small-caps;
    z-index: 0;
    margin:auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: 19%;
    text-align: left;
    color: #000;
    /* left:190px; */
}

.slide p {
    line-height: 27px;
    margin:auto;
    padding-left: 1vw;
    padding-right: 1vw;
    font-size:1.8vw;
}

.first-filter-slider, .second-filter-slider {
    position: absolute;
    z-index: 999;
    top: 0px;
    width: 39.6%;
    height: 175px;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, 77%);
}

.first-filter-slider {
    left:0px;
}

.second-filter-slider {
    right:0px;
}

.first-filter-slider a,
.second-filter-slider a {
    display:flex;
    height:100%;
}

.first-filter-slider img,
.second-filter-slider img {
    display: block;
    height:40px;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}

<html>
<head>
</head>
<body>
<div id="slider" class="slider">
  <div class="slide">
    <p>
      Первый слайд </p>
  </div>
  <div class="slide">
    <p>
      Второй слайд </p>
  </div>
  <div class="slide">
    <p>
      Третий слайд </p>
  </div>
  <div class="slide">
    <p>
      Четвёртый слайд </p>
  </div>
  <div class="slide">
    <p>
      Пятый слайд </p>
  </div>
  <div class="first-filter-slider">
    <a href="#"><img src="https://cdn1.savepice.ru/uploads/2021/10/5/da514b40e0d8ee07572591aa394ce898-full.png"></a>
  </div>
  <div class="second-filter-slider">
   <a href="#"><img src="https://cdn1.savepice.ru/uploads/2021/10/5/dc87ddd026cbed0b4f6bf1089d67f1c1-full.png"></a></div>
</div>
</body>
</html>

Меня не интересуют фреймворки. Задумывал проект на bootstrap с wordpress, работает плохо, те же слайдеры предложенные не работают. После отказа от bootsrap освоил в большем объёме CSS и HTML и даже начал делать собственный шаблон на wordpress. Сейчас пытаюсь освоить javascript, хочу писать ванильный код. Мне не лень писать код, поймите правильно, мне трудно приходит понимание языка, мне нужно понимать, я когда начал писать этот слайдер застопорился очень много раз, но проблемы решал, сейчас очень устал и ко мне не приходит понимание, я прошу помощи.

Почему я не могу вывести слайды с помощью функции slideShow, в чем моя ошибка?

'use strict';
document.addEventListener("DOMContentLoaded", function(e) {
let slideHtmlCollectionByClass;
let slideArray;
slideHtmlCollectionByClass = document.querySelectorAll('.slide');
slideArray = [];

for(let i = 0; i < slideHtmlCollectionByClass.length; i++){
slideArray[i] = 
slideHtmlCollectionByClass[i].getElementsByTagName('p');
slideHtmlCollectionByClass[i].remove();
}
console.log(slideArray);
let slideStep = 0;
let slideOffSet = 0;
function slideShow(){
let div = document.createElement('div');
div.p = slideArray[slideStep];
div.classList.add('slide');
div.style.marginLeft = slideOffSet*15 + 'vw';
document.querySelector('#slider').appendChild(div);
}
slideShow();slideShow();slideShow();slideShow();slideShow();
});

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

БЛОГ НА HUSL

Помогите реализовать слайдер

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