├── .editorconfig
├── style.css
├── script.js
└── index.html
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
12 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | padding: 100px;
8 | }
9 |
10 | .content {
11 | max-width: 1200px;
12 | margin: 0 auto;
13 | display: flex;
14 | flex-direction: column;
15 | gap: 50px;
16 | align-items: flex-start;
17 | }
18 |
19 | .swiper {
20 | width: 100%;
21 | }
22 |
23 | .grid {
24 | display: grid;
25 | grid-template-columns: repeat(12, 1fr);
26 | gap: 20px;
27 | }
28 |
29 | .swiper-slide {
30 | grid-column: 4 span;
31 | }
32 |
33 | .content-card {
34 | padding: 20px;
35 | min-height: 200px;
36 | font-family: sans-serif;
37 | background-color: wheat;
38 | }
39 |
40 | @media (max-width: 1500px) {
41 | .slider-2 .swiper-wrapper {
42 | display: flex;
43 | column-gap: 0;
44 | }
45 | }
46 |
47 | @media (max-width: 1280px) {
48 | .slider-1 .swiper-wrapper {
49 | display: flex;
50 | column-gap: 0;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | window.addEventListener('DOMContentLoaded', () => {
2 |
3 | const resizableSwiper = (breakpoint, swiperClass, swiperSettings, callback) => {
4 | let swiper;
5 |
6 | breakpoint = window.matchMedia(breakpoint);
7 |
8 | const enableSwiper = function(className, settings) {
9 | swiper = new Swiper(className, settings);
10 |
11 | if (callback) {
12 | callback(swiper);
13 | }
14 | }
15 |
16 | const checker = function() {
17 | if (breakpoint.matches) {
18 | return enableSwiper(swiperClass, swiperSettings);
19 | } else {
20 | if (swiper !== undefined) swiper.destroy(true, true);
21 | return;
22 | }
23 | };
24 |
25 | breakpoint.addEventListener('change', checker);
26 | checker();
27 | }
28 |
29 | const someFunc = (instance) => {
30 | if (instance) {
31 | instance.on('slideChange', function (e) {
32 | console.log('*** mySwiper.activeIndex', instance.activeIndex);
33 | });
34 | }
35 | };
36 |
37 | resizableSwiper(
38 | '(max-width: 1280px)',
39 | '.slider-1',
40 | {
41 | loop: true,
42 | spaceBetween: 32,
43 | slidesPerView: 1,
44 | pagination: {
45 | el: '.swiper-pagination',
46 | clickable: true,
47 | },
48 | },
49 | someFunc
50 | );
51 |
52 | resizableSwiper(
53 | '(max-width: 1500px)',
54 | '.slider-2',
55 | {
56 | loop: true,
57 | spaceBetween: 10,
58 | slidesPerView: 3,
59 | freeMode: true,
60 | breakpoints: {
61 | 1200: {
62 | spaceBetween: 20,
63 | }
64 | }
65 | }
66 | );
67 | });
68 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | Контент
19 |
20 |
21 |
22 |
23 | Контент
24 |
25 |
26 |
27 |
28 | Контент
29 |
30 |
31 |
32 |
33 | Контент
34 |
35 |
36 |
37 |
38 | Контент
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | Контент
49 |
50 |
51 |
52 |
53 | Контент
54 |
55 |
56 |
57 |
58 | Контент
59 |
60 |
61 |
62 |
63 | Контент
64 |
65 |
66 |
67 |
68 | Контент
69 |
70 |
71 |
72 |
73 |