Скрипты

ticket-plus-система-технической-поддержки-клиентов  - позволяет вам легко масштабировать и оптимизировать обслуживание клиентов и значительно улучшать положительное отношение ваших клиенов. Ticket...
phpsound-1-2-7-платформа-обмена-музыкойPhpSound - это социальная платформа обмена музыкальными файлами, похожей на soundcloud. Сервис даёт пользователям возмоность загружать свою музыку, и...
wowonder-v-1-3-социальная-сетевая-платформа WoWonder - это PHP-скрипт социальной сети, WoWonder это лучший способ чтобы начать создание собственного сайта социальной сети. Этот скрипт имеет все...

Для Photoshop

animation-glitch-photoshop-action Action для программы Photoshop, который генерирует видео ряд анимационных эффектов в виде помех на экране, из ваших изображений. Вы можете создать...
radiant-action-photoshop Экшен для программы Photoshop, создаёт эффект света и геометрических фигур, что поможет создать стильный модный вид вашему образу. Создавайте яркие и...
doomsday-action-экшен-для-photoshop Экшен для программы Photoshop, создаёт потрясающий эффект драматизма с глубокими тенями и световым контрактом. Отлично подойдёт при создании рекламных...

Создание слайдера с помощью Twitter Bootstrap

Создание слайдера с помощью Twitter Bootstrap 3Twitter Bootstrap 3 является одним из лучших CSS фреймворков для разработки и проектирования дизайна для систем управления контентом. С помощью Bootstrap 3 вы с лёгкостью создавать макеты страниц используя систему сеток. В основе многих CMS присутствует базовый компонент слайдера контента, обычно это последовательное отображения изображений, но так же это может быть последние завершённые проекты, описание специальных предложений, ссылки на новости или последние статьи вашего блога.

В этой статье мы разморим как создать слайдер контента с помощью Twitter Bootstrap 3 Carousel.

Введение в компонент Twitter Bootstrap 3 Carousel

Компоновка для компонента Carousel выглядит следующим образом:

Спойлер.
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Slider content (slider wrap)-->
  <div class="carousel-inner">
    <div class="item active">
      <img src="/..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Из кода выше, мы можем видеть, Twitter Bootstrap 3 Carousel делится на несколько частей:

• Индикаторы
• Слайдер контента
• Управление

Чтобы установить div элемент в качестве слайдера, мы добавляем следующие имена классов: carousel и slide. Класс carousel создает эффект “карусели”, т. е. смена слайда по кругу.
Класс slide добавляет раздвижные анимации с правой или левой стороны.
Индикаторы – это небольшие круги в центре внизу слайдера, они определяют текущее положение слайда и количество слайдов.
Показатели определяются с упорядоченным списком.

Спойлер.
<ol class="carousel-indicators">
  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

Упорядоченный список имеет класс carousel-indicators, что делает дочерние элементы в виде небольших кружков.
Каждый элемент Li должен иметь атрибут data-target с id родительского контейнера.
Он также должен иметь атрибут data-slide-to с уникальным целочисленным значением для увеличения позиции и значение должно начинаться с "0".
Содержание слайдов является неотъемлемой частью слайдера.
В этом пространстве мы поставим наши контент для слайдера.
Слайдер Контента определяется через класс carousel-inner.
Этот элемент div может иметь неограниченное количество вложенных див.
Первый элемент должен быть активным по умолчанию, так что добавьте в класс active.

Спойлер.
<div class="carousel-inner">
  <div class="item active">
    <img src="/..." alt="...">
    <div class="carousel-caption">
      ...
    </div>
  </div>
  ...
</div>

Каждый элемент класса item имеет два подраздела: image а carousel-caption.
Изображение используется в качестве фона для слайда.
Элемент с carousel-caption находится выше изображения, и используется как заголовок для слайда.
Внутри carousel-caption мы можем поставить теги
возможности и элемент, или даже оба.
Управление стрелки вправо и влево используются для изменения слайдов вручную.

Спойлер.
<!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Там должны быть два элемента: один для каждого направления.
Первым элементом будет элемент span с классами glyphicon glyphicon-chevron-left, которые являются значок со стрелкой влево, и второй элемент будет иметь классы glyphicon glyphicon-chevron-right, который добовляет стрелку вправо.
В Twitter Bootstrap, для того чтобы отображать значки, мы можем использовать шрифты вместо изображений.
Вы успешно создали слайдер для вашего сайта.
При этом вы не написали не единой строки кода JavaScript, bootstrap.js сделали все за вас.

Карусель варианты

Дополнительная регулировка ползунка вы можете добавить множественные атрибуты Data-* для родительского контейнера карусели.

‘data-interval’ - используется для указания интервала времени между слайдами. Он принимает цифровое значение, и число должно быть в миллисекундах.
‘data-pause’ - используется, чтобы определить, когда событие паузы будет вызван. Например, когда это значение равно “hover” , то слайдер будет останавливается, когда мышь находится на слайдере.
‘data-wrap’ - это логический атрибут, и позволяет установить, нужно ли заново начать слайдер.

Настройка с помощью jQuery

Если вы хотели бы использовать jQuery и атрибуты Data -*, Twitter Bootstrap позволяет инициализировать через JavaScript.
Сделать div слайдер, вы можете написав следующий код:

$('.carousel').carousel();

Варианты для слайдера могут быть установлены с помощью параметров.
Например:

$('.carousel').carousel({
  interval: 2000,
  pause: 'hover',
  wrap: true
});

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

.carousel(‘pause’) // пауза
.carousel(‘cycle’) // включить слайды
.carousel(3) // дисплей четвертый слайд в слайдере
.carousel(‘prev’ ) // показать предыдущий слайд
.carousel(‘next’) // показать следующий слайд в слайдере


  1. Комментарии (0)

  2. Add Yours

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

There are no comments posted here yet

Оставьте свой комментарий

Posting comment as a guest. Sign up or login to your account.
Вложения (0 / 3)
Share Your Location

Векторная графика

плашки-для-рекламных-текстов Набор ярких плашек для рекламных текстов в векторном формате, которые значительно выделят ваш текст на общем фоне. Формат файлов: AI / EPS /...
start-up-rockets-–-ракеты-в-векторе Набор векторных изображений, разного вида летящих ракет. Можно использовать при создании анимации и рекламных баннеров. Формат файлов:...
pop-art-man-векторные-мужчин-в-стиле-поп-арт Набор изображений в векторном формате, яркие иллюстрации мужчин в модном стиле поп арт, отлично подойдёт при создании рекламных баннеров. Формат...

Растовая графика

атлетика-и-бодибилдинг-–-фото-клипарт Набор из 32 изображений высокого качества на тему атлетики и бодибилдинга. Отлично подойдут для рекламных флаеров, баннеров и слайдеров на сайтах...
интернет-технологии,компьютер,гаджеты-–-фото-клипарт Набор из 25 изображений высокого качества, различные интернет технологии, компьютеры, гаджеты. Отлично подойдет для слайд-шоу. Размер 4800 на 3200 px....
бизнес-леди-–-набор-фото-клипарта Набор из 15 изображений высокого качества с красивой блондинкой, бизнес-леди. Эти изображения отлично подойдут для использования в презентациях,...