в console все хорошо но slider не работает.что то не хватает в коде

const requestURL = 'https://jsonplaceholder.typicode.com/photos'

function sendRequest(url) {
    return(fetch(url).then(response =>{
        return response.json()
    }))
}

let arrimg = [];
let count = 0;

sendRequest(requestURL).then(data =>
{
    data = data.slice(0, 10);
    // console.log(data)
  
    for (let i = 0; i < data.length; i++){
        
        arrimg.push(data[i].url);
    }
    slider() 
    
});


function slider() {

    let div = document.createElement('div');
    document.body.append(div);
    let next = document.querySelector('#next')

    for (let i = 0; i < arrimg.length; i++) {
        let imgs = document.createElement('img');
        div.append(imgs);
        imgs.src = arrimg[i];
        next.addEventListener('click', nextSlider)
         
        if (i !== count) {
            imgs.style.display = 'none';
        }
    }
}


function nextSlider() {
    
    count++
    
    console.log(count)
    console.log(arrimg[count])
}
<button id="back">BACK</button>
<button id="next">NEXT</button>


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

Автор решения: Aziz Umarov

Не извращяйтесь делайте проще

 
const requestURL = 'https://jsonplaceholder.typicode.com/photos'

function sendRequest(url) {
    return(fetch(url).then(response =>{
        return response.json()
    }))
}
let arrimg = [];
let count = 0;
sendRequest(requestURL)
.then(data =>
{
    data = data.slice(0, 10);      
    for (let i = 0; i < data.length; i++){        
        arrimg.push(data[i].url);
    }
    show(0);    
});



let div = document.getElementById('container');
let next = document.getElementById('next');
let img = document.getElementById('img');
next.addEventListener('click', nextSlider)
back.addEventListener('click', prevSlider)
let currentIndex = 0;
    
function show(index) {
    img.src = arrimg[index];
}

function nextSlider() {
    show(currentIndex++);
}

function prevSlider() {
    show(currentIndex--);
}
<button id="back">BACK</button>
<button id="next">NEXT</button>

<div id="container">
 <img id="img" src="">
</div>

→ Ссылка