Как сделать вращающийся слайдер?

Question

[Nikita Kravchenko]

Привет, возникла такая проблема. Пишу на ванильном js, нужен слайдер как нарисовал дизайнер с анимацией прокручивания. Анимацию сделал, а вот под размеры подогнать не могу. Либо боковые пиццы улетают за края, либо центральная очень маленькая. Не могу сделать в соответствии с картинкой, но нужен еще и адаптив, поэтому не могу использовать фиксированную ширину.

Выбрал для этих целей tiny-slider. Возможно перейти и на другой слайдер, просто мне показался он достаточно функциональным.

Моя недоделанная версия: https://codepen.io/Kravchenko55/pen/ZEYwRvG

Answer 1

[hzzzzl]

еще кстати если экран сужаешь, то вот такие пакманы получаются,
убери
.my-slider__image { height: 100%; }
оставь только width: 100%



дальше, попробуй .pizza-active добавить transform: scale(1.5);
codepen больше не позволяет сохранять анонимные пены, но будет выглядеть как-то так


ну и подвинуть левую и правую

.tns-slide-active:first-of-type {
  transform: translateX(-50%);
}

.tns-slide-active:last-of-type {
  transform: translateX(50%);
}

Comments

[Nikita Kravchenko]

Вот подкрутил чуток. Нормально? Чуть позже адаптивность поделаю
https://codepen.io/Kravchenko55/pen/ZEYwRvG

[hzzzzl]

Nikita Kravchenko, я думаю можно продолжить делать другие элементы страницы, и потом уже в готовую страницу вставить его и посмотреть как будет, так-то вроде вполне ок крутится

[Nikita Kravchenko]

hzzzzl, спасибо

[hzzzzl]

Nikita Kravchenko,
можно еще на transition: transform какую-нибудь прикольную огибающую положить типа
transition: transform 1s cubic-bezier(.67,.2,.37,1.71) , чтобы пицца будто бы заходила по инерции за центр, потом возвращалась

https://cubic-bezier.com/#.67,.2,.37,1.71

[Nikita Kravchenko]

hzzzzl, такое вроде невозможно с таким слайдером. Или я ошибаюсь

[hzzzzl]

Nikita Kravchenko,

.my-slider__image {
    width: 100%;
/*     height: 100%; */
    transform: rotate(0deg);
    opacity: .7;
    transition: transform 1s cubic-bezier(.67,.2,.37,1.71), opacity 1s linear;
}

Answer 2

[FrontendMyLive]

исполльзуй проценты

Comments

[Nikita Kravchenko]

Это как сказать, используй css и js.
Не понимаю куда их впихнуть.
Помогите понять как это сделать.