Merge

package.json

@@ -59,6 +59,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",

projectConfig.json

@@ -41,11 +41,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"
@@ -57,7 +59,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"

src/blocks/owl-carousel/owl-carousel.html

+<!--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

+// $(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

+// В этом файле должны быть стили только для БЭМ-блока owl-carousel, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+.owl-carousel {}