Как правильно создать такой слайдер?

Question

[Cosmonaut .]

Здравствуйте. помогите пожалуйста как правильно создать такой слайдер?

Answer 1

[Василий Васильев]

Как простейший вариант:
Контейнер с overflow-x: hidden, в нем флексбокс-строка(шире контейнера) с div'ами фиксированной ширины, логотипы бекграундом(background-size: contain;), js-функция для прокрутки строки влево-вправо при клике на стрелки.

<a id="arrowLeft" href="#" onclick="myFunction(-1)"></a>
<a id="arrowRight" href="#" onclick="myFunction(1)"></a>

function myFunction(direction){
//...
}

Про либы: чем меньше зависимостей - тем лучше. Если проще: что можно сделать без сторонних библиотек - делайте без сторонних библиотек. Меньше говнокода - довольнее рожа и у вас и у заказчика.
P.S: если все еще не понятно - ищите варианты на codepen.

Comments

[Cosmonaut .]

Спасибо за совет ;)

[Islam Ibakaev]

заказчику вообще похрен как вы реализовываете задачу, главное чтобы всё работало.

[Islam Ibakaev]

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

[Василий Васильев]

Islam Ibakaev, если вы так считаете - верстайте на Adobe Muse и вам сразу же популярно обьяснят откуда у вас руки растут.
Заказчику не похрен на производительность, а зависимости напрямую на нее влияют.

[Василий Васильев]

Islam Ibakaev, не спорю, jquery/{любой другой фреймворк/библиотека} можно применять, но для этого надо изучить ее код, чем 98% "разработчиков" брезгует заниматься, отсюда и идет основная доля говнокода. А для выпрямления рук нет ничего лучше чистого JS.

[Islam Ibakaev]

Basil_Dev, вы вообще читаете что я пишу? я не писал про паршивую производительность, и про то, что джейквиери "можно применять".

[Islam Ibakaev]

не нужно заниматься преждевременной оптимизацией скорости работы вашего сайта.

Answer 2

[Никита]

берете один из популярных слайдеров типа slick или owl, и создаете.

Вам надо будет только для стрелочек добавить свои стили

Answer 3

[Islam Ibakaev]

простой слайдер, берёшь slick и там в свойстве slidePerShow (не уверен правильно ли написал, ну ты разберёшься), указываешь 5.