Как сверстать такой слайдер?

Question

[Денис Курочкин]

Как сверстать такой слайдер? Нужно, чтобы при клике на миниатюрное изображение блюда или на стрелочку, красиво изменялся весь контент, т. е. текст, большое изображение блюда, звезды у этого блюда, время готовки.
Спасибо.

Comments

[Don2Quixote]

Следующим постом попросишь интернет-магазин тебе написать?)

Answer 1

[Don2Quixote]

EventListener на каждое миниатюрное изображение. Обработчиком события будет функция, которая меняет информационный текст, информацию об оценке, меняет большое изображение. В роли большого изображения будет div блок, у которого будет прописан css background-image. как только кликаешь по миниатюрке - большое изображение меняет свойство background.

document.getElementById("id блока с картинкой").style.background = "url("ссылка на новую картинку")";

То же самое с текстом, только там будет не css свойство, а js функция, меняющая текст. Знаю, что в jQuery это
$("id").text("новый текст");
Как в чистом js делать - сам путаюсь. innerHTML посмотри, но там есть какие то нюансы и подвохи.
В следующий раз - конкретизируй вопросы. Было бы рационально саму что-то начать делать, а если не понимаешь, как изменить картинку или текст - спрашивать.

Comments

[Don2Quixote]

Что бы всё менялось плавно, можешь сначала прозрачность ставить на 0, потом менять контент, потом возвращать прозрачность на 1. (Свойство css - opacity)

Answer 2

[eternalfire]

можно использовать Slick.js с синхронизацияей между слайдерами, то есть один слайдер будет навигацией, а второй меняющимся блоком с инфой, соответствующей слайдеру навигации

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  arrows: true,
  dots: false,
  centerMode: true,
  focusOnSelect: true
});

kenwheeler.github.io/slick

Comments

[bpGusar]

slick параша, Owl круче