Слайдеры

download Скачать sliders_ML_v2.js

Версия скрипта 2.0, последнее обновление: 25.05.2021

Слайдер - витрина, одиночный

Объект управления
  • data-showcase-prev='#id' - переключатель смещения влево;

  • data-showcase-next='#id' - переключатель смещения вправо;

Управляемый объект
  • data-showcase-slider='#id' - слайдер (родитель слайдов);

  • data-showcase-view='#num' - количество отображаемых слайдов (по умолчанию showcase является одиночным слайдером);

  • data-showcase-align='#type' - center (по центру) || выравнивание слайдов (по умолчанию - распределение на всю ширину слайдера с прижатием по краям); Когда в слайдере остаётся один слайд - он по умолчанию встает по центру;

  • data-showcase-height='adaptive' - устанавливает высоту слайдера как высоту самого высокого активного слайда (если слайдер меньше дочьки - он увеличивается и наоборот);

  • data-showcase-orientation='vertical' - устанавливает вертикальную ориентацию слайдов (по умолчанию horisontal - горизонтальная ориентация);

Зависимый объект
  • data-showcase-legend='#id' - добавляет легенду к слайдеру с #id

  • data-showcase-number='#id' - добавить счетчик активного слайда для слайдера с #id (только для одиночного слайдера);

  • data-showcase-number-format='#format' - first_zero_9 - добавить 0 перед числами мнеьше 10; first_zero_99 - добавить 0 перед числами меньше 100;

  • data-showcase-length='#id' - вывести общее количество слайдов в слайдере с #id (только для одиночного слайдера);

Примечание
  1. Автоуправление отображением переключателей (если они есть);

  2. соответствующая активному слайду легенда помечается классом active;

  3. Расстояние между слайдами вычисляется автоматически в зависимости от их выравнивания;

  4. Если слайды не помещаются - отображается на 1 меньше (но не меньше одного);

  5. Если в слайдер помещается больше одного слайда - отображается на 1 больше (но не больше установленного значения view);

  6. Слайдер расставляет позиции при инициализации, свайпе в доступную сторону, клике на объект управления, изменении размера body;

  7. Слайды расставляются свойствами left и top, они должны иметь позицию absolute, а слайдер - relative;

  8. Предполагается, что ширина горизонтальных слайдов указана и одинакова, как и высота вертикальных;

  9. Поскльку слайды имеют абсолютную позицию, лучше всего указывать высоту родителя или делать его height adaptive;

  10. Скрипт сам вычислит высоту и ширину слайдов, но если ваш слайдер скрыт (например, display none) - задавайте эти значения свойствами width и height т.к. могут быть ошибки с этим связанные;

Примеры:

№1. Инициализируем одиночный слайдер с отображением номера активного слайда

<div class="example_test_3_1 example_test"> <div class="slider_3_1" data-showcase-slider="3_1_1"> <div class="item"><p>1</p></div> <div class="item"><p>2</p></div> <div class="item"><p>3</p></div> <div class="item"><p>4</p></div> </div> <div class="info"><span data-showcase-number='3_1_1' data-showcase-number-format='first_zero_9'></span> / <span data-showcase-length='3_1_1'></span></div> <div class="control"> <div class="prev" data-showcase-prev="3_1_1"><p>Назад</p></div> <div class="next" data-showcase-next="3_1_1"><p>Вперёд</p></div> </div> </div>

1

2

3

4

/

Показать CSS

.section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }

№2. Добавим к слайдеру легенду и сделаем его высоту адаптивной, сделаем ширину слайда меньше, чтобы убедиться, что он центруется

<div class="example_test_3_2 example_test"> <div class="slider_3_2" data-showcase-slider="3_1_2" data-showcase-view='3' data-showcase-height='adaptive' data-showcase-align='center'> <div class="item"><p>1</p></div> <div class="item height_1"><p>2</p></div> <div class="item"><p>3</p></div> <div class="item height_2"><p>4</p></div> <div class="item"><p>5</p></div> <div class="item height_3"><p>6</p></div> </div> <ul class="legend" data-showcase-legend='3_1_2'></ul> <div class="control"> <div class="prev" data-showcase-prev="3_1_2"><p>Назад</p></div> <div class="next" data-showcase-next="3_1_2"><p>Вперёд</p></div> </div> </div>

1

2

3

4

5

6

    Показать CSS

    .section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }

    №3. Вертикальный слайдер

    <div class="example_test_3_3 example_test"> <div class="slider_3_3" data-showcase-slider="3_1_3" data-showcase-view='3' data-showcase-orientation='vertical'> <div class="item"><p>1</p></div> <div class="item height_1"><p>2</p></div> <div class="item"><p>3</p></div> <div class="item height_2"><p>4</p></div> <div class="item"><p>5</p></div> <div class="item height_3"><p>6</p></div> </div> <ul class="legend" data-showcase-legend='3_1_3'></ul> <div class="control"> <div class="prev" data-showcase-prev="3_1_3"><p>Назад</p></div> <div class="next" data-showcase-next="3_1_3"><p>Вперёд</p></div> </div> </div>

    1

    2

    3

    4

    5

    6

      Показать CSS

      .section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }

      Слайдер - лента

      Объект управления
      • data-feed-prev='#id' - переключатель смещения влево (align по умолчанию);

      • data-feed-next='#id' - переключатель смещения вправо (align по умолчанию);

      Управляемый объект
      • data-feed-slider='#id' - слайдер (родитель слайдов);

      • data-feed-slider-gap='number' - расстояние между слайдами (по умолчанию 0); Расстояние между слайдами можно задать относительно от ширины body благодаря следующей конструкции вместо number "min_width:70,min_width_2:40,min_width_3:20" === "1300:70,800:40,0:20";

      • data-feed-slider-align='#type' - right (по правому краю) || выравнивание слайдов (по умолчанию left - по левому краю);

      Примечание
      1. Автоуправление отображением переключателей (если они есть);

      2. У слайдов должна быть определена ширина (предполагается, что она одинаковая);

      3. Слайдер расставляет позиции при инициализации, свайпе в доступную сторону, клике на объект управления, изменении размера body;

      4. Слайды расставляются свойствами left, они должны иметь позицию absolute, а слайдер - relative;

      5. Поскльку слайды имеют абсолютную позицию, лучше всего указывать высоту родителя;

      6. Скрипт сам вычислит ширину слайдов, но если ваш слайдер скрыт (например, display none) - задавайте эти значения свойством width т.к. могут быть ошибки с этим связанные;

      7. В случае, когда смещение ленты приведет к пустому пространству позади себя - слайд прижимается к границе;

      Примеры:

      №1. Инициализируем ленту

      <div class="example_test_3_2 example_test"> <div class="slider_3_2" data-feed-slider="3_2_1"> <div class="item"><p>1</p></div> <div class="item"><p>2</p></div> <div class="item"><p>3</p></div> <div class="item"><p>4</p></div> <div class="item"><p>5</p></div> <div class="item"><p>6</p></div> <div class="item"><p>7</p></div> <div class="item"><p>8</p></div> </div> <div class="control"> <div class="prev" data-feed-prev="3_2_1"><p>Назад</p></div> <div class="next" data-feed-next="3_2_1"><p>Вперёд</p></div> </div> </div>

      1

      2

      3

      4

      5

      6

      7

      8

      Показать CSS

      .section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }

      №2. Инициализируем ленту в противоположную сторону и динамическим отступом

      <div class="example_test_3_2 example_test"> <div class="slider_3_2" data-feed-slider="3_2_1"> <div class="item"><p>1</p></div> <div class="item"><p>2</p></div> <div class="item"><p>3</p></div> <div class="item"><p>4</p></div> <div class="item"><p>5</p></div> <div class="item"><p>6</p></div> <div class="item"><p>7</p></div> <div class="item"><p>8</p></div> </div> <div class="control"> <div class="prev" data-feed-prev="3_2_1"><p>Назад</p></div> <div class="next" data-feed-next="3_2_1"><p>Вперёд</p></div> </div> </div>

      1

      2

      3

      4

      5

      6

      7

      8

      Показать CSS

      .section_2 .wrapper .content .example .example_test { background: #eee; padding: 20px; margin-bottom: 15px !important; } .example_test_3_1 .slider_3_1 { position: relative; width: 100%; height: 100px; overflow: hidden; cursor: grab; } .example_test_3_1 .slider_3_1 .item { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: skyblue; font-size: 40px; user-select: none; transition: all 0.8s; } .description p, .example ul, .content .example p { margin-bottom: 15px; line-height: 1.2; } .example_test_3_1 .slider_3_1 .item p, .example_test_3_1 .control > div p{ margin: 0 !important; } .example_test_3_1 .info { margin-top: 15px; font-weight: bold; } .example_test_3_1 .control { position: relative; margin-top: 20px; height: 25px; } .example_test_3_1 .control > div.prev { left: 0; } .example_test_3_1 .control > div { cursor: pointer; padding: 5px; background: #ccc; width: max-content; border-radius: 5px; transition: all 0.3s; user-select: none; position: absolute; display: flex; justify-content: center; align-items: center; height: 25px; width: 80px; } .example_test_3_1 .control > div.next { left: 95px; }