Javascript-форум - slider некст кнопка работает но превью не мог правильно писать!

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - slider некст кнопка работает но превью не мог правильно писать! (https://javascript.ru/forum/events/81733-slider-nekst-knopka-rabotaet-no-prevyu-ne-mog-pravilno-pisat.html)

slider некст кнопка работает но превью не мог правильно писать!

let data  = [
    {
        id:1,
        name: 'leopard',
        description:'animal from my childhood. I love this animal',
        src:'animal1.jpg'
    },
    {
        id:2,
        name: 'cat',
        description:'animal from my childhood. I love this animal',
        src:'animal4.jpg'
    },  
    {
        id:3,
        name: 'kitty',
        description:'animal from my childhood. I love this animal',
        src:'animal3.jpg'
    }, 
    {
        id:4,
        name: 'giraph',
        description:'animal from my childhood. I love this animal',
        src:'animal2.jpg'
    },
    
]
let indexOfList = 0

let func  = e=>{
    indexOfList++
    title.textContent = data[indexOfList].name
    animal.src = data[indexOfList].src
    descript.textContent =  data[indexOfList].description
    if(indexOfList == data.length-1){
        indexOfList = 0
        
    }
}
next.onclick =  e=>{
    indexOfList++
    title.textContent = data[indexOfList].name
    animal.src = data[indexOfList].src
    descript.textContent =  data[indexOfList].description
    if(indexOfList == data.length-1){
        indexOfList = 0
        
    }
}



prev.onclick= e =>{
    indexOfList --
    title.textContent = data[indexOfList].name
    animal.src = data[indexOfList].src
    descript.textContent =  data[indexOfList].description
    if(indexOfList == data.length - 1) {

        indexOfList = 0 
        debugger
    }

}

помогите пожалуйста

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #animal{
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>

    <ul id="carusel">
        <li>
            <h1 id="title">Animal Collection</h1>
            <img src="./animal2.jpg" alt="animal" id="animal">
            <p id="descript">animal from my childhood. I love this animal</p>
        </li>
    </ul>
    <button id="prev">Prev</button>
    <button id="next">Next</button>
    <script src="./main.js"></script>
</body>
</html>

Shoxrux,
изменили indexOfList, затем проверили indexOfList, затем согласно indexOfList установили данные.

я не изменил indexOfList о чем вы говорите ?
я хочу чтобы при нажатии prev слайды назад должны перейти по кругу без остановки. надеюсь я правильно объяснил)

Shoxrux,
сначала indexOfList++ затем if

indexOfList-- затем if

Пожалуйста в коде покажите как писать

Shoxrux,

next.onclick =  e=>{
    indexOfList++;
    if(indexOfList >= data.length){
        indexOfList = 0
    }
    title.textContent = data[indexOfList].name
    animal.src = data[indexOfList].src
    descript.textContent =  data[indexOfList].description
}
prev.onclick= e =>{
    indexOfList--;
    if(indexOfList < 0 ) {
      indexOfList = data.length - 1
            };
    title.textContent = data[indexOfList].name
    animal.src = data[indexOfList].src
    descript.textContent =  data[indexOfList].description
}

Не работает

Цитата:

Сообщение от Shoxrux

Не работает

что не работает?

Shoxrux,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #animal{
            width: 400px;
            height: 300px;
        }
        li{
            list-style: none;
        }

    </style>
</head>
<body>
    <ul id="carusel">
        <li>
            <h1 id="title">leopard</h1>
            <img src="https://fakeimg.pl/350x200/?text=leopard" alt="animal" id="animal">
            <p id="descript">animal from my childhood. I love this animal</p>
        </li>
    </ul>
    <button id="prev">Prev</button>
    <button id="next">Next</button>
    <script>let data  = [
    {
        id:1,
        name: 'leopard',
        description:'animal from my childhood. I love this animal',
        src:'https://fakeimg.pl/350x200/?text=leopard'
    },
    {
        id:2,
        name: 'cat',
        description:'animal from my childhood. I love this animal',
        src:'https://fakeimg.pl/350x200/?text=cat'
    },
    {
        id:3,
        name: 'kitty',
        description:'animal from my childhood. I love this animal',
        src:'https://fakeimg.pl/350x200/?text=kitty'
    },
    {
        id:4,
        name: 'giraph',
        description:'animal from my childhood. I love this animal',
        src:'https://fakeimg.pl/350x200/?text=giraph'
    },
]
let indexOfList = 0
next.onclick =  e=>{
    indexOfList++;
    if(indexOfList >= data.length){
        indexOfList = 0
    }
    title.textContent = data[indexOfList].name
    animal.src = data[indexOfList].src
    descript.textContent =  data[indexOfList].description
}
prev.onclick= e =>{
    indexOfList--;
    if(indexOfList < 0 ) {
      indexOfList = data.length - 1
            };
    title.textContent = data[indexOfList].name
    animal.src = data[indexOfList].src
    descript.textContent =  data[indexOfList].description
}
</script>
</body>
</html>