• Главная
  • Контакты
Подписаться:
  • Twitter
  • Facebook
  • RSS
  • VK
  • PushAll
logo

logo

  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • За год
    • Положительные
    • Отрицательные
  • Сортировка
    • По дате (возр)
    • По дате (убыв)
    • По рейтингу (возр)
    • По рейтингу (убыв)
    • По комментам (возр)
    • По комментам (убыв)
    • По просмотрам (возр)
    • По просмотрам (убыв)
Главная
  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • Главная
  • Карусель на Vanilla.JS

Карусель на Vanilla.JS +11

24.04.2017 11:59
iGetPass 18 5300 Источник
Разработка веб-сайтов*, JavaScript*
Прочитав эту статью решил запилить свою карусель с блэк-джеком и jQuery хотя нет, без него ибо 2017 год и он не особо и нужен. Создадим функцию, которая принимает объект с параметрами, и делает слайдер. Некоторые моменты будут опущены, такие, как: вендорные префиксы, таймер смены и т.д.
Первое что мы сделаем — разметка для карусели, на классах, а не id, дабы можно было использовать несколько раз один и тот же модуль на странице, ну и специфичность не была 3-его порядка.

HTML
<div class="wrap">
	<div class="b-carousel js-carousel">
		<button class="b-carousel__prev js-carousel__prev">Prev</button>
		<button class="b-carousel__next js-carousel__next">Next</button>
		<div class="b-carousel__wrap js-carousel__wrap">
			<div class="b-carousel__item">
				<img src="..." alt="" class="b-carousel__img">
			</div>
			<div class="b-carousel__item">
				<img src="..." alt="" class="b-carousel__img">
			</div>
			<div class="b-carousel__item">
				<img src="..." alt="" class="b-carousel__img">
			</div>
			<div class="b-carousel__item">
				<img src="..." alt="" class="b-carousel__img">
			</div>
		</div>
	</div>
</div>


У нас есть:

  • Блок — обертка для карусели, который скрывает все, что вылезает за его рамки;
  • Контейнер для самих слайдов, которые будут располагаться в строчку, с помощью flexbox, можем себе это позволить;
  • Блоки слайдов, которые скрывают все, что вылезает за их границы;
  • Блок – хелпер для выравнивания картинки по вертикали. И, внутри него уже будем располагать картинки.

В CSS используем БЭМ нотификацию, ибо не засоряем глобальную область. Сделаем его чуть-чуть адаптивным.

CSS
.b-carousel {
	width: 100%;
	overflow: hidden;
	position: relative;

	box-sizing: border-box;
	border: 1px solid;
}

	.b-carousel__prev,
	.b-carousel__next {
		position: absolute;
		top: 50%;
		left: 20px;
		width: 50px;
		height: 50px;
		background: #fff;
		transform: translateY(-50%) translateZ(0);
		cursor: pointer;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		z-index: 3;
	}

		.b-carousel__next {
			left: auto;
			right: 20px;
		}

	.b-carousel__wrap {
		display: flex;
		transition: transform .5s;
		will-change: transform;
		position: relative;
		z-index: 1;
		height: 100%;
	}

		.b-carousel__item {
			flex: 0 0 100%;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

			.b-carousel__img {
				width: 100%;
				display: block;
			}


Transform: translateZ(0) у контролов — хак для вынесения их на отдельный композитный слой, чтобы при смещении контейнера со слайдами не было перерисовки кнопок. А у обертки свойство will-change. Оно для броузера, чтобы он знал, что с блоком будут происходить какие-то действия.

Да начнем писать код. Создадим функцию, которая принимает объект с параметрами:

function Carousel(setting) {

	/* Scope privates methods and properties */
	let privates = {};

	/* Privates properties */
	privates.setting = setting;

	privates.sel = {
		"main": document.querySelector(privates.setting.main),
		"wrap": document.querySelector(privates.setting.wrap),
		"children": document.querySelector(privates.setting.wrap).children,
		"prev": document.querySelector(privates.setting.prev),
		"next": document.querySelector(privates.setting.next)
	};

	privates.opt = {
		"position": 0,
		"max_position": document.querySelector(privates.setting.wrap).children.length
	};

	// Control
	if(privates.sel.prev !== null) {
		privates.sel.prev.addEventListener('click', () => {
			this.prev_slide();
		});
	}

	if(privates.sel.next !== null) {
		privates.sel.next.addEventListener('click', () => {
			this.next_slide();
		});
	}

}

Методы управления каруселью:

/* Public methods */
// Prev slide
this.prev_slide = () => {
	--privates.opt.position;

	if(privates.opt.position < 0) {
		privates.sel.wrap.classList.add('s-notransition');
		privates.opt.position = privates.opt.max_position - 1;
	}

	privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
};


// Next slide
this.next_slide = () => {
	++privates.opt.position;

	if(privates.opt.position >= privates.opt.max_position) {
		privates.opt.position = 0;
	}

	privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
};

Методы next_slide и prev_slide будут двигать обертку с помощью transform, дабы не было перерисовки блока, и анимация происходила на GPU.

Делаем карусель:

new Carousel({
	"main": ".js-carousel",
	"wrap": ".js-carousel__wrap",
	"prev": ".js-carousel__prev",
	"next": ".js-carousel__next"
});

Если нужна поддержка IE, то заменяем стрелочную функцию на:
Ну бросьте, все это знают
Если не все знают


Это все! Меньше кода — меньше трафика (jQuery 3.2 ~85kB). Контроль над параметрами и можем использовать несколько раз на странице.

Демо:



Если понравилась статья, то в скором времени будет продолжение с цикличной анимацией, touch-событиями и еще многими вкусными плюшками!
Поделиться с друзьями
-->

Комментарии (18)


  1. forgetable
    24.04.2017 15:24
    #10188718
    +1

    У подобных каруселей всегда хочется, чтобы при переключении с последнего на первый карусель не двигалась назад, а проходила вперёд.


    1. iGetPass
      24.04.2017 15:24
      #10188722
      -1

      Согласен, это будет в следующей статье =)


      1. forgetable
        24.04.2017 15:31
        #10188742
        -1

        Здорово. Большой респект за отсутствие jQuery, кстати


        1. iGetPass
          24.04.2017 15:41
          #10188754
          -1

          Мне тоже нравится, не особо jQuery сегодня в зеленых броузерах нужен и в IE 8+


  1. prgrant
    24.04.2017 16:18
    #10188832
    +2

    Нужен swipe, иначе неактуально


    1. iGetPass
      24.04.2017 16:19
      #10188836
      -1

      Это будет в следующей статье =)


  1. iGetPass
    24.04.2017 16:19
    #10188834
    -1

    Это будет в следующей статье =)


  1. psFitz
    25.04.2017 14:04
    #10190260

    Зачем нам очередные велосипеды? Есть же swiper.


    1. iGetPass
      25.04.2017 17:21
      #10190746
      -1

      Тебе не лень тащить в зависимостях jQuery, который весит 85kB?


      1. psFitz
        26.04.2017 09:17
        #10191396

        Сначала советую разобраться в вопросе, потом умничать, есть много либ без jQuery, так же ничего против jq не имею, если в проекте есть jq — специально ищу либу на нём.
        https://github.com/nolimits4web/Swiper/tree/master/dist/js


        1. iGetPass
          26.04.2017 12:32
          #10191764
          +1

          Ты когда-нибудь сам что-нибудь писал? Или не разбираешься в профессии и постоянно берёшь готовые либы и фреймворки?
          Этот swiper, который без jQ весит 94.2kB в сжатом состоянии. Ты понимаешь сколько человек на плохом интернет соединении будет ждать его подгрузку? Пусть с http/2 && сверхбыстрого CDN && gzip'нутого. Это все время на загрузку и распаковку, когда вместо 94.2 и самого вызова ты можешь написать 5kB, который будет работать, как тебе нужно


          1. psFitz
            27.04.2017 10:17
            #10193472

            Давайте не будем судить кто и как разбирается в профессии, во 1, есть разные сайты и не везде надо писать все свое т.к. время ограничено бюджетом, так что не надо этих розовых мечтаний. Во 2, я уверен, что под конец проекта у вас наберется своих наработок на тех же 94kB, только они не будут протестированы сообществом и скорее всего в них будет куча багов.
            Так же никто не мешает зайти в сорцы и вытащить себе только слайдер.


            1. forgetable
              27.04.2017 10:21
              #10193486

              В этом и суть. Мне кажется, нужно стараться использовать своё и как можно меньше библиотек, если занимаешься серьёзными проектами. Если фрилансить, или поджимает время – для этого есть библиотеки.


            1. iGetPass
              27.04.2017 17:40
              #10194320

              Работай с почасовой оплатой!
              Ты один раз написал хороший модуль, написал тесты к нему, и все. По-хорошему для такого модуля — это часа 2


              1. forgetable
                27.04.2017 18:02
                #10194344

                Я всегда работаю с почасовой оплатой. Да, обычно так и происходит.


                1. iGetPass
                  27.04.2017 18:05
                  #10194350

                  Я про тоже, и клиенту меньше трафика


              1. psFitz
                28.04.2017 09:06
                #10195166

                Что за бред? Клиенту пофиг написал ты свой плагин или взял со стороны, ему главное меньше заплатить, исключением отдельные случаи, да и никто тебе не мешает дернуть сорцы любого плагина и вытащить нужное. Что за собрание анонимных велосипедистов?


                1. iGetPass
                  28.04.2017 13:23
                  #10195824

                  Клиенту нужна большая конверсия, в большинстве. Один из факторов большой конверсии — быстрая загрузка страницы => меньший трафик

МЕТКИ

  • Хабы
  • Теги

JavaScript

Разработка веб-сайтов

javascript

Карусель

СЕРВИСЫ
  • logo

    CloudLogs.ru - Облачное логирование

    • Храните логи вашего сервиса или приложения в облаке. Удобно просматривайте и анализируйте их.
Все публикации автора
  • Карусель на Vanilla.JS. Часть 2 +4

    • 02.05.2017 11:07

    Карусель на Vanilla.JS +11

    • 24.04.2017 11:59

Подписка


ЛУЧШЕЕ

  • Сегодня
  • Вчера
  • Позавчера
06:00

Запустили векторный поиск в YDB: рассказываем, как он работает +74

13:01

Ну, погоди! Как я создал свою версию культовой игры: от схемы до корпуса +29

09:01

10 популярных мифов о VDS-хостинге +25

07:49

Почему 21 см — это «магическая длина» нашей Вселенной +23

10:31

А вдруг прочитают? Как писать для инопланетян +20

08:22

Топ-5 мини-ПК с фокусом на производительность: от Arrow Lake до Strix Halo +20

08:05

Шифрование скриптов +20

09:33

Призраки в коммитах: пылесосим историю Git в поиске утекших секретов +19

08:33

Атомные реакторы для лечения рака (и почему они больше не нужны) +17

12:44

Выгорание одно. Причины разные +15

11:56

Меню потоков уже на Хабре +15

07:44

Мы сделали химическую защиту собачьих лап +15

13:08

«Почему компилятор Rust такой медленный?» +13

16:35

Распродажа в издательстве «Питер» +11

12:39

Как сыграть с СХД в имитацию ошибки и выйти победителем? Используем паттерны ООП на C++ +11

07:41

Вы точно их собеседовали: 8 личностей, которые приходят на интервью +11

06:45

Steroids — ещё один фронтенд фреймворк на базе React? +11

11:00

Масштабирование AI/ML-инфраструктуры в Uber +10

07:37

Python в enterprise-разработке: почему популярность ЯП распространилась и на корпоративный сектор. Часть 2 +9

02:02

Кубик мысли: простой проект, который говорит вместо тебя +9

09:01

Большинству людей плевать на качество софта +102

14:07

Вы тоже заказываете платы, компоненты и всячину здесь? +79

13:01

Пишем простой драйвер Linux для устройства, ничего не зная о драйверах и о USB +65

08:27

Телеграфируем кодом Морзе через Java Stream API (часть 1 из 2) +48

19:20

Почему я отказался внедрять тёмные паттерны и не получил оффер на фронтенд-лида +37

07:29

Простой ультразвуковой отпугиватель собак +36

11:34

Лучшее IT-событие этого лета. За что говорят «спасибо» Summer Merge +27

22:23

Верните непрерывную интеграцию разработчикам +22

08:50

Б/У Antminer S9 в помощь радиолюбителю +22

12:49

Сжатие текста в Angie: статика, динамика, производительность +21

07:00

Одноплатники как роутеры: новинки 2025 года и их возможности +21

04:50

Илон Маск создал Меха-Гитлера, а также релиз самого умного Grok 4 +18

09:00

200 тысяч единиц уже готовы, еще миллион — на подходе: разворачиваем контуры в один клик +16

09:10

Как я полюбил LESS и с его помощью избавился от копипасты в своём CSS-коде, а разметку сделал семантической +15

05:54

MCP для новичков +15

15:18

Как мы в Авито используем split-тесты для оценки алгоритмов продвижения объявлений +14

12:32

Как я случайно стал UI-дизайнером радиоприёмника — и заработал 60к за 15 часов +11

07:07

Недельный геймдев: #234 — 13 июля, 2025 +11

16:34

Как я пишу код быстрее +10

07:46

Внедрение зависимостей (DI) через библиотеку Tsyringe +10

09:01

От React всё также веет безумием, но все об этом молчат +98

16:16

Как «по-быстрому» сделанная игра затянула меня в геймдев на 20 лет и какие выводы я из этого сделал +96

13:39

Как выйти из IT?.. и пойти слесарем на завод. Моя попыточка дауншифтинга [1\4] +68

13:01

Большое испытание кальциевых аккумуляторов, часть 2: недозаряд портит, а кипячение убивает +42

08:02

Commodore 64 Ultimate: возрождение легенды в 2025 году +40

13:05

Кладбище криминальных экшенов. Почему почти все клоны GTA провалились, а студии закрылись +19

08:00

Без(д)воз(д)мездно, то есть даром +17

08:13

Новый рекорд по упаковке сфер неожиданно пришёл из геометрии +16

12:00

Как я пришёл в open source в 2025-м (с утилитой для бекапа PostgreSQL), чуть не потеряв проект на ~$1500\мес в 2023-м +15

07:16

Конфаундинг, или как аналитику попасть в ловушку +14

05:16

Алгоритмы для работы с большими данными в Go: HyperLogLog и Count-Min Sketch +12

17:50

Как собрать друзей на игру и не сойти с ума: мой бот для геймеров +11

08:00

Кремниевая революция по-китайски: как Пекин собирается обойти Тайвань и США к 2030 году +11

08:16

«Хочу, но боюсь и не делаю»: что делать со страхом того, что не получится? +9

06:15

Vue: Composables и TS это вам не Mixins и JS. С ними сложнее +8

15:35

Как ваш полет домой поможет инопланетянам определить местоположение Земли +7

10:15

Как дизайн Kaspersky Thin Client пережил подростковый бунт (и что из этого вышло) +7

10:15

Как дизайн Kaspersky Thin Client пережил подростковый бунт (и что из этого вышло) +7

10:08

Свой ChatGPT на документах: делаем RAG с нуля +7

09:02

Kubernetes на базе Deckhouse в облаке Linx Cloud: встроенный мониторинг, безопасность и управление сертификатами +7

ОБСУЖДАЕМОЕ

  • От React всё также веет безумием, но все об этом молчат +98

    • 292   34000

    Большинству людей плевать на качество софта +102

    • 241   24000

    Что делать вайбкодеру после 07/07 -2

    • 105   50000

    No Cars Allowed? Что с трендом на улицы без авто +5

    • 80   2700

    Простой ультразвуковой отпугиватель собак +36

    • 74   6400

    Вы тоже заказываете платы, компоненты и всячину здесь? +79

    • 64   23000

    Без(д)воз(д)мездно, то есть даром +17

    • 61   15000

    Скоро без нас: когда роботы окончательно отберут нашу работу? +5

    • 49   3200

    Как «по-быстрому» сделанная игра затянула меня в геймдев на 20 лет и какие выводы я из этого сделал +96

    • 45   24000

    Кто осознаёт? Почему главный вопрос о сознании — это не «что?», а «кто?» +3

    • 39   564

    Шифрование на основе хешей -6

    • 39   4500

    Вы точно их собеседовали: 8 личностей, которые приходят на интервью +11

    • 37   17000

    Почему я отказался внедрять тёмные паттерны и не получил оффер на фронтенд-лида +37

    • 37   9300

    Как я пришёл в open source в 2025-м (с утилитой для бекапа PostgreSQL), чуть не потеряв проект на ~$1500\мес в 2023-м +15

    • 36   15000

    Из личного VPN в целый сервис -2

    • 31   8400
  • Главная
  • Контакты
© 2025. Все публикации принадлежат авторам.