swiper

.eslintrc.json

 {
     "parserOptions": {
-        "ecmaVersion": 6,
+        "ecmaVersion": 7,
         "sourceType": "module",
         "ecmaFeatures": {
             

package.json

 {
-  "name": "bndby",
+  "name": "default2",
   "version": "2.0.0",
-  "description": "bnd.by site",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/bndby/bndby.git"
-  },
+  "description": "Default frontend project",
   "author": "Bondarenko Yura",
   "license": "ISC",
   "homepage": "https://bnd.by/",
   "devDependencies": {
-    "@babel/core": "^7.1.0",
-    "@babel/preset-env": "^7.1.0",
-    "autoprefixer": "^8.2.0",
-    "babel-loader": "^8.0.2",
-    "browser-sync": "^2.24.4",
-    "eslint": "^4.19.1",
+    "@babel/core": "^7.2.0",
+    "@babel/plugin-proposal-class-properties": "^7.2.1",
+    "@babel/preset-env": "^7.2.0",
+    "autoprefixer": "^9.4.2",
+    "babel-loader": "^8.0.4",
+    "browser-sync": "^2.26.3",
+    "eslint": "^5.10.0",
     "gulp": "^3.9.1",
     "gulp-cache": "^1.0.2",
     "gulp-clean": "^0.4.0",
     "gulp-concat": "^2.6.1",
     "gulp-cssimport": "^7.0.0",
     "gulp-file-include": "^2.0.1",
-    "gulp-image": "^4.3.0",
-    "gulp-postcss": "^7.0.1",
+    "gulp-image": "^4.4.1",
+    "gulp-postcss": "^8.0.0",
     "gulp-rename": "^1.4.0",
     "gulp-sftp": "^0.1.5",
     "gulp-sourcemaps": "^2.6.4",
@@ -32,7 +29,10 @@
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.4.0",
     "pump": "^3.0.0",
-    "stylelint": "^9.2.0",
-    "webpack-stream": "^5.1.1"
+    "stylelint": "^9.9.0",
+    "webpack-stream": "^5.2.1"
+  },
+  "dependencies": {
+    "swiper": "^4.4.2"
   }
 }

src/assets/css/app.css

@@ -2,5 +2,6 @@
  * Базовый CSS
  */
 
+@import url( '../../../node_modules/swiper/dist/css/swiper.min.css' );
 @import url('../../components/common/common.css');
-@import url('../../components/button/button.css');
+@import url('../../components/swiper/swiper.css');

src/assets/js/app.js

-import Button from '../../components/header';
+import SwiperSlider from '../../components/swiper';
 
-const button = new Button();
-button.buttonAlert();
-
-// Comment
\ No newline at end of file
+document.addEventListener( 'DOMContentLoaded', () => {
+	const swiperSlider = new SwiperSlider();
+});
\ No newline at end of file

src/components/component/index.js

@@ -15,8 +15,7 @@ export default class Component {
 		 * selectors - селекторы перерисовываемых данных
 		 */
 		this.props = {
-			scopeSelector: '',
-			selectors: []
+			
 		};
 
 		// объединяем с переданными параметрами
@@ -43,6 +42,6 @@ export default class Component {
 	 * обновляем компонент
 	 */
 	render(){
-		
+		return false;
 	}
 }
\ No newline at end of file

src/components/header/index.js

-export default class Header {
+import Component from '../component';
 
-	buttonAlert() {
-		const button = document.querySelector( '.button' );
-		button.addEventListener( 'click', () => {
-			alert( `Message from button: ${button.innerHTML}` );
-		});
+export default class Header extends Component {
+
+	constructor( props = {
+		buttonSelector: '.header .button'
+	} ){
+		super( props );
+
+		this.state.button = document.querySelector( this.props.buttonSelector );
+		this.state.button.addEventListener( 'click', this.buttonClick );
+	}
+
+	buttonClick(){
+		alert(1);
+	}
+	
+	render(){
+		return true;
 	}
 }
\ No newline at end of file

src/components/swiper/index.html

+<!-- Slider main container -->
+<div class="swiper-container">
+
+	<!-- Additional required wrapper -->
+	<div class="swiper-wrapper"></div>
+
+	<!-- If we need pagination -->
+	<div class="swiper-pagination"></div>
+
+	<!-- If we need navigation buttons -->
+	<div class="swiper-button-prev"></div>
+	<div class="swiper-button-next"></div>
+
+	<!-- If we need scrollbar -->
+	<div class="swiper-scrollbar"></div>
+	
+</div>
\ No newline at end of file

src/components/swiper/index.js

+import Component from '../component';
+import Swiper from 'swiper';
+
+export default class SwiperSlider extends Component {
+
+	/**
+	 * Инициализируем свайпер
+	 * @param {object} props параметры свайпера
+	 */
+	constructor( props = {
+		selector: '.swiper-container',
+		options: {
+			// Optional parameters
+			// direction: 'vertical',
+			loop: true,
+		
+			// If we need pagination
+			pagination: {
+			  el: '.swiper-pagination',
+			},
+		
+			// Navigation arrows
+			navigation: {
+			  nextEl: '.swiper-button-next',
+			  prevEl: '.swiper-button-prev',
+			},
+		
+			// And if we need scrollbar
+			scrollbar: {
+			  el: '.swiper-scrollbar',
+			},
+
+			slidesPerView: 1
+		}
+	} ){
+		super( props );
+
+		this.state.swiper = new Swiper( this.props.selector, this.props.options );
+
+		this.loadData( this.state );
+	}
+
+	/**
+	 * загружаем данные
+	 */
+	loadData = () => {
+
+		fetch( 'https://moscowseasons.com/graphql', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				'operationName': 'albums',
+				'variables': {
+					'after': null,
+					'before': null,
+					'first': 4,
+					'last': null,
+					'locale': 'RU'
+				},
+				'query': 
+					`query albums($locale: Locale, $after: String, $first: Int, $before: String, $last: Int) {
+						albums(locale: $locale, after: $after, first: $first, before: $before, last: $last) {
+							edges {
+								node {
+									id
+									title
+									photos {
+										id
+										url
+										resized(width: 1200, height: 800) {
+											url
+											__typename
+										}
+										__typename
+									}
+									count
+									__typename
+								}
+								__typename
+							}
+							pageInfo {
+								hasNextPage
+								startCursor
+								endCursor
+								__typename
+							}
+							__typename
+						}
+					}`
+			})
+		})
+			.then( ( response ) => {
+				return response.json();
+			})
+			.then( ( data ) => {
+
+				data.data.albums.edges.forEach( ( album, index ) => {
+
+					const slide = `<div class="swiper-item">
+						<h3>Swiper ${index}</h3>
+						<p>Swiper ${index} slide</p>
+						<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
+					</div>`;
+
+					this.state.swiper.appendSlide( slide );
+					
+				});
+
+				this.state.swiper.update();
+
+				console.log(this.state.swiper)
+
+			});
+	}
+
+
+
+}
\ No newline at end of file

src/components/swiper/swiper.css

+.swiper-container {
+	width: 600px;
+	height: 300px;
+}
+
+.swiper-item img {
+	width: 100%;
+}
\ No newline at end of file

src/index.html

@@ -14,7 +14,7 @@
 
 <body>
 
-	@@include( './components/header/index.html' )
+	@@include( './components/swiper/index.html' )
 	
 	<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es6,fetch"></script>
 	<script src="/assets/js/app.js?@@rev" type="module"></script>

webpack.dev.js

@@ -24,6 +24,9 @@ module.exports = {
 							[ '@babel/preset-env', {
 								useBuiltIns: 'usage'
 							} ]
+						],
+						'plugins': [
+							'@babel/plugin-proposal-class-properties',
 						]
 					}
 				}

webpack.prod.js

@@ -24,6 +24,9 @@ module.exports = {
 							[ '@babel/preset-env', {
 								useBuiltIns: 'usage'
 							} ]
+						],
+						'plugins': [
+							'@babel/plugin-proposal-class-properties',
 						]
 					}
 				}