JavaScript Slider при нажатии на первый элемент перейти к последнему элементу - PullRequest
Новая
       25

JavaScript Slider при нажатии на первый элемент перейти к последнему элементу

1 голос
/ 07 мая 2019

Я делаю слайдер с чистым JavaScript часть, по которой я скучаю и не могу понять это. когда я нахожусь на первом элементе и нажимаю предыдущую кнопку, перейти к последнему элементу Я пытался использовать модуль с несколькими параметрами, такими как длина элементов, но не сработал. я знаю, что исправление связано с модулем, но выяснить, чего не хватает. код под этим комментарием, где проблема (// предыдущая кнопка при нажатии перемещается к предыдущему элементу.)

Примечание: я реализовал следующую часть кнопки, когда нажата кнопка, и последний элемент отображается, он перемещается к первому элементу.

HTML: 

<div id="sliderContainer"></div>

    <div class="buttonsCont">
        <button id="previous">Previous</button>
        <button id="next">Next</button>
    </div>

JS: 

(function(){

/***********************VARS************************/
let arrImgs , arrImgsTitle , arrImgsLength , i , mainDiv , createDiv , createDivID, incr, createDivContent,
createDivImg , createDivImgTitle , add , sliderDiv , newSliderDiv , createDivClass, next, previous, 
j , k;

arrImgs = [
    {
        src : 'building1.jpg',
        title : 'tall building'
    },
    {
        src : 'fox.jpg',
        title : 'orange fox'
    },
    {
        src : 'nature1.jpeg',
        title : 'water fall'
    },
    {
        src : 'sun.jpg',
        title : 'flame'
    },
    {
        src : 'sunset1.jpg',
        title : 'ghorob gamel'
    }
]

//length of the array
arrImgsLength = arrImgs.length;

//getting the main container div
mainDiv = document.getElementById('sliderContainer');

//variable used to add unique ID to every div
incr = 0

//create many divs same as the length of the array

for(i = 0 ; i < arrImgsLength ; i++) {

    createDiv = document.createElement('div');
    createDivID = createDiv.setAttribute('id' , 'slid' + incr++);
    createDivClass = createDiv.setAttribute('class' , 'show');

    //create image inside each div
    createDivImg = document.createElement('img');
    createDiv.appendChild(createDivImg)


    //append created divs inside main div
    mainDiv.appendChild(createDiv);

    //add images to divs
    createDivContent = createDivImg.src = './imgs/' + arrImgs[i].src
    createDivImgTitle = createDivImg.setAttribute('title' , arrImgs[i].title);

}

//hide all divs except for first one 

add = 0;
sliderDiv = document.querySelector("div#slid" + add);

let getDivs = function(sliderDiv){
    let sliderEmArr = [];
    let sibling = sliderDiv.parentNode.firstChild;

    while(sibling) {
        if(sibling.nodeType === 1 && sibling !== sliderDiv) {
            sliderEmArr.push(sibling);

            if(sibling.classList.contains('show')){
                sibling.setAttribute('class' , 'hide');
            }
        }
        sibling = sibling.nextSibling;
    }   
    return sliderEmArr;
}
let siblings = getDivs(sliderDiv);

//when next button clicked and when reach the last element go to //first;
next = document.getElementById('next');

next.addEventListener("click" , nextSlide);

function nextSlide(){
     for(j = 0 ; j < arrImgsLength; j++){
        newSliderDiv = document.querySelector('div#slid' + j);

        if(!newSliderDiv.classList.contains('hide')){
            newSliderDiv.setAttribute('class', 'hide');
            let nextEl = document.querySelector('div#slid' + ++j % arrImgsLength);
            nextEl.setAttribute('class' , 'show');   
        }
     }   
}


//previous button when clicked move to the previous element.

previous = document.getElementById('previous');
previous.addEventListener('click' , prevSlide);

function prevSlide(){
    for(k = arrImgsLength -1; k >= 0  ; k--) {
        newSliderDiv2 = document.querySelector('div#slid' + k);

        if(!newSliderDiv2.classList.contains('hide')){
            newSliderDiv2.setAttribute('class' , 'hide');

            let prevEl = document.querySelector('div#slid' + --k  ) ;
            prevEl.setAttribute('class' , 'show')
        }
    }
}

})();

1 Ответ

0 голосов
/ 07 мая 2019

Здесь вы видите «предыдущий слайд»: 

let prevEl = document.querySelector('div#slid' + --k  );
prevEl.setAttribute('class' , 'show');

Проверьте, если k! = 0;если это не 0, тогда действуйте нормально.Если это 0, используйте индекс последнего элемента. 

let prevEl = document.querySelector('div#slid' + (k ? --k : arrImgsLength - 1));
prevEl.setAttribute('class' , 'show');
...