Skip to content

D
default2
Commit 5f80c09b authored by Yuri Bondarenko's avatar Yuri Bondarenko
Browse files
Options

swiper

parent c7afb658
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 36 deletions
.stylelintrc.json
View file @ 5f80c09b
......@@ -39,7 +39,8 @@
"always",
{
"except": [
"blockless-after-same-name-blockless"
"blockless-after-same-name-blockless",
"first-nested"
],
"ignore": [
"after-comment"
......
gulpfile.js
View file @ 5f80c09b
......@@ -11,6 +11,11 @@ const postcss = require( 'gulp-postcss' ); // Пост-обработка CSS
const postcssPresetEnv = require( 'postcss-preset-env' ); // CSS Next
const cssvariables = require('postcss-css-variables'); // полифил для CSS-переменных
const atImport = require('postcss-import'); // парсинг и включение импорта CSS
const apply = require('postcss-apply');
const postcssCustomMedia = require('postcss-custom-media');
const postcssMediaMinmax = require('postcss-media-minmax');
const postcssColorFunction = require('postcss-color-function');
const sourcemaps = require( 'gulp-sourcemaps' ); // карты исходного кода
const webpack = require( 'webpack-stream' );
......@@ -37,16 +42,20 @@ const libCSS = [
const postcssOptions = [
atImport(),
postcssPresetEnv({
features: {
/* features: {
'custom-properties': false
},
}, */
stage: 0,
autoprefixer: {
grid: true,
browsers: [ 'last 4 versions', 'ie >= 11', 'iOS >= 9' ]
}
}),
cssvariables()
cssvariables(),
apply(),
postcssCustomMedia(),
postcssMediaMinmax(),
postcssColorFunction()
];
/**
......
package-lock.json
View file @ 5f80c09b
......@@ -2944,6 +2944,17 @@
"object-visit": "^1.0.0"
}
},
"color": {
"version": "0.11.4",
"resolved": "http://registry.npmjs.org/color/-/color-0.11.4.tgz",
"integrity": "sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=",
"dev": true,
"requires": {
"clone": "^1.0.2",
"color-convert": "^1.3.0",
"color-string": "^0.3.0"
}
},
"color-convert": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
......@@ -2959,6 +2970,15 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
"dev": true
},
"color-string": {
"version": "0.3.0",
"resolved": "http://registry.npmjs.org/color-string/-/color-string-0.3.0.tgz",
"integrity": "sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=",
"dev": true,
"requires": {
"color-name": "^1.0.0"
}
},
"color-support": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
......@@ -3271,6 +3291,41 @@
"urix": "^0.1.0"
}
},
"css-color-function": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/css-color-function/-/css-color-function-1.3.3.tgz",
"integrity": "sha1-jtJMLAIFBzM5+voAS8jBQfzLKC4=",
"dev": true,
"requires": {
"balanced-match": "0.1.0",
"color": "^0.11.0",
"debug": "^3.1.0",
"rgb": "~0.1.0"
},
"dependencies": {
"balanced-match": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.1.0.tgz",
"integrity": "sha1-tQS9BYabOSWd0MXvw12EMXbczEo=",
"dev": true
},
"debug": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
"integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
},
"ms": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
"integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
"dev": true
}
}
},
"css-prefers-color-scheme": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
......@@ -5474,14 +5529,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -5496,20 +5549,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -5626,8 +5676,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -5639,7 +5688,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -5654,7 +5702,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -5766,8 +5813,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -5779,7 +5825,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -5901,7 +5946,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -12028,6 +12072,30 @@
"supports-color": "^5.4.0"
}
},
"postcss-apply": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/postcss-apply/-/postcss-apply-0.11.0.tgz",
"integrity": "sha512-Y/uBl3p0H3jby+N3kvSNyuyLKZaCElCMMFWXSfEL9llEeCKupJ9Wit5Ms7TsAXFINexkWWwjiYfqPZ1nedi1Jw==",
"dev": true,
"requires": {
"babel-runtime": "^6.26.0",
"balanced-match": "^1.0.0",
"postcss": "^7.0.2"
},
"dependencies": {
"postcss": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.6.tgz",
"integrity": "sha512-Nq/rNjnHFcKgCDDZYO0lNsl6YWe6U7tTy+ESN+PnLxebL8uBtYX59HZqvrj7YLK5UCyll2hqDsJOo3ndzEW8Ug==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.5.0"
}
}
}
},
"postcss-attribute-case-insensitive": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.0.tgz",
......@@ -12051,6 +12119,18 @@
}
}
},
"postcss-color-function": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-color-function/-/postcss-color-function-4.0.1.tgz",
"integrity": "sha1-QCs/LOvD9pR+YY+2vjZU++zvZEQ=",
"dev": true,
"requires": {
"css-color-function": "~1.3.3",
"postcss": "^6.0.1",
"postcss-message-helpers": "^2.0.0",
"postcss-value-parser": "^3.3.0"
}
},
"postcss-color-functional-notation": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
......@@ -12629,6 +12709,12 @@
"integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=",
"dev": true
},
"postcss-message-helpers": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz",
"integrity": "sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=",
"dev": true
},
"postcss-nesting": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.0.tgz",
......@@ -13075,7 +13161,7 @@
},
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
"dev": true
},
......@@ -13818,6 +13904,12 @@
"integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
"dev": true
},
"rgb": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/rgb/-/rgb-0.1.0.tgz",
"integrity": "sha1-vieykej+/+rBvZlylyG/pA/AN7U=",
"dev": true
},
"rimraf": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
......
src/assets/css/app.css
View file @ 5f80c09b
/* Библиотеки */
@import url( '../../../node_modules/swiper/dist/css/swiper.min.css' );
@import url( '../../../node_modules/swiper/dist/css/swiper.css' );
/* CSS */
@import url('../../components/common/common.css');
......
src/components/swiper/index.js
View file @ 5f80c09b
import Component from '../component';
import Swiper from 'swiper';
import { Swiper, Navigation, Pagination } from 'swiper/dist/js/swiper.esm.js';
Swiper.use([Navigation, Pagination]);
export default class SwiperSlider extends Component {
......@@ -11,6 +13,7 @@ export default class SwiperSlider extends Component {
selector: '.swiper-container',
options: {
spaceBetween: 10,
loop: true,
// If we need pagination
pagination: {
......@@ -31,6 +34,7 @@ export default class SwiperSlider extends Component {
} ){
super( props );
this.loadData();
}
......@@ -92,7 +96,7 @@ export default class SwiperSlider extends Component {
data.data.albums.edges.forEach( ( album, index ) => {
const slide = `<div class="swiper-item">
const slide = `<div class="swiper-slide">
<h3>Swiper ${index}</h3>
<p>Swiper ${index} slide</p>
<img src="${album.node.photos[0].resized.url}" alt="${album.node.title}" />
......@@ -102,8 +106,6 @@ export default class SwiperSlider extends Component {
});
console.log( slides );
this.setState({
slides: slides
});
......@@ -115,8 +117,9 @@ export default class SwiperSlider extends Component {
// console.log( this.state.slides );
this.swiper = new Swiper( this.props.selector, this.props.options );
// this.swiper.appendSlide( this.state.slides );
this.swiper.appendSlide( this.state.slides );
console.log( 'Swiper class: render() called' );
}
......
src/components/swiper/swiper.css
View file @ 5f80c09b
.swiper-container {
width: 600px;
height: 500px;
}
.swiper-item {
width: 200px;
}
.swiper-slide {
.swiper-item img {
width: 100%;
& img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
\ No newline at end of file
src/index.html
View file @ 5f80c09b
......@@ -16,8 +16,8 @@
@@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>
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
<script src="/assets/js/app.js?@@rev"></script>
</body>
......
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