Чернила, риббоны, запчасти и другие расходные материалы

Tips

Some examples of using this lib are displayed in the app demo-owl-carousel:

NOTE: demo-owl-carousel could be downloaded and started on own PC. Steps for achieving that are:

  • ;
  • or ;
  • or .

They contain tests of the library. These tests include many functions . The example:

it('should change height of carousel ="{nav: true, autoHeight: true}"',fakeAsync(()=>{discardPeriodicTasks();consthtml=`      




            Slide 1



            Slide 2



            Slide 3



            Slide 4



            Slide 5




`;fixtureHost=createTestComponent(html);deCarouselComponent=fixtureHost.debugElement.query(By.css('owl-carousel-o'));tick();fixtureHost.detectChanges();}));

The first argument of explains how the carousel should work with options written in . In this example the height of the carousel should change automatically: .

Variable contains the HTML-markup of the carousel for .

However, most of the HTML-markups set to are simplified. There’s no property , directive and as it is in examples above.

owl-carousel-ooptions]="customOptions" (translated)="getPassedData($event)" #owlCar>ng-container *ngFor="let item of carouselData">ng-templatecarouselSlideid]="item.id"width]="item.width">divclass="slider">p>{{item.text}}p>div>ng-template>ng-container>owl-carousel-o>p>aclass="btn btn-success" (click)="owlCar.prev()">preva>aclass="btn btn-success" (click)="owlCar.next()">nexta>p>p>aclass="btn btn-success" (click)="owlCar.to('slide-3')">move to 3th slidea>p>

Key points are:

  1. Defining in template reference variable .
  2. Using it in handlers for events. In the code above, we see , and . could be passed as an argument of the hanlder: .
    • shows the previous slide.
    • shows the next slide.
    • moves the carousel to the slide with needed . In this case is the needed slide. NOTE: it’s needed to supply own ids to slides. The code above has . This is the way of supplying .

Options

Type:
Default:

The number of items you want to see on the screen.

Type:
Default:

margin-right(px) on item.

Type:
Default:

Infinity loop. Duplicate last and first items to get loop illusion.

Type:
Default:

Center item. Works well with even an odd number of items.

Type:
Default:

Mouse drag enabled.

Type:
Default:

Touch drag enabled.

Type:
Default:

Stage pull to edge.

Type:
Default:

Item pull to edge.

Type:
Default:

Padding left and right on stage (can see neighbours).

Type:
Default:

Merge items. Looking for data-merge='{number}’ inside item..

Type:
Default:

Fit merged items if screen is smaller than items value.

Type:
Default:

Set non grid content. Try using width style on divs.

Type:
Default:

Start position or URL Hash string like ‘#id’.

Type:
Default:

Listen to url hash changes. data-hash on items is required.

Type:
Default:

Show next/prev buttons.

Type:
Default:

Go backwards when the boundary has reached.

Type:
Default:

HTML allowed.

Type:
Default:

DOM element type for a single directional navigation link.

Type:
Default:

Navigation slide by x. ‘page’ string can be set to slide by page.

Type:
Default: «

You can define the transition for the stage you want to use eg. linear.

Type:
Default:

Show dots navigation.

Type:
Default:

Show dots each x item.

Type:
Default:

Used by data-dot content.

lazyLoad

Type:
Default:

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not

lazyLoadEager

Type:
Default:

Eagerly pre-loads images to the right (and left when loop is enabled) based on how many items you want to preload.

Type:
Default:

Autoplay.

Type:
Default:

Autoplay interval timeout.

Type:
Default:

Pause on mouse hover.

Type:
Default:

Speed Calculate. More info to come..

Type:
Default:

Speed Calculate. More info to come..

Type:
Default:

autoplay speed.

Type:
Default:

Navigation speed.

Type:
Default:

Pagination speed.

Type:
Default:

Drag end speed.

Type:
Default:

Enable callback events.

Type:
Default:

Object containing responsive options. Can be set to false to remove responsive capabilities.

Type:
Default:

Responsive refresh rate.

Type:
Default:

Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.

Type:
Default:

Enable fetching YouTube/Vimeo/Vzaar videos.

Type:
Default:

Set height for videos.

Type:
Default:

Set width for videos.

Type:
Default:

Class for CSS3 animation out.

Type:
Default:

Class for CSS3 animation in.

Type:
Default:

Easing for CSS2 $.animate.

info

Type:
Default:

Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.

Type:
Default:

Use it if owl items are deep nested inside some generated content. E.g ‘youritem’. Dont use dot before class name.

Type:
Default:

DOM element type for owl-item.

Type:
Default:

DOM element type for owl-stage.

Type:
Default:

Set your own container for nav.

Type:
Default:

Set your own container for nav.

checkVisible

Type:
Default:

If you know the carousel will always be visible you can set `checkVisibility` to `false` to prevent the expensive browser layout forced reflow the $element.is(‘:visible’) does.

Установка слайдера OWL Carousel 2 на сайт

Подключаем стили CSS

Подключаем Jquery и сам плагин карусели

Мои настроки слайдера

            $(document).ready(function() {
                $('.owl-carousel').owlCarousel({
                    loop:true, //Зацикливаем слайдер
                    margin:10, //Отступ от картино если выводите больше 1
                    nav:false, //Отключил навигацию
                    autoplay:true, //Автозапуск слайдера
                    smartSpeed:1000, //Время движения слайда
                    autoplayTimeout:2000, //Время смены слайда
                    responsive:{ //Адаптация в зависимости от разрешения экрана
                        0:{
                            items:1
                        },
                        600:{
                            items:1
                        },
                        1000:{
                            items:1
                        }
                    }
                });
            });
            

Разметка HTML для слайдера

После подключения CSS стилей OWL Carousel 2, подключаем библиотеки JQuery
и плагина OWL Carousel 2, создаем HTML разметку с нужными слайдами.
Пример работы слайдера.

Теги:

Поддержи проект:

Options

Type:
Default:

The number of items you want to see on the screen.

Type:
Default:

margin-right(px) on item.

Type:
Default:

Infinity loop. Duplicate last and first items to get loop illusion.

Type:
Default:

Center item. Works well with even an odd number of items.

Type:
Default:

Mouse drag enabled.

Type:
Default:

Touch drag enabled.

Type:
Default:

Stage pull to edge.

Type:
Default:

Item pull to edge.

Type:
Default:

Padding left and right on stage (can see neighbours).

Type:
Default:

Merge items. Looking for data-merge='{number}’ inside item..

Type:
Default:

Fit merged items if screen is smaller than items value.

Type:
Default:

Set non grid content. Try using width style on divs.

Type:
Default:

Start position or URL Hash string like ‘#id’.

Type:
Default:

Listen to url hash changes. data-hash on items is required.

Type:
Default:

Show next/prev buttons.

Type:
Default:

Go backwards when the boundary has reached.

Type:
Default:

HTML allowed.

Type:
Default:

DOM element type for a single directional navigation link.

Type:
Default:

Navigation slide by x. ‘page’ string can be set to slide by page.

Type:
Default: «

You can define the transition for the stage you want to use eg. linear.

Type:
Default:

Show dots navigation.

Type:
Default:

Show dots each x item.

Type:
Default:

Used by data-dot content.

lazyLoad

Type:
Default:

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not

lazyLoadEager

Type:
Default:

Eagerly pre-loads images to the right (and left when loop is enabled) based on how many items you want to preload.

Type:
Default:

Autoplay.

Type:
Default:

Autoplay interval timeout.

Type:
Default:

Pause on mouse hover.

Type:
Default:

Speed Calculate. More info to come..

Type:
Default:

Speed Calculate. More info to come..

Type:
Default:

autoplay speed.

Type:
Default:

Navigation speed.

Type:
Default:

Pagination speed.

Type:
Default:

Drag end speed.

Type:
Default:

Enable callback events.

Type:
Default:

Object containing responsive options. Can be set to false to remove responsive capabilities.

Type:
Default:

Responsive refresh rate.

Type:
Default:

Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.

Type:
Default:

Enable fetching YouTube/Vimeo/Vzaar videos.

Type:
Default:

Set height for videos.

Type:
Default:

Set width for videos.

Type:
Default:

Class for CSS3 animation out.

Type:
Default:

Class for CSS3 animation in.

Type:
Default:

Easing for CSS2 $.animate.

info

Type:
Default:

Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.

Type:
Default:

Use it if owl items are deep nested inside some generated content. E.g ‘youritem’. Dont use dot before class name.

Type:
Default:

DOM element type for owl-item.

Type:
Default:

DOM element type for owl-stage.

Type:
Default:

Set your own container for nav.

Type:
Default:

Set your own container for nav.

checkVisible

Type:
Default:

If you know the carousel will always be visible you can set `checkVisibility` to `false` to prevent the expensive browser layout forced reflow the $element.is(‘:visible’) does.

Основные параметры Owl Carousel 2

loop:truemargin:10nav:true…

Авто ширина

Авто ширина

 
responsive  {
    // Ширина окна браузера от 0 и больше
      {
        option1  value,
        option2  value,
        ...
    },
    // Ширина окна браузера от 480 и больше
    480  {
        option1  value,
        option2  value,
        ...
    },
    // Ширина окна браузера от 768 и больше
    768  {
        option1  value,
        option2  value,
        ...
    }
}
 

Что нужно знать об адаптивном слайдере Owl Carousel 2

  • Ширина окна браузера задается только в цифровом виде (как в примере): ‘480’.
  • Слайдер Owl Carousel имеет встроенную поддержку сортировки параметров ширины браузера, но лучше указывать ширину по по возрастанию начиная от самого маленького экрана до самого широкого.
  • Значения в опции responsive всегда имеют приоритет перед раннее установленными параметрами отображения.
  • Для разных устройств или разрешений экрана можно задать любой вид отображения слайдера, включить или выключить навигацию и т.д.
  • По умолчанию опция responsive включена и слайдер элементов растягивается на всю ширину родительского элемента (даже если не поддерживаются CSS3 media queries в браузерах IE7/IE8 и т. п.).
  • Если вам необходимо отключить адаптивный показ слайдера установите следующее значение опции responsive:false.
 
$('.owl-carousel').owlCarousel({
    looptrue,
    margin10,
    responsiveClasstrue,
    responsive{
        {
            items1,
            navtrue
        },
        600{
            items3,
            navfalse
        },
        1000{
            items5,
            navtrue,
            loopfalse
        }
    }
})
 

responsiveBaseElement

По умолчанию все реагирующие триггеры событий это ширина окна. Эта опция дает вам возможность изменить его на свой собственный класс/id например responsiveBaseElement:».myCustomWrapper»

responsiveRefreshRate

Скорость обновления. Это задержка в 200мс после того как вы изменили ширину окна браузера и изменением размеров элементов (пересчета ширины элементов/клонирования элементов и т.д.) По умолчанию скорость обновления 200мс. Думаю, это самая оптимальная скорость, но под свои нужды вы можете изменить ее.

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

Список опций для параметра responsive

  • items
  • loop
  • center
  • mouseDrag
  • touchDrag
  • pullDrag
  • freeDrag
  • margin
  • stagePadding
  • merge
  • mergeFit
  • autoWidth
  • autoHeight
  • nav
  • navRewind
  • slideBy
  • dots
  • dotsEach
  • autoplay
  • autoplayTimeout
  • smartSpeed
  • fluidSpeed
  • autoplaySpeed
  • navSpeed
  • dotsSpeed
  • dragEndSpeed
  • responsiveRefreshRate
  • animateOut
  • animateIn
  • fallbackEasing
  • callbacks
  • info

Параметры активизирующиеся только при после загрузки плагина

  • startPosition
  • URLhashListener
  • navText
  • dotData
  • lazyLoad
  • lazyContent
  • autoplayHoverPause
  • responsiveBaseElement
  • responsiveClass
  • video
  • videoHeight
  • videoWidth
  • nestedItemSelector
  • itemElement
  • stageElement
  • navContainer
  • dotsContainer

Options

NOTE: ngx-owl-carousel-o has the different usage of some of them. Mostly this is about options which require setting attributes to DOM-elements and which set names of classes and tags in the HTML-markup. The usage of these options is explained below.

Options which require setting attributes are:

The original Owl Carousel requires setting to each slide besides setting . In this lib is changed to , which is the property of the directive. The way of setting it is:

ng-templatecarouselSlidedataMerge]="number">Slide text or HTML markupng-template>

the must be 1, 2, 3 or any other integer numbers. If isn’t provided, its value will be 1 (this is the default value).

The option is working if user sets the prop to directive. The example:

ng-templatecarouselSlidewidth]="number">Slide text or html markupng-template>

When the isn’t provided for a certain slide and is provided for other slides, firstly it will be 0 (this is the default value). At the end it will be calculated as (width of carousel)/(items) (e.g. and , the width of the slide will be ).

In other words, the width of the slide with unprovided will be set according to how much space in visible carousel window the slide must take. E.g. if there must be 2 visible slides, the width of the item will be half of the carousel window.

Подключение Owl Carousel 2 на своем сайте

JS – подключаем необходимые скрипты для Owl Carousel 2

Подключаем в футере jQuery, библиотеку OwlCarousel2 и свйо файл скриптов, в котором инициализируем и настраиваем слайдер.
Здесь указаны абсолютные ссылки на CDN, но лучше подключать все стили и скрипты со своего сайта, предварительно скачав все файлы по этой ссылке.

HTML – HTML-код самой карусели Owl Carousel 2

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


   Slide 1 
   Slide 2 
   Slide 3 
   Slide 4 
   Slide 5 
   Slide 6 
   Slide 7 

Пример слайдера Owl Carousel 2 с тремя слайдами:

Содержимое файла script.js

$(function() {
  // Owl Carousel
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 3,
    margin: 10,
    loop: true,
    nav: true
  });
});

Пример слайдера Owl Carousel 2 с тремя слайдами:

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

navText: ,

Чтобы использовать базовые стили для навигации из файла , необходимо добавить класс к контейнеру карусели:

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

$(".next_button").click(function(){
  owl.trigger("next.owl.carousel");
});

$(".prev_button").click(function(){
  owl.trigger("prev.owl.carousel");
});

Делаем карусель адаптивной:

responsive:{
  0:{
    items:1
  },
  768:{
    items:2
  },
  1180:{
    items:3
  }
}

Простая расшифровка – ширина экрана от 0 до 768px – выводится 1 слайд, от 768px до 1180px – выводится 2 слайда, ширина экрана больше 1180px – отображается по 3 слайда в карусели.

Как добавить видео в карусель Owl Carousel:

1. Добавляем в options:

video:true

2. Используем такую разметку для HTML:

3. В данном примере еще используется такое правило в CSS:

.owl-carousel .item-video{
  height:300px;
}

Пример вывода видео в слайдере Owl Carousel:

Как сделать анимированную смену слайдов

Сначала подключаем дополнительно файл стилей animate.css, можно отсюда:

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css

А затем в опции карусели добавляем, например, эффект затухания:

animateOut: 'fadeOut'

На примере ниже установлены такие опции для анимации слайдов:

animateOut: 'slideOutDown',
animateIn: 'slideInDown',

Пример реализации анимированной карусели Owl Carousel:

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

Нужно немного правок внести в стили CSS, а так же поменять код инициализации карусели, весь скрипт расписывать не буду, основная суть его в том, что при ширине экрана больше 600px – карусель разрушается и остаются просто блоки внутри контейнера, а при ширине экрана меньше 600px происходит инициализация карусели, и мы вместо длинной простыни блоков на мобильном видим аккуратный слайдер с этими самыми блоками.

В моем примере я использую граничное значение 600px, чтобы результат точно отобразился внутри контента моего сайта, но для мобильных вы можете использовать breakpoint 768px или любое другое.

Код JS для инициализации Owl Carousel 2 на мобильных и дестроя на десктопе:

var $homeSlider = $(".home-slider");

$(window).resize(function() {
  showHomeSlider();
});

function showHomeSlider() {
  if ($homeSlider.data("owlCarousel") !== "undefined") {
    if (window.matchMedia("(max-width: 768px)").matches) {
      initialHomeSlider();
    } else {
      destroyHomeSlider();
    }
  }
}
showHomeSlider();

function initialHomeSlider() {
  $homeSlider.addClass("owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 2000,
    smartSpeed: 1000
  });
}

function destroyHomeSlider() {
  $homeSlider.trigger("destroy.owl.carousel").removeClass("owl-carousel");
}

Get started

  1. Run or or .

  2. Add styles (one of these variants).

    • "styles""node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css","node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css","src/styles.sass"or"src/styles.css",
    • or :

      @import'~ngx-owl-carousel-o/lib/styles/scss/owl.carousel';@import'~ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';
  3. Import and into unless they are imported.

  4. Import into unless it is imported.

  5. Import into a module which declares a component intended to have a carousel.

    import{CarouselModule}from'ngx-owl-carousel-o';@NgModule({importsCarouselModule,declarationsCarouselHolderComponent})exportclassSomeModule{}
  6. Add to needed component or named in different way object with options for the carousel:

    import{OwlOptions}from'ngx-owl-carousel-o';@Component({selector'....',templateUrl'carousel-holder.component.html'})exportclassCarouselHolderComponent{customOptionsOwlOptions={looptrue,mouseDragfalse,touchDragfalse,pullDragfalse,dotsfalse,navSpeed700,navText'','',responsive{      0: {items1},      400: {items2},740{items3},940{items4}},navtrue  }}
  7. Add html-markup to the template of the component (in this case, add it to ):

    div>Some tags beforediv>owl-carousel-ooptions]="customOptions">ng-templatecarouselSlide>Slide 1ng-template>ng-templatecarouselSlide>Slide 2ng-template>ng-templatecarouselSlide>Slide 3ng-template>owl-carousel-o>div>Some tags afterdiv>

    or

    div>Some tags beforediv>owl-carousel-ooptions]="customOptions">ng-container *ngFor="let slide of slidesStore">ng-templatecarouselSlideid]="slide.id">imgsrc]="slide.src"alt]="slide.alt"title]="slide.title">ng-template>ng-container>owl-carousel-o>div>Some tags afterdiv>

NOTE: Custom must have the type .

NOTE: Using ngx-owl-carousel-o with options and requires adding . Steps are the following:

  1. or .
  2. Add styles to :
    "styles""node_modules/animate.css/animate.min.css",

owlRouterLink

The directive is introduced for making impossible the navigating between components while the carousel is dragging.

This directive has the same features as the native directive. One exception is the property . It prevents the navigating to another component.

This directive is included into , which must be imported into a needed module before using the . So, to use this directive, you just need to write it inside the needed slide.

Example of usage this directive:

owl-carousel-ooptions]="customOptions" (dragging)="isDragging = $event.dragging">ng-container *ngFor="let item of carouselData">ng-templatecarouselSlide>divclass="slider">aowlRouterLink]="['/present']"stopLink]="isDragging">{{item.text}}a>aclass="outer-link"href="https://www.google.com">span>{{item.text}}span>a>div>ng-template>ng-container>owl-carousel-o>

contains directive and its @Input property .

is also possible way of using this directive.

In the example above, we see the usage of event, , and .
When the dragging of the carousel starts, the event notifies about it by passing object

{draggingtrue,data{}}

The value of the prop is assigned to the property. Then this property is passed into through . Directive gets aware of dragging the carousel and prevents any navigations.

When the dragging of the carousel is finished, passes object

{draggingfalse,data{}}

gets updated, which causes the change of . Now its value is . This enables navigating during the next simple click on locating in the slide unless new dragging starts.

So, to use in any slide, it’s recommended to:

  • use event and property (or named differently);
  • use directive;
  • use property of . It’s needed to pass to this prop . Using of is required.

The has the automatic preventing navigation during dragging.

Слайдер картинок Owl Carousel 2 — установка, настройка, описание

Новые возможности

  • Бесконечное перелистывание
  • Выравнивание элементов по центру
  • Умная скорость перелистывания
  • Настраиваемые отступы между элементами
  • Полностью настраиваемый адаптивный вид
  • Различная высота элементов
  • Обратный вызов при определенном событии
  • Поддержка RTL
  • Поддержка видеохостингов YouTube/Vimeo (с извлечением превью видео)
  • Якоря для навигации
  • Совмещение элементов
  • и много другое…

Совместимость

Owl Carousel 2 не совместимая с первой версией плагина. Идея и принцип работы карусели остался прежний и она имеет много общего с Owl Carousel 1, но основной код был переписан с нуля и разработчик очень гордится всеми новыми возможностями.

Работа Owl Carousel 2 была успешно протестирована в следующих браузерах и на мобильных устройствах:

Google ChromeMozilla FirefoxOperaMicrosoft IE7/8/10/11Apple iPad SafariApple iPod4 SafariNexus 7 ChromeSamsung Galaxy S4Nokia 8s Windows8Library

Owl Carousel 2.0.0-beta.2.4Owl Carousel 2.2.1Owl Carousel 2.3.4
Скомпилированная и уменьшенная версия. Файлы плагина, изображения и CSS стили включены.

Установка слайдера изображений на сайт

Подключите библиотеку jQuery и файлы плагина Owl Carousel. Минимальная версия библиотеки jQuery 1.7 или выше, эта версия включена в архив.

 

="stylesheet" href="owl-carousel/owl.carousel.css">
 

="stylesheet" href="owl-carousel/owl.theme.default.min.css">
 


 


 

Установка HTML кода

Никакой специальной HTML разметки не требуется для работы слайдера. Все что вам нужно сделать это обернуть блоки в div теги (owl работает с любым типом элементов) внутри контейнера

Ссылка на основную публикацию