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

Подписка


ЛУЧШЕЕ

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

Как и почему менялись зарядные устройства +52

09:01

Сборка тревел-гитары из запчастей с Aliexpress +38

12:00

Как мы обманули Mozilla и почти взломали коллег +36

08:45

Антенны для вашего приёмника SDR +29

13:01

Реальна ли 3D-печать металлом на дому? +26

14:27

Электроника в вопросах и ответах 3 +22

10:57

Как мы изобрели свой велосипед с vuls и запустили сканирование уязвимого ПО на базе OpenSource решения +22

15:05

Экспресс-тест зарядки Apple 18W – обычный ширпотреб +16

09:22

Алгоритмы в повседневной жизни +16

10:54

Тестируем пять моделей DeepSeek R1 и Qwen3 на серверах YADRO +15

07:00

Как это сделано: пешеходный мост с пиксельной подсветкой +15

07:00

Миграция без боли и даунтайма: как мы перевозили данные с MongoDB на PostgreSQL +15

07:05

Как высокотехнологично «зашторить» окна +13

13:37

Визуализация управления памятью в Python: что творится внутри? +12

09:12

Китайский многофазный DC/DC источник — двойник с сюрпризом +12

11:01

Пока все отвечали: «Это не ко мне», релиз приближался +10

05:54

Почему облачные расходы невозможно предугадать, и к чему это приводит +10

09:14

Выжимка самого полезного о библиотеке Motion для React из англоязычной документации +9

07:30

Как мы освободили 20 ГБ в PostgreSQL без удаления данных +9

12:51

Какая LLM лучше распознает чертежи? Мы сравнили 6 LLM и узнали ответ +8

13:20

День, когда высох Ниагарский водопад +132

08:00

История Rust: от стартапа до продакшена +62

14:28

DOOMQL: DOOM-подобный многопользовательский шутер на чистом SQL +61

13:01

161-ФЗ и апелляция на Bybit: как я победил треугола +49

07:00

Как я делал датчики для души, а они стали приносить деньги +49

08:11

Post-PHP эра: куда движется веб-разработка? +47

08:13

Устройство на работу на позицию senior developer в 2025 году в Москве. Мой опыт +32

09:01

ЦОД как сервис, сисадмин как разработчик: как менялись модели +31

07:06

Whitechapel MG1: редкий компьютер с графическим интерфейсом из «Автостопом по Галактике» +29

18:08

Урок, который SpaceX извлекла из последнего полёта Starship: «Нам нужно герметизировать плитки» +27

07:00

Всё переписать: запускаем Cilium dualstack overlay поверх IPv6 underlay +27

08:38

Цифровизация производства: как российские IT-решения экономят миллиарды +24

09:02

Я рад, что застал рождение Рунета +22

11:48

Юридический лайфхак: ищем настоящие традиционные товары с помощью одного интересного госреестра +21

08:05

Делаем брелок с LED матрицей ярче +20

07:52

«Я играю, меня не беспокоить!». Как я стал зажигать световое табло On Air при подключении к TeamSpeak +19

22:12

Создание интерактивного макета. Задача упаковки кругов в круг. Метод отжига +18

06:31

Рецензия на книгу «Разработка мультитенантных SaaS-архитектур: принципы, модели, практика» +18

09:27

Нововведения Java 25 +16

10:40

Все роли в кибербезопасности на одной схеме: инструкция по планированию карьеры +13

ОБСУЖДАЕМОЕ

  • 161-ФЗ и апелляция на Bybit: как я победил треугола +49

    • 82   13000

    Устройство на работу на позицию senior developer в 2025 году в Москве. Мой опыт +32

    • 75   18000

    Как и почему менялись зарядные устройства +50

    • 65   5400

    История Rust: от стартапа до продакшена +62

    • 56   9200

    Post-PHP эра: куда движется веб-разработка? +47

    • 45   12000

    Как мир вернулся в «классический веб» — взлет и падение эпохи мобильных приложений +8

    • 37   8700

    День, когда высох Ниагарский водопад +132

    • 36   34000

    Почему посольство просит скинуть фото паспорта в WhatsApp — и что с этим не так +5

    • 33   5000

    Как я делал датчики для души, а они стали приносить деньги +49

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