Главная arrow icon Вопросы arrow icon Технологии arrow icon JavaScript,Ajax,HTML arrow icon Добрый день уважаемые знатоки JS! Нуждаюсь…

Добрый день уважаемые знатоки JS! Нуждаюсь в помощи по объединению скрипта слайдера-карусели и показа скрытого текста! - вопрос №1985365

Необходимо получить красивую карусель с авто прокруткой и авто описанием каждого слайда под ней!
Задача состоит из трёх частей и выглядит так:

1 часть — Есть бесплатный слайдер 3D Carousel Gallery. Не совсем слайдер, скорее карусель изображений, пример, а заодно и код, можно увидеть по ссылке (https://codepen.io/dudleystorey/pen/kiajB). Работает, переключает картинки по событию onclick. К onclick привязаны две стрелки, левая и правая, так что поворот работает в обе стороны. Нужно допилить скрипт так, чтобы он переключал картинки не только от события onclick, но и автоматически через 5 секунд от первой к последней и заново по кругу, получается, что против часовой стрелки (он их странно расположил, или может я чего не понял).

2 часть — Есть простенький скрипт, также работающий по событию onclick, показывает скрытый текст по средствам функции show. При нажатии, показывается \«скрытый текст 1\», затем \«скрытый текст 2\». Нужно допилить скрипт так, чтобы он показывал восемь скрытых текстов поочерёдно, возвращаясь к первому и всё начиналось заново.[div1-div2-div3-div4-div5-div6-div7-div8-div1-div2 и т.д.] Важно, чтобы скрытый текст появлялся в одном и том же месте по центру. Только один единовременно — показываемый текст. Старый убрался, новый появился ровно на том же месте. Прикрутить его нужно к стрелкам из первой части (стрелки от слайдера).

3 часть — мы уже имеем слайдер-галерею, который переключается как по средствам события onclick, так и автоматически каждые 5 секунд. Имеем скрипт, который отображает текст, по средствам события onclick. Эти две вещи необходимо соединить. Итогом всей задачи должен получится слайдер-карусель, который как автоматически прокручивается по часовой стрелке, отодвигая изображения по углам, заранее заданным слайдером (по кругу), так и по средствам Onclick в обе стороны по средствам прикрученных стрелок. Под этим слайдером должен идти текст, описывающий каждый слайд соответственно, отцентрированный ровно под слайдером, который также, синхронно со слайдером, будет меняться. Появляется следующий, исчезает предыдущий. Анимация исчезновения старого и появления нового текста любая. Если простым человеческим языком. Нужна карусель, которая сама крутится раз в 5 секунд по часовой или против часовой стрелке, состоящая из 8-ми картинок, к каждой картинке нужно чтобы появлялось описание, вот и всё. Нюанс в том, что авто прокрутка подразумевает авто смену текста в поочерёдном порядке, но нужно сделать так, чтобы при \«отматывании\» на несколько картинок назад, текст тоже назад менялся и затем с того же места начинал синхронную прокрутку с фото. Т.е. если авто прокрутка дошла с первой до пятой картинки (и текст соответственно с первого до пятого), а затем пользователь отмотает стрелкой назад на картинку под номером два (и соответственно будет текст-описание №2), то дальше всё в нормальном режиме синхронно, спустя 5 секунд, должно опять начать прокручиваться (слайд3/текст3 — 5 секунд — слайд4/текст4 — 5 секунд — слайд5/текст5 и т.д. до восьмого и заново).

Звучит это всё, конечно грозно, но на деле — это правка и соединение двух скриптов.
Исходники выкладываю на ядиск: https://yadi.sk/d/IxYaeky3sPDDm
СергейСеребряный
09.06.16
Технологии / JavaScript,Ajax,HTML
0 ответов
Ответов пока нет

Alexander
Рейтинг: 17 568
4-й в Технологиях
Читать ответы
Посмотреть всех экспертов из раздела Технологии > JavaScript,Ajax,HTML
Похожие вопросы
Пользуйтесь нашим приложением Доступно на Google Play Загрузите в App Store
  • карты visa
  • карты master card
  • карты maestro
  • карты МИР
Мы используем файлы cookie. Пользуясь сайтом, вы принимаете условия нашего соглашения. Принять Детальнее