Вопрос, есть блок и 3 кнопки как при нажатии на кнопки менялось содержимое блока?

Question

[proclub]

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

Answer 1

[Froggyweb]

Слайдер, табы, самопис на js вариантов много

Answer 2

[Дмитрий Локшин]

Если хотите, чтобы они переключались только по клику, то Вам нужны табы. Вот парочка примеров без всего лишнего, как это можно легко сделать: jsfiddle.net/UWYxZ и jsfiddle.net/EZea3 Кастомизировать их под себя не должно составить труда.

Comments

[proclub]

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

[Дмитрий Локшин]

proclub: Да, конечно можно. Делаете слайдер, а вместо dots (точки индикаторы, показывающие количество слайдов) просто делаете данные картинки с надписями. Например, в slick это делается достаточно легко, для этого там есть функция customPaging, чтобы понять, как она работает вот Вам пример https://jsfiddle.net/9nm4ctv9/678/ (вместо покемонов подставляете Ваши картинки, которые достаете из data-* и также через data, например data-text="Тут Ваш текст" подставляете и текст).
Если уж совсем непонятно, то готов показать по skype.

[proclub]

Не с этим понятно все, но я имел ввиду другой момент. То есть вот эти нижние картинки будут сделаны табами. и менять текст. А мне был интересен момент, касательно стрелочки что переключает слайдер, можно её заставить при многократном нажатии менять целевой блок как в функционале обычного слайдера? Там просто получается разный размер у картинок, а в слайдерах получается у всех картинок одинаковый размер . Поэтому мне и было интересно можно ли было сделать так, что бы при нажатии на стрелку, менялся основной блок, при многократном нажатии на него. Слайдер без слайдера * как то так)