Не могу справиться с версткой слайдера, кто поможет?

Question

[Noname]

Здравствуйте всем. Целый день ломаю голову, не могу сверстать слайдер, никакой из готовых плагинов не подходит. Нужно чтобы активный слайд был на ширину 50%, а следующие два по 25%, при клике на стрелочку или при клике на иконку соответствующую скрытому слайду, скрытый слайд появлялся на месте первого с шириной 50% а после него следующие два по 25%.

Помогите плиз https://jsfiddle.net/h2bq7rw8/86/

Comments

[Andrew]

Было ведь тут недавно? Это задание какое?
В чем проблема давать центральному класс (как и делают большинство слайдеров) и присваивать ему width: 50%;

.slider-item {
width: 25%;
}
.slider-item.active {
width: 50%;
}

[Noname]

Andrew, было, но там я хотела реализовать через слик, но через слик не получается из-за специфики слика, нельзя каждому из дотсов присвоить свою иконку, чтобы дотс соответствовал конкретному слайду, с учетом того, что идимых должно быть 3, но активным по сути должен быть 1. Теперь прошу помочть хоть как-то уже его реализовать, без свайпа, но со стрелочками и доттерами, которые будут соответствовать индексам слайдов

[Noname]

Andrew, не центральному класс нужен, а всегда левому, и чтобы они каруселькой ездили при клике на стрелку или доттер

[Andrew]

Лина, owlC2 пробовали?
и дотсы и хэшссылки-иконки там я делал и документация хорошая.

[Andrew]

Лина, Вот тут видите там 3 активных класса, как вам нужно. Выставляете первому .active:fisrt-child ширину в 50%, остальные активы 25%, а с дотсами и остальным сами выставите.

[tyzberd]

листаться должно по 3 слайда?

[Noname]

tyzberd, нет, по одному

[alex-1917]

Andrew, штмл-академия наверное расширила перечень заданий))))

[Noname]

alex-1917, это не с хтмл академии, это реальная проблема)) а вы все шутки шутите

[Ankhena]

Лина,

нельзя каждому из дотсов присвоить свою иконку

Почему это нельзя.
Гуглите "slick с превью"

[Noname]

Ankhena, по вашему предложению сдела с превью, типо этого https://codepen.io/aermakova/pen/BPqmYV только теперь мне нужно откорректировать, чтобы в превьюшках были те превью слайдов, которые скрыты. Сейчас получается, что три видимых слайда и видны именно их превью, а нужно чтобы видны бвли три именно тех которые скрыты. Может вы можете помочь?

Answer 1

[Сергей delphinpro]

Почему со сликом-то не подружились? Там делов минут на десять jsfiddle.net/m8r397q4
И дотам он присваивает уникальные идентификаторы, стилизуй как хочешь.

Comments

[Noname]

Привет!) Я сделала по этому подобию https://codepen.io/aermakova/pen/BPqmYV только теперь мне нужно откорректировать, чтобы в превьюшках были те превью слайдов, которые скрыты. Сейчас получается, что три видимых слайда и видны именно их превью, а нужно чтобы видны бвли три именно тех которые скрыты