Помогите решить задание ?

Вопрос-ответ JavaScript
1

нужно из этого
https://www.bkosborne.com/jquery-waterwheel-carousel
сделать такое

у меня что-то ничего толкового не получается

2

В чем именно вопрос? Как подходить к такой задаче?

3

Не получается привязать вверху превьюшки к карусели

4

Это делается через подписки на события.

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

preview  // полоска из превьюшек
carousel // карусель из больших изображений 
app      // объект, объединяющий оба верхних

С одной стороны ты подписываешься на события карусели

var SILENTLY = true // этот флаг нужен чтобы использовать один и тот же метод для выполнения действия (например отображения соответствующей превьюшки, при этом иметь возможность не выстреливать событие если действие - иницианировано как ответ на другое событие)
carousel.on('show-image', function (indexOfImageShown) { // коллбек события `show-image` получает индекс изображения, которое отображается в карусели
	preview.show(indexOfImageShown, SHOW_SILENTLY)
})

С другой - на события полоски превьюшек

preview.on('go-to-image', function (indexOfImage) {
	carousel.show(indexOfImage, SHOW_SILENTLY)
})

и удобно объеденить взаимодействие и инициализацию частей компонента под общим компонентом, назовем его app.

function App(images) {
	this.carousel = new Carousel(images)
	this.preview = new CarouselPreview(images)
}

var app = new App([{
	preview: '...',
	image: '...'
}, {
	preview: '...',
	image: '...'
}, {
	preview: '...',
	image: '...'
}])
1 лайк