JavaScript: карусель картинок, строим каркас 1: ilyachalov — LiveJournal

Решил задачу «Карусель» к подразделу 2.1 «Введение в браузерные события» второй части учебника по JavaScript.

Задача состоит в том, чтобы на HTML-странице создать карусель картинок. Что такое «карусель картинок»? Это механизм, с помощью которого пользователь может листать имеющиеся картинки кнопками влево и вправо. В таком виде, бывает, оформляют фотоальбом на сайте или фотоальбомы в соцсетях.

В задаче дана HTML-страница, на которой частично уже построена карусель картинок. Требуется достроить каркас карусели, созданный на языках HTML и CSS, а затем придать карусели интерактивность, написав функционал кнопок на языке JavaScript. Код заданной HTML-страницы можно посмотреть в песочнице.

Мне было интересно сначала понять, как создали каркас карусели на языках HTML и CSS.

Для постройки тестовой карусели в задаче дано десять картинок:
https://ru.js.cx/carousel/1.png
https://ru.js.cx/carousel/2. png
…
https://ru.js.cx/carousel/10.png

На этих картинках изображено десять разных смайликов.

Задача изначально упрощена: как я понимаю, предполагается, что все картинки представляют собой одинаковые квадраты (размеры разных картинок равны друг другу, ширина и высота каждой картинки тоже равны друг другу). Для хранения этого размера в будущем скрипте будем использовать константу PIC_SIZE, равную 130px (это размер оригиналов заданных картинок).

В теле HTML-страницы картинки помещены в пункты HTML-списка:

<ul>
  <li><img src="https://ru.js.cx/carousel/1.png"></li>
  <li><img src="https://ru.js.cx/carousel/2.png"></li>
  <!-- ... -->
  <li><img src="https://ru.js.cx/carousel/10.png"></li>
</ul>

У меня в браузере («Microsoft Edge» на движке «Chromium») это выглядит так (картинка):

Серая линия слева и сверху — это граница области просмотра браузера. Толстые черные точки слева от картинок смайликов — это значки пунктов списка.

Для нашей карусели картинок требуется, чтобы картинки располагались не вертикально, а горизонтально, очередью. Так как у нас картинки размещены в пунктах HTML-списка, нам требуется расположить пункты списка горизонтально, друг за другом. Сделаем это, настраивая стили HTML-списка и его пунктов на языке CSS. Стили в задаче размещены в отдельном файле

style.css, включенном на заданную HTML-страницу.

По умолчанию тип отображения (CSS-свойство display) пунктов HTML-списка равен значению list-item. В нашем случае он ведет себя как блочный элемент, то есть занимает всю ширину области просмотра. Кроме этого, этот тип отображения генерирует перед содержимым пункта псевдо-элемент ::marker (значок пункта списка). Поменяв тип отображения на значение inline-block, мы добьемся исчезновения псевдо-элементов ::marker у пунктов списка, а также того, что пункты списка смогут располагаться горизонтально, друг за другом:

ul li {
  display: inline-block; /* разместить пункты списка горизонтально */
}

У меня в браузере это выглядит так (картинка):

У HTML-списка браузеры по умолчанию обычно устанавливают внутренние (padding) и внешние (margin) отступы. В нашей карусели картинок эти отступы не нужны (могут усложнить расчёты в скрипте на языке JavaScript), поэтому уберем их:

ul {
  margin: 0;             /* уберем внешние и внутренние */
  padding: 0;            /* умолчательные отступы от браузера */
}
ul li {
  display: inline-block; /* разместим пункты списка горизонтально */
}

Для картинок (это уже объяснялось в нескольких предыдущих постах) в стиле картинок укажем их ширину и высоту, чтобы браузер в любой ситуации знал размер содержимого пунктов списка и мог быстро отобразить картинки и пункты списка, не роясь в кэше в поисках размеров картинок. (Также таким образом исключаем ситуацию, когда при первой загрузке HTML-страницы браузер не знает размеров картинок и расчеты в скрипте на языке JavaScript, отталкивающиеся от размеров картинок, могут в этом случае дать неверные результаты.) Меняем код стилей:
ul {
  margin: 0;             /* уберем внешние и внутренние */
  padding: 0;            /* умолчательные отступы от браузера */
}
ul img {
  width: 130px;          /* размеры картинок */
  height: 130px;
}
ul li {
  display: inline-block; /* разместим пункты списка горизонтально */
}

Также в нашей карусели картинок нам не нужны и промежутки между картинками (тоже могут усложнить расчёты в скрипте на языке JavaScript). Есть ли они? Чтобы проверить это, временно сделаем красную рамку вокруг каждого пункта HTML-списка и серый фон для каждой картинки (оригиналы картинок имеют прозрачный фон):
ul {
  margin: 0;             /* уберем внешние и внутренние */
  padding: 0;            /* умолчательные отступы от браузера */
}
ul img {
  width: 130px;          /* размеры картинок */
  height: 130px;
  background-color: silver; /* временно, серый фон */
}
ul li {
  display: inline-block; /* разместим пункты списка горизонтально */
  border: 1px solid red;    /* временно, красная рамка */
}

У меня в браузере получилось следующее (картинка):


Во-первых, обратим внимание на то, что между нашим HTML-списком и границей области просмотра браузера всё еще есть промежуток (у меня в браузере он равен 8px). Это внешний отступ (margin), устанавливаемый браузером по умолчанию для тела (body) HTML-страницы. Нам он не помешает, потому что в будущем мы вставим наш HTML-список внутрь другого контейнера, HTML-элемента

div.

Во-вторых, на иллюстрации видно, что между отдельными пунктами нашего HTML-списка (напомню, пункты временно обведены красной границей-рамкой для наглядности) есть промежуток. Откуда он взялся? На самом деле этот промежуток есть в исходном коде нашей HTML-страницы, это пробельные символы между HTML-элементами li (напомню, в состав пробельных символов входят не только пробелы, но и символы новой строки, и символы табуляции).

Избавиться от этого промежутка можно несколькими способами. Например, можно удалить пробельные символы между HTML-элементами

li в исходном коде нашей HTML-страницы. Но тогда исходный код нашей HTML-страницы станет плохо читаемым (все пункты HTML-списка будут слеплены в одну строку). Как я видел, из исходного кода HTML-страниц многих сайтов, сделанных профессионалами, убраны все лишние пробельные символы. Там это оправдано, потому что пользователь исходный код HTML-страницы не читает (ему достаточно отображения HTML-страницы в браузере), а кодеры пользуются специальными программами, которые убирают лишние пробельные символы только в самом конце написания HTML-страницы, перед ее загрузкой на сайт.

В нашем же случае я не хотел бы убирать пробельные символы в коде HTML-списка, чтобы не ухудшать читаемость кода заданной HTML-страницы. Тогда можно применить другой способ: сделать размер шрифта равным нулю с помощью указания font-size: 0; в стиле нашего HTML-списка.

В-третьих, на иллюстрации видно, что внутри каждого пункта нашего HTML-списка, между нижней границей картинки со смайликом и нижней границей самого пункта тоже присутствует некий промежуток (у меня в браузере он составил 4px). Откуда он взялся?

Дело в том, что HTML-элемент img по умолчанию является строчным HTML-элементом, то есть его тип отображения — inline. А браузер старается расположить все строчные HTML-элементы в строке так, чтобы все они находились на базовом уровне строки. Что это за уровень? Это линия, на которой «стоят» все буквы в строке. У некоторых букв элементы этих букв «свисают» ниже базовой линии строки. В разных шрифтах по-разному, но зачастую, к примеру, у русской строчной буквы «у» или у английской буквы «g» нижняя закорючка «свисает» ниже базовой линии.

И таких букв не так уж и мало в алфавитах и шрифтах. На этот случай браузер резервирует для строчных HTML-элементов определенное пространство ниже базового уровня (базовой линии) строки (в данном случае — 4px).

Чтобы проиллюстрировать описанное, добавим к нашему HTML-списку временный пункт с текстом:

<ul>
  <li><img src="https://ru.js.cx/carousel/1.png"></li>
  <li><img src="https://ru.js.cx/carousel/2.png"></li>
  <!-- ... -->
  <li><img src="https://ru.js.cx/carousel/10.png"></li>
  <li>Буквы: ф, р, g.</li> <!-- временный пункт -->
</ul>

Вот как это выглядит у меня в браузере (картинка):

Увеличим (я увеличил кусочек предыдущей картинки в графическом редакторе в 4 раза):

На этой иллюстрации я обозначил базовую линию тонкой красной линией. Текст четвертого пункта нашего HTML-списка отображен шрифтом по умолчанию (в моем браузере в настройках шрифтом по умолчанию установлен «Times New Roman»), размер шрифта тоже — по умолчанию (в моем браузере это

16px). В этом шрифте при этом размере строчные русские буквы «у», «ф», «р» и строчная английская буква «g», как видно на иллюстрации, «свисают» ниже базовой линии строки на 3 пикселя. Запятая «свисает» ниже базовой линии строки на 2 пикселя.

Теперь стало понятно, откуда взялся рассматриваемый промежуток. А как его убрать? Тут тоже есть несколько способов. Например, если поменять тип отображения HTML-элемента img с умолчательного inline на block с помощью указания display: block; в стиле HTML-элемента img, то HTML-элемент img станет не строчным, а блочным, браузер не станет резервировать место под «свисающие» буквы и рассматриваемый промежуток исчезнет.

Другой вариант — это вышеупомянутое указание font-size: 0; в стиле нашего HTML-списка. Если размер шрифта будет равен нулю, то браузеру не будет нужды резервировать место под «свисающие буквы» и рассматриваемый промежуток опять же исчезнет. Поэтому, думаю, стоит остановиться на этом варианте, потому что он устраняет сразу две проблемы (два вида промежутков).

Итак, мы организовали наш HTML-список картинок в горизонтальную очередь и убрали все ненужные отступы и промежутки между картинками. Однако, все вышеприведенные тесты проводились только для трех картинок. Если теперь добавить в HTML-список все 10 заданных изначально картинок, то те картинки, которые не поместятся в строке по ширине области просмотра браузера, перейдут на следующую строку. А нам нужно, чтобы все заданные картинки представляли очередь только в одну строку, даже если она выйдет за пределы области просмотра браузера. Для этого в стиль HTML-списка можно добавить указание width: 9999px;. Не обязательно, конечно, было брать такую большую ширину, но а вдруг в будущем нам захочется добавить картинок в карусель? Запас не помешает.

В итоге мы пока получили вот такой файл со стилями:

ul {
  margin: 0;             /* уберем внешние и внутренние умолчательные */
  padding: 0;            /* отступы, назначенные браузером */
  font-size: 0px;        /* уберем промежутки между картинками */
                         /* и промежутки для «свисающих» букв */
  width: 9999px;         /* разместим пункты списка в одну строку */
}
ul img {
  width: 130px;          /* размеры картинок */
  height: 130px;
}
ul li {
  display: inline-block; /* разместим пункты списка горизонтально */
                         /* и уберем маркеры списка */
}

Продолжение тут.

html — Выравнивание размера изображений в карусели по вертикали

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://cdn. jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous"></script>
<div>
    <nav>
        <a href="#">
            <img src="src/img/navLogo.png">
        </a>
        <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
        </button>
        <div>
            <ul>
                <li>
                    <a href="#" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Наши контакты
                    </a>
                    <div aria-labelledby="navbarDropdown">
                        <a href="#">Как с нами связаться?</a>
                        <div></div>
                        <a href="#">Где нас найти?</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div>
    <div>
        <div>
            <ol>
                <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div>
                <div>
                    <img src="https://cdn. bitrix24.ru/b205787/landing/4fa/4fa630f6ec6e609b82b65ce6e7585c28/nasza_flota.jpg" alt="First slide">
                </div>
                <div>
                    <img src="https://cdn.bitrix24.ru/b205787/landing/a40/a40b2b078db49f9c2e23233d228b87c3/2_2x.jpg" alt="Second slide">
                </div>
                <div>
                    <img src="https://cdn.bitrix24.ru/b205787/landing/788/788484872f6143c0511ec4faefbeabb7/5_2x.jpg" alt="Third slide">
                </div>
            </div>
            <a href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span aria-hidden="true"></span>
                <span>Previous</span>
            </a>
            <a href="#carouselExampleIndicators" role="button" data-slide="next">
                <span aria-hidden="true"></span>
                <span>Next</span>
            </a>
        </div>
    </div>
</div>

Доброго времени суток. Хотел бы узнать. В данном случае можно ли как то изменить размер слайдов к какой то общей величине? Или здесь проблема в самих исходных изображениях?

  • html
  • css
  • bootstrap
  • bootstrap4

Не особо понятно, что именно вы хотите сделать, но, скорее всего, можно.

Можете попробовать поиграться со свойством object-fit для изображений, отображение которых вы хотите изменить.

.carousel-item {
  height: 300px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap. min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
        crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
            crossorigin="anonymous"></script>
<div>
    <nav>
        <a href="#">
            <img src="src/img/navLogo.png">
        </a>
        <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
        </button>
        <div>
            <ul>
                <li>
                    <a href="#" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Наши контакты
                    </a>
                    <div aria-labelledby="navbarDropdown">
                        <a href="#">Как с нами связаться?</a>
                        <div></div>
                        <a href="#">Где нас найти?</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div>
    <div>
        <div>
            <ol>
                <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <div>
                <div>
                    <img src="https://cdn. bitrix24.ru/b205787/landing/4fa/4fa630f6ec6e609b82b65ce6e7585c28/nasza_flota.jpg" alt="First slide">
                </div>
                <div>
                    <img src="https://cdn.bitrix24.ru/b205787/landing/a40/a40b2b078db49f9c2e23233d228b87c3/2_2x.jpg" alt="Second slide">
                </div>
                <div>
                    <img src="https://cdn.bitrix24.ru/b205787/landing/788/788484872f6143c0511ec4faefbeabb7/5_2x.jpg" alt="Third slide">
                </div>
            </div>
            <a href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span aria-hidden="true"></span>
                <span>Previous</span>
            </a>
            <a href="#carouselExampleIndicators" role="button" data-slide="next">
                <span aria-hidden="true"></span>
                <span>Next</span>
            </a>
        </div>
    </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Thumbnail Carousel — Splide

Введение

Карусель может синхронизироваться с другой каруселью методом sync() , и опция isNaviation делает карусель доступной для навигации. Используя эти две функции, мы можем создать карусель с миниатюрами, например:

На этой странице объясняется, как создать карусель такого типа.

Карусель миниатюр

Начнем с карусели миниатюр.

 
  <   раздел  
   
  id   =   "эскиз-карусель"  
   
  класс   =   "слайд"  
   
  aria-метка   =   " Карусель с миниатюрами. Выбор миниатюры изменит карусель Beautiful Gallery."  
 
  >  
   
  <   деление     класс   =   "splide__track"   >  
   
  <   ul     class   =   "splide__list"   >  
   
  <   li     класс   =   "splide__slide"   >  
   
  <   изображение 9000 6    источник   =   "thumbnail01. jpg"     alt   =   ""   >  
   
 9000 5 <   li     класс   =   "splide__slide"   >  
   
  <   img     src   =   "thumbnail02.jpg"    90 005 альтернативный   =   ""   >  
   
  <   li     класс   =   "splide__slide"   >  
   
  <   img     src   =   "thumbnail03.jpg"     alt   =   ""   >  
   
  <   /   дел   >  
 
  <   /   раздел   >  
 
 HTML

Карусель эскизов должна отображать несколько слайдов на странице. Обычно мы используем параметр на страницу для определения количества слайдов, но трудно определить число с точки зрения ответственности, даже если использовать точки останова.

Чтобы решить эту проблему, давайте использовать fixedWidth , чтобы зафиксировать ширину слайда в зависимости от размера окна.

 
  документ   .   addEventListener   (     'DOMContentLoaded'   ,     функция   9000 6  (   )     {  
   
  новый     Шлиц   (     '#thumbnail-carousel'   ,     {  
   
  fixedWidth   :     100   ,  
   
  пробел     :     10   ,  
   
  перемотка назад     :     правда   , 90 006 
   
  нумерация страниц   :     false   ,  
   
  }  900 05  )  .    крепление   (   )   ;  
 
  }     )   ;  
 
 JavaScript

Затем нам нужно подогнать миниатюру под размер слайда. Если все эскизы имеют одинаковое соотношение сторон, достаточно следующего CSS:

 
  .splide__slide     img     {  
  90 006 
  ширина   :     100   %   ;  
   
  высота   :     авто   ;  
 
  }  
 
 CSS

Если нет, давайте использовать object-fit , чтобы закрыть каждый слайд миниатюрой (IE не поддерживает это свойство!). Чтобы это работало, нам нужно установить fixedHeight :

 
  document   .   addEventListener   (     'DOMContentLoaded'   ,     функция     (  9000 5 )     {  
   
  новый     Слайд   (     '#thumbnail-carousel'  ,     {  
   
  fixedWidth     : 9000 6    100   ,  
   
  fixedHeight   :     60   ,  
  90 006 
  зазор     :     10   ,  
   
  перемотка 9 0006    :     правда   ,  
   
  нумерация страниц     :  900 05   ложь   ,  
   
  }     )   .    крепление   (   )   ;  
 
  }     )   ;  
 
 JavaScript

... и применить это свойство к эскизам:

 
  .splide__slide     img   900 06  {  
   
  ширина   :     100   %   ;  
   
  высота   :     100   %   ;  
   
  предметная   :     крышка   ;  
 
  }  
 
 CSS

Теперь карусель будет выглядеть так:

Выглядит довольно хорошо, но есть несколько вещей, которые мы должны учитывать:

  • Пользователь не может сказать, какой слайд выбран
  • 100px вероятно великоват для мобильных устройств
  • Активный слайд должен быть по возможности в центре

Если вы используете тему CSS, например splide. min.css или splide-skyblue.min.css , он подчеркивает активный слайд, добавляя стиль границы. В противном случае вам придется вручную стилизовать его с помощью класса статуса is-active :

 
  .splide__slide     {  
   
  непрозрачность   :     0,6   ;  
 
  }  
 
  05 непрозрачность   :     1   ;  
 
  }  
 
 CSS

Опции breakpoints и focus помогают решить вторую и третью проблемы. Если вы не используете object-fit , fixedHeight не требуется.

 
  новый     Splide   (     '#thumbnail-carousel'   ,     {  
   
  фиксированная ширина     :     100  9000 5 ,  
   
  fixedHeight   :     60   ,  
  
  зазор     :     10   ,  
   
  перемотка назад     :     правда   ,  
   
  нумерация страниц  9000 5   :     ложь   ,  
   
  фокус     :    9 0005 'центр'   ,  
   
  точки останова   :     {  
   
  600   :     {  
   
  фиксированная ширина     :  90 005   60   ,  
   
  fixedHeight   :     44   ,  
 9 0017  }    )  .    крепление   (   )   ;  
 
 JavaScript

Далее нам нужно сделать слайды интерактивными, установив isNavigation на true :

 
  new   90 006  Splide   (     '#thumbnail-carousel'   ,     {  
   
  фиксированная ширина     :     100   ,  
   
  fixedHeight     :   900 06  60   ,  
   
  зазор     :     10  9 0005 ,  
   
  перемотка назад     :     правда   ,  
   
  пагинация     :     ложь   ,  
   
  isNavigation   :  90 005   true   ,  
   
  контрольные точки     :     { 90 006 
   
  600   :     {  
   
  фиксированная ширина    90 005 :     60   ,  
   
  fixedHeight   :     44   ,  
 
  }     )   .    крепление   (   )   ;  
 
 JavaScript

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

В результате карусель выглядит так. Нажмите на миниатюру, и вы увидите, как движется карусель:

Чтобы игнорировать небольшое перетаскивание мышью, используйте параметр dragMinThreshold .

Основная карусель

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

В этом примере отключаются стрелки и нумерация страниц, но если вы хотите включить их, просто удалите эти параметры.

Синхронизация

Чтобы синхронизировать основную карусель с миниатюрами, используйте Splide#sync() 9Метод 0006. Вы должны вызвать его до mount() .

 
  переменная     основная     =     новая    90 005 Splide   (     '#main-carousel'   ,     {     ...     }     )   ;  
 
  вар     эскизы     =     новый     Splide   (     '#thumbnail-carousel'   ,     {     ...     }     )   ;  
 
  основной   .    синхронизация   (     эскизы     )   ;  
 
  основной   .   крепление   (   )   ;  
 
  эскизы   .   крепление   (   )   ;  
 
 JavaScript

Вот и все! 🎊 Вот весь код этого туториала:

 
 1 
 
 2 
 
 3 
 
 4 
 
 5 
 
 6 
 
 7 900 09 
 8 
 
 9 
 
 10 
 
 11 
 
 12 
 
 13 
 
 14 
 
 15 
 
 16 
 
 17 
 
 18 
 
 19 90 009 
 20 
 
 21 
 
 22 
 
 23 
 
 24 
 
 25 
 
 26 
 
 27 
 
  документ   .   addEventListener   (     'DOMContentLoaded'   ,     функция   9000 6  (   )     {  
   
  переменная     основная     =    900 05 новый     Splide   (     '#main-carousel'   ,     {  
   
  тип     :     'выцветание'   ,  
 90 005  
  перемотка назад     :     правда   ,  
   
  нумерация страниц   :   9000 6  ложь   ,  
   
  стрелки     :     ложь   ,  
   
  var     эскизы     =     новый     Слайд   (     '#thumbnail-carousel'   ,     {  
   
  фиксированная ширина     :     100   ,  
   
  fixedHeight   9000 6  :     60   ,  
   
  пробел     :  900 05   10   ,  
   
  перемотка назад     :     правда   ,  
  9 0006 
  нумерация страниц     :     ложь   ,  
   
  isNavi   : Точки останова  {  
   
  600   :     {  
   
  фиксированный Ширина     :     60   ,  
   
  fixedHeight   :     44   ,  
   
  основной   .    синхронизация   (     эскизы    )  ;  
   
  основной   .   крепление   (   )   ;  
   
  эскизы   .   крепление   (   )   ;  
 
  }     )   ;  
 
 JavaScript

Прогресс карусели — Splide

Введение

Всего несколькими строками вы можете создать индикатор выполнения карусели, подобный этому:

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09

HTML и CSS

Мы можем создать панель с тегами

и CSS :

 
  <   секция     класс   =   "шлиф"     aria- метка   =   ". .."   >  
   
  <   div     class   =   "splide__track"   >  
   
  <   ul     класс   =   "splide__list"   >  
   
  <   li     класс   =   "splide__slide"   > 9000 6  Слайд     01   <   /   li   >  
   
  <   /  9000 5 деление   >  
   
  <   деление     класс   =   "my-carousel-progress"   >  
   
  <   div     class   =  90 005 "моя-карусель-прогресс-бар"   >   <   /   дел.  v   >  
 
  <   /   раздел   >  
 
 HTML 
 
 
  .my-carousel-progress     {  
   
  фон   :   9000 6  #ccc   ;  
  }  
 
  .my-carousel-progress-bar     {  
   
  фон  90 005 :     зелено-желтый   ;  
   
  высота   :     2   px   ;  
   
  переход   :     ширина     400   мс     легкость   ;  
   
  ширина   :     0   ;  
 
  }  
 
 CSS

Я рекомендую использовать то же значение скорости карусели ( options. speed ), что и продолжительность перехода. Это делает карусель и бар более синхронизированными.

JavaScript

Мы можем рассчитать скорость выполнения из текущего индекса и конечного индекса — (текущий + 1) / (конечный + 1) . Обновим ширину полосы через Splide#index и Controller#getEnd() каждый раз, когда карусель движется:

 
  var     splide     =     new  90 005   Splide   (     '.splide'     )   ;  
 
  вар     бар     =     слайд   .   корень   .   querySelector   (     '.my-carousel-progress-bar'     )   ;  
 
  шлейф   .    на   (     'навесное перемещение'   ,     функция     ( 9 0006  )     {  
   
  вар     конец     =     шлиф   .   Компоненты   .   Контроллер   .   getEnd   (   )     +     1   ;  
   
  вар     скорость     =     Математика   .   мин.   (     (     слайд   .   индекс   900 06  +     1     )     /     конец   ,     1     )   ;  
   
  бар   .    стиль   .   ширина     =     Строка   (     100     *     курс     )     +     '%'   ;  
 
  }     )   ;  
 
  шлейф   .   крепление   (   )   ;  
 
 JavaScript

Чтобы установить начальную ширину, пример кода также прослушивает событие монтирования .

Советы

Вы можете создать интерактивный индикатор выполнения, выполнив еще несколько шагов:

  • Вычислить целевой индекс по позиции щелчка
  • Переместить карусель на Splide#go()

Для доступности я рекомендую предоставить атрибуты aria, такие как aria-controls , aria-valuenow и другие.

No related posts.