Главная » Языки программирования

Owl carousel min css

Содержание
  1. Owl Carousel 2
  2. Quick start
  3. Install
  4. Load
  5. Webpack
  6. Static HTML
  7. Usage
  8. Documentation
  9. Building
  10. Contributing
  11. Roadmap
  12. License
  13. Getting Started
  14. New Features
  15. Compatibility
  16. Library
  17. Files included
  18. Dependecies
  19. Owl Carousel 2
  20. Touch and Drag Support
  21. Fully Responsive
  22. Modern Browsers
  23. Zombie Browsers
  24. Modules and Plugins
  25. Owl Carousel has been choosen as number one jQuery plugin by hundreds of developers. Now its time for a new version that comes with lots of new features and even more user friendly API.
  26. Слайдер для сайта Owl Carousel 2 — настройка просто и быстро
  27. Что такое Owl Carousel?
  28. Установка
  29. Разметка HTML
  30. jQuery слайдер для сайта
  31. Owl Carousel 2 настройка
  32. Вызов плагина
  33. Слайдер для сайта Owl Carousel 2 — настройка просто и быстро
  34. Что такое Owl Carousel?
  35. Установка
  36. Разметка HTML
  37. jQuery слайдер для сайта
  38. Owl Carousel 2 настройка
  39. Вызов плагина

Notice: The old Owl Carousel site (owlgraphic [dot] com) is no longer in use. Please delete all references to this in bookmarks and your own products’ documentation as it’s being used for malicious purposes.

Quick start

Install

This package can be installed with:

  • npm: npm install —save owl.carousel or yarn add owl.carousel jquery
  • bower: bower install —save owl.carousel

Load

Webpack

Add jQuery via the “webpack.ProvidePlugin” to your webpack configuration:

const webpack = require('webpack'); //. plugins: [ new webpack.ProvidePlugin(< $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' >), ], //.

Load the required stylesheet and JS:

import 'owl.carousel/dist/assets/owl.carousel.css'; import 'owl.carousel';

Static HTML

Put the required stylesheet at the top of your markup:

 rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" /> 
 rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" />

NOTE: If you want to use the default navigation styles, you will also need to include owl.theme.default.css .

Put the script at the bottom of your markup right after jQuery:

 src="/node_modules/jquery/dist/jquery.js">  src="/node_modules/owl.carousel/dist/owl.carousel.min.js"> 
 src="/bower_components/jquery/dist/jquery.js">  src="/bower_components/owl.carousel/dist/owl.carousel.min.js">

Usage

Wrap your items ( div , a , img , span , li etc.) with a container element ( div , ul etc.). Only the class owl-carousel is mandatory to apply proper styles:

 class="owl-carousel owl-theme"> Your Content Your Content Your Content Your Content Your Content Your Content Your Content

NOTE: The owl-theme class is optional, but without it, you will need to style navigation features on your own.

Call the plugin function and your carousel is ready.

$(document).ready(function() $('.owl-carousel').owlCarousel(); >);

Documentation

The documentation, included in this repo in the root directory, is built with Assemble and publicly available at https://owlcarousel2.github.io/OwlCarousel2/. The documentation may also be run locally.

Building

This package comes with Grunt and Bower. The following tasks are available:

  • default compiles the CSS and JS into /dist and builds the doc.
  • dist compiles the CSS and JS into /dist only.
  • watch watches source files and builds them automatically whenever you save.
  • test runs JSHint and QUnit tests headlessly in PhantomJS.

To define which plugins are build into the distribution just edit /_config.json to fit your needs.

Contributing

Roadmap

Please make sure to check out our Roadmap Discussion.

License

The code and the documentation are released under the MIT License.

Источник

Getting Started

No matter if you are a beginner or an advanced user, starting with Owl is easy.

New Features

  • Infinity Loop
  • Center item
  • Smart Speed
  • Stage Padding
  • Item Margin
  • Ability to make almost all options responsive
  • Various Widths
  • Callback Events
  • RTL
  • YouTube/Vimeo/vzaar support (fetching thumbnails as well)
  • Anchors navigation
  • Merged Items
  • and more.

Compatibility

Owl Carousel 2.x.x is not compatibile with previous version 1.x.x. The idea stays the same and it has a lot in common with Owl1 but the core code was re-written from scratch and I’m very proud with all the new features.

Owl Carousel has been tested in following browsers/devices:

  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

Library

Download a version that suits your needs:

  • Owl Carousel — 2.3.4 — Distributed version — compiled and minified. Javascript, images and CSS included.
  • Owl Carousel Source — 2.3.4 — Source files including this documentation. All wrapped in Grunt project.

Files included

Distributed version structure:

owlcarousel/ ├── assets/ │ ├── owl.carousel.css │ ├── owl.carousel.min.css │ ├── owl.theme.default.css │ ├── owl.theme.default.min.css │ ├── owl.theme.green.css │ ├── owl.theme.green.min.css │ └── owl.video.play.png │ ├── owl.carousel.js ├── owl.carousel.min.js ├── LICENSE-MIT └── README.md

Dependecies

Get the latest jQuery or Zepto library. Minimum compatible jQuery version is 1.8.3 version.

Источник

Over 60 options. Easy for novice users and even more powerful for advanced developers.

Touch and Drag Support

Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!

Fully Responsive

Almost all options are responsive and include very intuitive breakpoints settings.

Modern Browsers

Owl uses hardware acceleration with CSS3 Translate3d transitions. Its fast and works like a charm!

Zombie Browsers

CSS2 fallback supported for older browser.

Modules and Plugins

Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won’t use on your project or create new ones that fit your needs

Watch this space- we’ll be launching soon 🙂

Источник

Слайдер для сайта Owl Carousel 2 — настройка просто и быстро

Сегодня я расскажу о том, как создать анимированный, отзывчивый, полноэкранный слайдер для сайта с помощью owl.js 2 (или Owl Carousel 2). Чтобы понять, что именно мы будем создавать, посмотрите нашу демонстрацию ниже.

Owl Carousel 2 настройка

Owl.js — это популярный jQuery плагин, который позволяет создавать привлекательные, отзывчивые карусели. Немаловажно, что он абсолютно бесплатный и подходит для коммерческого использования. К тому же, плагин имеет отличную поддержку браузеров, он протестирован на следующих браузерах и устройствах:

  1. Chrome
  2. Firefox
  3. Opera
  4. IE7/8/10/11
  5. iPad Safari
  6. iPod4 Safari
  7. Nexus 7 Chrome
  8. Galaxy S4
  9. Nokia 8s Windows 8

Установка

Разметка HTML

Нам не нужна никакая особая разметка. Все что требуется, чтобы создать слайдер для сайта — это обернуть наши слайды элементом div с классом owl-carousel . Этот класс является обязательным. Также, если вы хотите использовать навигационные элементы по умолчанию, нужно добавить класс owl-theme к этому же div-у.

jQuery слайдер
для сайта

Создадим 2 слайда, каждый из которых будет содержать заголовок, кнопку и фоновое изображение.

Вы можете создать любую разметку слайдов и добавить к ней какие угодно стили.

Вызов плагина

Далее мы вызовем функцию инициализатор в js и наша карусель готова.

 JS $(document).ready(function(){ $("#slider").owlCarousel(); });

Owl Carousel 2 имеет дополнительные опции, которые помогут вам кастомизировать ваш слайдер. Давайте разберем самые популярные из них:

Источник

Слайдер для сайта Owl Carousel 2 — настройка просто и быстро

Сегодня я расскажу о том, как создать анимированный, отзывчивый, полноэкранный слайдер для сайта с помощью owl.js 2 (или Owl Carousel 2). Чтобы понять, что именно мы будем создавать, посмотрите нашу демонстрацию ниже.

Owl Carousel 2 настройка

Owl.js — это популярный jQuery плагин, который позволяет создавать привлекательные, отзывчивые карусели. Немаловажно, что он абсолютно бесплатный и подходит для коммерческого использования. К тому же, плагин имеет отличную поддержку браузеров, он протестирован на следующих браузерах и устройствах:

  1. Chrome
  2. Firefox
  3. Opera
  4. IE7/8/10/11
  5. iPad Safari
  6. iPod4 Safari
  7. Nexus 7 Chrome
  8. Galaxy S4
  9. Nokia 8s Windows 8

Установка

Разметка HTML

Нам не нужна никакая особая разметка. Все что требуется, чтобы создать слайдер для сайта — это обернуть наши слайды элементом div с классом owl-carousel . Этот класс является обязательным. Также, если вы хотите использовать навигационные элементы по умолчанию, нужно добавить класс owl-theme к этому же div-у.

jQuery слайдер
для сайта

Создадим 2 слайда, каждый из которых будет содержать заголовок, кнопку и фоновое изображение.

Вы можете создать любую разметку слайдов и добавить к ней какие угодно стили.

Вызов плагина

Далее мы вызовем функцию инициализатор в js и наша карусель готова.

 JS $(document).ready(function(){ $("#slider").owlCarousel(); });

Owl Carousel 2 имеет дополнительные опции, которые помогут вам кастомизировать ваш слайдер. Давайте разберем самые популярные из них:

Источник

Читайте также:  Функция импорт в питоне
Оцените статью
© 2024 Программирование