Доброе время суток, имеется скрипт, который позволяет поочередную смену изображений, где не получается корректно реализовать для ссылки "Предыдущая", чтобы по клику на эту ссылку можно было посмотреть предыдущее изображение. HTML разметка: HTML: <div> <div> <img src="img/1.jpg" id="slide_show" /> <img src="img/2.jpg" id="slide_show2" style="display:none;" /> </div> <div class="txt_slides"> <p id="slide_text">Lorem Ipsum is simply dummy text...</p> <p id="slide_text2" style="display:none;">Lorem Ipsum is simply dummy text2...</p> <br/><br/> <a onclick="clearInterval(go);go=setInterval('chgImg(0)',3000);">Старт</a> <a onclick="clearInterval(go);" title="Остановить">Стоп</a> --> <a onclick="chgImg(0)" title="Вперёд">Следующая</a> </div> </div> JS код: Код (Javascript): <script type="text/javascript"> var imgs = ['img/1.jpg','img/2.jpg']; var text = ['Lorem Ipsum is simply dummy text...','Lorem Ipsum is simply dummy text...2']; var n=0; var next=""; $(document).ready(function(){go=setInterval("chgImg(0)", 3000);}); function chgImg(number) { if (number!=0) { clearInterval(go); $('[id^=slide_show], [id^=slide_text]').stop(); n=number-2; go=setInterval("chgImg(0)", 3000); } n++; if (n>=imgs.length) n=0; if (next=="") next=2; else next=""; $('#slide_show'+next).attr('src',imgs[n]); $('#slide_text'+next).html(text[n]); $('[id^=slide_show], [id^=slide_text]').fadeToggle(2000); } </script> В данный момент ссылки "Старт", "Стоп", "Следущая" работают правильно и если я, например, хочу сделать ссылку на 3 или 10 изображение, то добавляю в html: HTML: <a onclick="chgImg(3)" title="3 фото">Третье изображение</a> <a onclick="chgImg(10)" title="10 фото">Десятое изображение</a> работает прекрасно, но вот с добавлением ссылки для "Предыдущая" и небольшого изменения js скрипта, работает, но как-то коряво... Может пробовать так : <a onclick="chgImg(-1)" title="Назад">Предыдущая</a> но тогда и для ссылки "Следующая" придётся скрипт изменять, чтобы скрипт работал правильно. Буду благодарна за помощь, Ольга
https://getbootstrap.com/docs/4.1/components/carousel/ в середине страницы, все функции нужные вам там есть
кстати картинки и текст можно передавать таким образом: HTML: <div id="block" data=0></div> <a onclick="chgImg('start');">Старт</a> <a onclick="chgImg('stop')" title="Остановить">Стоп</a> <a onclick="chgImg('next')" title="Вперёд">Следующая</a> <a onclick="chgImg('back')" title="Вперёд">Предыдущая</a> Код (Javascript): window.onload = chgImg; function chgImg(click) { if(click == 'stop' //start, next,back ..){ //делаем что нужно... } var n = $('#block').attr('data'); //номер картинки теперь хранится в div var imgs = ['img/1.jpg','img/2.jpg']; var text = ['Lorem Ipsum is simply dummy text...','Lorem Ipsum is simply dummy text...2']; html = ''; html = '<img src="'+imgs[n]+'"/><br><p>'+text[n]+'</p>'; //вставляем нужную картинку и надпись $('#block').html(html); n++; if (n >= imgs.length){ n=0; }; $('#block').attr('data', n); //сохраняем номер в блок console.log($('#block').attr('data')) chgImg.id = setTimeout(function() { chgImg(); }, 3000); } В общем отлавливая номер можно и присваивать n++ или n-1, дописывать код кнопок лень, думаю разберешься.