• Главная
  • Контакты
Подписаться:
  • 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

Подписка


ЛУЧШЕЕ

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

Исследование METR: использование Cursor замедляет опытных разработчиков на 19 % +30

09:01

Первые анекдоты о программистах: юмор айтишников на переломе тысячелетий, 1999-2000 годы +29

08:41

Как в РФ разрабатывали уникальный судовой радар ближней зоны в диапазоне 76 ГГц +22

08:14

Xreal One Pro — подробный разбор новых AR-очков с чипом X1 и экраном до 191 дюйма +13

05:29

VLESS+Reality и Multi-hop: Архитектура VPN-цепочки для нового поколения блокировок +13

13:01

Голографический принцип: реальность как иллюзия +12

06:05

История игровой журналистики в России +10

12:00

Самодельный компьютерный стол с навороченной начинкой внутри за 20 шагов +9

05:48

Универсальные подсказки по промптам (продвинутые советы) (Ч.2) +5

14:05

Drift Skate, Freeskates, Freeline Skates, Кайф +4

04:37

Laravel: электронная подпись на сервере с PDF визуализацией +3

01:17

Сделай удобно: подборка UI/UX-кейсов из цифровых и нецифровых продуктов (#18) +3

16:32

Девушки, котики и Flux Kontext: как выжать максимум из WebUI Forge? +2

14:44

Разработка требований к ПО с помощью Markdown, Git и Obsidian +2

11:29

«Почему топ менеджеры выбирали SAP, но...» что пошло не так у автора +2

08:07

Хронометр Гаррисона: прибор, спасший жизни сотен моряков +69

09:01

Самодельные любительские радиолампы. Франция, 1920 г. Часть 1 +59

13:01

Блеск и ад p2p-торговли на Bybit +54

13:20

Август 2009. Катастрофа в Саянах +46

08:06

Novomatic Coolfire. Самый навороченный игровой автомат двухтысячных +33

08:01

ZFS on Linux: установка Ubuntu с корнем в ZFS, RAID и шифрованием +30

00:26

С торца — экран, внутри — эпоха: портативные (носимые) компьютеры 80-85 гг +30

12:00

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

14:17

От Аристотеля до Тьюринга: что такое функциональное программирование и как оно облегчает жизнь +23

09:58

«IT-Планета 2025»: задачи третьего этапа по PostgreSQL +20

12:36

Руководство по pgcrypto — шифрование внутри PostgreSQL. Часть 2 +19

07:45

От промтов к агентам: как мы дошли до трансформеров, что LLM умеют уже сейчас и что нас ждёт в 2027 году +19

07:00

Хронический тонзиллит: «резать» или терпеть? Вот в чём вопрос +18

16:17

Почему топ менеджеры выбирали SAP, но не выбирали 1С, а теперь они тусуются на ЦИПР? +17

10:22

Как уменьшить размер модели Power BI на 90% +15

09:07

Краткий обзор платформы данных Т-Банка +15

11:59

Маленькое приключение в поиске ошибок. The Battle for Wesnoth +14

05:13

Модель Кано: как отличить «Вау!» от обязательного. Практическое руководство по приоритизации фич +12

11:57

Профилирование php приложений с помощью Excimer +11

04:57

Как в Mercado Libre перевели внутреннюю платформу разработки на Kubernetes +11

16:07

Эксперты шокированы: язык программирования на основе кликбейтных заголовков +76

08:10

Космотекст: запускаем лучшие статьи в космос +65

13:01

Децентрализованные хостинги/системы хранения данных +53

14:56

В решение этой математической задачи с укладкой блоков сложно поверить +47

09:01

Китайский экстремальный фузз-дисторшн для металла +41

08:01

И снова испанская барахолка: оптический нивелир, измеритель поля и… утюги +41

22:30

— Ты там работай, но столько платить мы не можемǃ +38

07:00

90 лет нашей железной дороге, теперь ею управляют роботы +36

12:00

GPU за рубль, 1 000 000 для стартапов и не только: продуктовые апдейты в Selectel за июнь +26

14:05

Капсула времени Olivetti, калькуляторы 1950-х и фильм ‭«Дюна‭». Что у них общего? +23

07:00

Разбираем на запчасти поисковый сервис в Яндекс Лавке +22

07:30

Как Томас Кук туризм придумал +20

11:19

Как превратить набор кубиков в ресурсно-сервисную модель для аналитики и алертинга приложений +18

11:19

Как превратить набор кубиков в ресурсно-сервисную модель для аналитики и алертинга приложений +18

18:34

Пишем код, который можно бегло просматривать +17

11:24

Мой долгий путь до GPIO в QEMU +17

08:25

Мой первый VPS: Чек-лист по превращению «голой» машины в маленькую крепость (Часть 1) +17

05:17

В два раза лучше ChatGPT o3. Представлен Grok 4 +17

13:20

Тайны сердца на ЭКГ +16

10:15

Программируемая розетка на AVR +16

ОБСУЖДАЕМОЕ

  • Max от VK — мессенджер, который хочет стать российским WeChat. Что уже есть и что не так? -16

    • 136   23000

    Почему топ менеджеры выбирали SAP, но не выбирали 1С, а теперь они тусуются на ЦИПР? +17

    • 83   26000

    — Ты там работай, но столько платить мы не можемǃ +38

    • 72   6800

    IT-пузырь лопнул? Что реально происходит на рынке: мнение Head of Recruitment +12

    • 57   6100

    ZFS on Linux: установка Ubuntu с корнем в ZFS, RAID и шифрованием +30

    • 50   3700

    От Аристотеля до Тьюринга: что такое функциональное программирование и как оно облегчает жизнь +23

    • 47   6100

    Самодельный компьютерный стол с навороченной начинкой внутри за 20 шагов +9

    • 46   4000

    Яндекс.Полуразврат или при чём тут Crypt? +7

    • 43   2700

    «Почему топ менеджеры выбирали SAP, но...» что пошло не так у автора +2

    • 40   1500

    Мой первый VPS: Чек-лист по превращению «голой» машины в маленькую крепость (Часть 1) +17

    • 39   13000

    Блеск и ад p2p-торговли на Bybit +54

    • 37   13000

    Самодельные любительские радиолампы. Франция, 1920 г. Часть 1 +59

    • 36   6600

    Исследование METR: использование Cursor замедляет опытных разработчиков на 19 % +30

    • 34   8200

    В два раза лучше ChatGPT o3. Представлен Grok 4 +17

    • 32   18000

    Сознание — не место для дискуссий +9

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