Skip to content

K
kpp
Commit 0b8d8843 authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Добавил owl-carousel

parent 72502953
Show whitespace changes
Inline Side-by-side
Showing with 261 additions and 136 deletions
package.json
View file @ 0b8d8843
......@@ -51,11 +51,13 @@
"loader": [],
"table": [],
"table-responsive": [],
"table-mobile-scroll": []
"table-mobile-scroll": [],
"owl-carousel": []
},
"addCssBefore": [
"./src/scss/variables.scss",
"./src/scss/mixins.scss"
"./src/scss/mixins.scss",
"../../node_modules/owl.carousel/dist/assets/owl.carousel.css"
],
"addCssAfter": [
"./src/scss/print.scss"
......@@ -67,7 +69,8 @@
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/jquery-migrate/dist/jquery-migrate.min.js",
"./node_modules/svg4everybody/dist/svg4everybody.js",
"./node_modules/ismobilejs/isMobile.min.js"
"./node_modules/ismobilejs/isMobile.min.js",
"./node_modules/owl.carousel/dist/owl.carousel.js"
],
"addJsAfter": [
"./src/js/global-script.js"
......@@ -134,6 +137,7 @@
"jquery-migrate": "^3.0.0",
"lint-staged": "^3.4.0",
"merge-stream": "^1.0.1",
"owl.carousel": "^2.2.0",
"postcss-import": "^9.1.0",
"postcss-inline-svg": "^2.3.0",
"stylelint": "^7.9.0",
......
src/blocks-demo.html
View file @ 0b8d8843
......@@ -599,139 +599,6 @@
</section>
<section class="blocks-library__item" id="dropdown" data-name=".dropdown">
<h2 class="blocks-library__item-title">Выпадающий блок</h2>
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
<div class="dropdown">
<a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
</ul>
</div>
<span class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список
</button>
<span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2">
<span class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>span</code>)</a></span>
<span class="menu__item"><a class="menu__link" href="">Пункт меню весьма длинный</a></span>
<span class="menu__item"><a class="menu__link" href="">Второй пункт</a></span>
</span>
</span>
<div class="dropdown">
<a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<div class="dropdown__menu" aria-labelledby="dropdown-demo-3">
<form action="https://httpbin.org/post" method="post">
<input type="text">
<select>
<option>Название пункта</option>
</select>
<textarea rows="3"></textarea>
<button class="btn">Отправить эту форму</button>
</form>
</div>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх
</button>
<ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
<p>События</p>
<pre class="code">
<code>// Факт открытия</code>
<code>$('#test').on('shown.nth.dropdown', function () {</code>
<code> console.log('shown.nth.dropdown');</code>
<code>});</code>
<code> </code>
<code>// Факт закрытия</code>
<code>$('#test').on('hidden.nth.dropdown', function () {</code>
<code> console.log('hidden.nth.dropdown');</code>
<code>});</code>
</pre>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code> &lt;div class="dropdown"></code>
<code> &lt;a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка&lt;/a></code>
<code> &lt;ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка, после которого следует разделитель&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;span class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список</code>
<code> &lt;/button></code>
<code> &lt;span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2"></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>span&lt;/code>)&lt;/a>&lt;/span></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="">Пункт меню весьма длинный&lt;/a>&lt;/span></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="">Второй пункт&lt;/a>&lt;/span></code>
<code> &lt;/span></code>
<code> &lt;/span></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка&lt;/a></code>
<code> &lt;div class="dropdown__menu" aria-labelledby="dropdown-demo-3"></code>
<code> &lt;form action="https://httpbin.org/post" method="post"></code>
<code> &lt;input type="text"></code>
<code> &lt;select></code>
<code> &lt;option>Название пункта&lt;/option></code>
<code> &lt;/select></code>
<code> &lt;textarea rows="3">&lt;/textarea></code>
<code> &lt;button class="btn">Отправить эту форму&lt;/button></code>
<code> &lt;/form></code>
<code> &lt;/div></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список вверх</code>
<code> &lt;/button></code>
<code> &lt;ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список вверх от пр. края</code>
<code> &lt;/button></code>
<code> &lt;ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="field-text" data-name=".field-text">
<h2 class="blocks-library__item-title">Текстовое поле формы</h2>
......@@ -1490,10 +1357,195 @@
</section>
<section class="blocks-library__item" id="dropdown" data-name=".dropdown">
<h2 class="blocks-library__item-title">Выпадающий блок</h2>
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
<div class="dropdown">
<a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт списка, после которого следует разделитель</a></li>
<li class="menu__item"><a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!</a></li>
</ul>
</div>
<span class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список
</button>
<span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2">
<span class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>span</code>)</a></span>
<span class="menu__item"><a class="menu__link" href="">Пункт меню весьма длинный</a></span>
<span class="menu__item"><a class="menu__link" href="">Второй пункт</a></span>
</span>
</span>
<div class="dropdown">
<a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка</a>
<div class="dropdown__menu" aria-labelledby="dropdown-demo-3">
<form action="https://httpbin.org/post" method="post">
<input type="text">
<select>
<option>Название пункта</option>
</select>
<textarea rows="3"></textarea>
<button class="btn">Отправить эту форму</button>
</form>
</div>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх
</button>
<ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
<div class="dropdown">
<button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Выпадает список вверх от пр. края
</button>
<ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5">
<li class="menu__item"><a class="menu__link" href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
</ul>
</div>
<p>События</p>
<pre class="code">
<code>// Факт открытия</code>
<code>$('#test').on('shown.nth.dropdown', function () {</code>
<code> console.log('shown.nth.dropdown');</code>
<code>});</code>
<code> </code>
<code>// Факт закрытия</code>
<code>$('#test').on('hidden.nth.dropdown', function () {</code>
<code> console.log('hidden.nth.dropdown');</code>
<code>});</code>
</pre>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code> &lt;div class="dropdown"></code>
<code> &lt;a id="dropdown-demo-1" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка&lt;/a></code>
<code> &lt;ul class="dropdown__menu menu" aria-labelledby="dropdown-demo-1"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка, после которого следует разделитель&lt;/a>&lt;/li></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт меню весьма длинный, такой, что прямо адски длинный, очень много, реально много слов!&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;span class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-2" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список</code>
<code> &lt;/button></code>
<code> &lt;span class="dropdown__menu menu" aria-labelledby="dropdown-demo-2"></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>span&lt;/code>)&lt;/a>&lt;/span></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="">Пункт меню весьма длинный&lt;/a>&lt;/span></code>
<code> &lt;span class="menu__item">&lt;a class="menu__link" href="">Второй пункт&lt;/a>&lt;/span></code>
<code> &lt;/span></code>
<code> &lt;/span></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;a id="dropdown-demo-3" href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка&lt;/a></code>
<code> &lt;div class="dropdown__menu" aria-labelledby="dropdown-demo-3"></code>
<code> &lt;form action="https://httpbin.org/post" method="post"></code>
<code> &lt;input type="text"></code>
<code> &lt;select></code>
<code> &lt;option>Название пункта&lt;/option></code>
<code> &lt;/select></code>
<code> &lt;textarea rows="3">&lt;/textarea></code>
<code> &lt;button class="btn">Отправить эту форму&lt;/button></code>
<code> &lt;/form></code>
<code> &lt;/div></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-4" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список вверх</code>
<code> &lt;/button></code>
<code> &lt;ul class="dropdown__menu dropdown__menu--up menu" aria-labelledby="dropdown-demo-4"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
<code> </code>
<code> &lt;div class="dropdown"></code>
<code> &lt;button class="dropdown__toggler btn" id="dropdown-demo-5" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></code>
<code> Выпадает список вверх от пр. края</code>
<code> &lt;/button></code>
<code> &lt;ul class="dropdown__menu dropdown__menu--up dropdown__menu--right menu" aria-labelledby="dropdown-demo-5"></code>
<code> &lt;li class="menu__item">&lt;a class="menu__link" href="#">Пункт списка (выпадает &lt;code>ul&lt;/code>)&lt;/a>&lt;/li></code>
<code> &lt;/ul></code>
<code> &lt;/div></code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="owl-carousel" data-name=".owl-carousel">
<h2 class="blocks-library__item-title">Карусель <a href="http://owlcarousel2.github.io/OwlCarousel2/">owl-carousel</a></h2>
<p class="alert alert--warning">Зависит от <a href="https://jquery.com/">jQuery</a> (включен в сборку по умолчанию).</p>
<div class="owl-carousel" id="owl-carousel-demo">
<div>
slide content 1
</div>
<div>
slide content 2
</div>
<div>
slide content 3
</div>
<div>
slide content 4
</div>
<div>
slide content 5
</div>
<div>
slide content 6
</div>
</div>
<div class="blocks-library__code-wrapper">
<span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
<div class="blocks-library__code">
<pre class="code">
<code>&lt;div class="owl-carousel" id="owl-carousel-demo"></code>
<code> &lt;div>slide content 1&lt;/div></code>
<code> &lt;div>slide content 2&lt;/div></code>
<code> ...</code>
<code>&lt;/div></code>
</pre>
</div>
</div>
</section>
</div>
<a href="#" class="to-top" id="toTop">↑</a>
@@include('_include/page_bottom.html')
<script>
$(document).ready(function(){
$("#owl-carousel-demo").owlCarousel({
items: 3,
nav: true,
loop: true
});
});
</script>
</body>
</html>
src/blocks/owl-carousel/owl-carousel.html 0 → 100644
View file @ 0b8d8843
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/owl-carousel/owl-carousel.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="owl-carousel" id="owl-carousel-demo">
<div>
slide content 1
</div>
<div>
slide content 2
</div>
<div>
slide content 3
</div>
<div>
slide content 4
</div>
<div>
slide content 5
</div>
<div>
slide content 6
</div>
</div>
src/blocks/owl-carousel/owl-carousel.js 0 → 100644
View file @ 0b8d8843
// $(document).ready(function(){
// $("#owl-carousel-demo").owlCarousel({
// items: 3,
// nav: true,
// loop: true,
// center: true,
// responsive : {
// 0 : {
// items: 1,
// nav: true,
// loop: true,
// center: true,
// },
// 480 : {
// items: 3,
// },
// 768 : {
// items: 3,
// },
// 992 : {
// items: 3,
// },
// 1200 : {
// items: 3,
// },
// 1800 : {
// items: 3,
// }
// }
// });
// });
src/blocks/owl-carousel/owl-carousel.scss 0 → 100644
View file @ 0b8d8843
// В этом файле должны быть стили только для БЭМ-блока owl-carousel, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.owl-carousel {}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment