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

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

parent accbfdc3
...@@ -42,7 +42,8 @@ ...@@ -42,7 +42,8 @@
"table": [], "table": [],
"table-responsive": [], "table-responsive": [],
"table-mobile-scroll": [], "table-mobile-scroll": [],
"owl-carousel": [] "owl-carousel": [],
"swipe": []
}, },
"addCssBefore": [ "addCssBefore": [
"./src/scss/variables.scss", "./src/scss/variables.scss",
...@@ -60,7 +61,8 @@ ...@@ -60,7 +61,8 @@
"./node_modules/jquery-migrate/dist/jquery-migrate.min.js", "./node_modules/jquery-migrate/dist/jquery-migrate.min.js",
"./node_modules/svg4everybody/dist/svg4everybody.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" "./node_modules/owl.carousel/dist/owl.carousel.js",
"./node_modules/swipejs/build/swipe.min.js"
], ],
"addJsAfter": [ "addJsAfter": [
"./src/js/global-script.js" "./src/js/global-script.js"
......
...@@ -1527,6 +1527,55 @@ ...@@ -1527,6 +1527,55 @@
<code> ...</code> <code> ...</code>
<code>&lt;/div></code> <code>&lt;/div></code>
</pre> </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>
</div> </div>
...@@ -1540,11 +1589,24 @@ ...@@ -1540,11 +1589,24 @@
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
$("#owl-carousel-demo").owlCarousel({ $("#owl-carousel-demo").owlCarousel({
items: 3, items: 3,
nav: true, nav: true,
loop: 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> </script>
</body> </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