Commit 15f04fa1 authored by Nikolay Gromov's avatar Nikolay Gromov

Добавил карусель swipe

parent accbfdc3
......@@ -42,7 +42,8 @@
"table": [],
"table-responsive": [],
"table-mobile-scroll": [],
"owl-carousel": []
"owl-carousel": [],
"swipe": []
},
"addCssBefore": [
"./src/scss/variables.scss",
......@@ -60,7 +61,8 @@
"./node_modules/jquery-migrate/dist/jquery-migrate.min.js",
"./node_modules/svg4everybody/dist/svg4everybody.js",
"./node_modules/ismobilejs/isMobile.min.js",
"./node_modules/owl.carousel/dist/owl.carousel.js"
"./node_modules/owl.carousel/dist/owl.carousel.js",
"./node_modules/swipejs/build/swipe.min.js"
],
"addJsAfter": [
"./src/js/global-script.js"
......
......@@ -1527,6 +1527,55 @@
<code> ...</code>
<code>&lt;/div></code>
</pre>
<pre class="code">
<code>$("#owl-carousel-demo").owlCarousel({</code>
<code> items: 3,</code>
<code> nav: true,</code>
<code> loop: true</code>
<code>});</code>
</pre>
</div>
</div>
</section>
<section class="blocks-library__item" id="swipe" data-name=".swipe">
<h2 class="blocks-library__item-title">Карусель <a href="https://github.com/lyfeyaj/swipe">swipe</a></h2>
<div id="swipe-slider" class="swipe">
<div class="swipe-wrap">
<div>1111</div>
<div>2222</div>
<div>3333</div>
</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 id="swipe-slider" class="swipe"></code>
<code> &lt;div class="swipe-wrap"></code>
<code> &lt;div>1111&lt;/div></code>
<code> &lt;div>2222&lt;/div></code>
<code> &lt;div>3333&lt;/div></code>
<code> &lt;/div></code>
<code>&lt;/div></code>
</pre>
<pre class="code">
<code>window.mySwipe = new Swipe(document.getElementById('swipe-slider'), {</code>
<code> startSlide: 0,</code>
<code> speed: 400,</code>
<code> auto: 3000,</code>
<code> draggable: true,</code>
<code> continuous: true,</code>
<code> disableScroll: true,</code>
<code> stopPropagation: true,</code>
<code> callback: function(index, elem, dir) {},</code>
<code> transitionEnd: function(index, elem) {}</code>
<code>});</code>
</pre>
</div>
</div>
......@@ -1540,11 +1589,24 @@
<script>
$(document).ready(function(){
$("#owl-carousel-demo").owlCarousel({
items: 3,
nav: true,
loop: true
});
window.mySwipe = new Swipe(document.getElementById('swipe-slider'), {
startSlide: 0,
speed: 400,
auto: 3000,
draggable: true,
continuous: true,
disableScroll: true,
stopPropagation: true,
callback: function(index, elem, dir) {},
transitionEnd: function(index, elem) {}
});
});
</script>
</body>
......
<!--DEV
Для использования этого файла как шаблона:
@ @include('blocks/swipe/swipe.html')
(Нужно убрать пробел между символами @)
Подробнее: https://www.npmjs.com/package/gulp-file-include
-->
<div class="swipe">content</div>
// В этом файле должны быть стили только для БЭМ-блока swipe, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
& > div {
float: left;
width: 100%;
position: relative;
overflow: hidden;
}
}
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