Вот так вот можно подключить Swiper слайдер в Gulp.
Слайды будут крутить бесконечно, через каждые 3 секунды - "delay: 3000"
При наведении указателя мыши на слайдер он остановится.
- Файлы слайдера подключаются в gulpfile.js
node_modules/swiper/swiper-bundle.min.css
node_modules/swiper/swiper-bundle.js
- Затем к index.html подключаем наши файлы JS и CSS.
- В JS файле пишем настройки для Swiper слайдер, то как он будет работать.
P.S. Чтобы использовать импорты (import ****) в gulpfile.js укажите в package.json файле "type": "module",
Ниже всё показал, вроде всё работает. Сборка может быть сыроватой!
Структура готовой сборки
Start_Gulp
├── .gitignore
├── gulpfile.js
├── package-lock.json
├── package.json
├── app
│ ├── .htaccess
│ ├── index.html
│ ├── css
│ ├── fonts
│ │ └── Museo Cyrl 500.otf
│ ├── img
│ │ └── favicon.png
│ ├── js
│ │ └── main.js
│ └── scss
│ ├── style.scss
│ ├── _fonts.scss
│ ├── _global.scss
│ └── _vars.scss
└── build
├── css
│ ├── libs.min.css
│ └── style.min.css
└── js
├── libs.min.js
└── main.min.js
package.json
{
"name": "start-gulp",
"version": "3.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Brendan8c",
"license": "ISC",
"type": "module",
"devDependencies": {
"browser-sync": "^2.29.3",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^9.0.0",
"gulp-concat": "^2.6.1",
"gulp-cssmin": "^0.2.0",
"gulp-rename": "^2.0.0",
"gulp-sass": "^5.1.0",
"gulp-terser": "^2.1.0",
"gulp-watch": "^5.0.1",
"jquery": "^3.7.1",
"normalize.css": "^8.0.1",
"smoothscroll-polyfill": "^0.4.4"
},
"dependencies": {
"sass": "^1.69.5",
"swiper": "^11.0.5"
}
}
gulpfile.js
import gulp from 'gulp';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import rename from 'gulp-rename';
import browserSync from 'browser-sync';
import autoprefixer from 'gulp-autoprefixer';
import concat from 'gulp-concat';
import terser from 'gulp-terser';
import cssmin from 'gulp-cssmin';
import watch from 'gulp-watch';
gulp.task('style', function () {
return gulp.src(['node_modules/normalize.css/normalize.css', 'node_modules/swiper/swiper-bundle.min.css']).pipe(concat('libs.min.css')).pipe(cssmin()).pipe(gulp.dest('app/css'));
});
gulp.task('script', function () {
return gulp.src(['node_modules/jquery/dist/jquery.js', 'node_modules/swiper/swiper-bundle.js']).pipe(concat('libs.min.js')).pipe(terser()).pipe(gulp.dest('app/js'));
});
gulp.task('script-min', function () {
return gulp.src('app/js/main.js').pipe(concat('main.min.js')).pipe(terser()).pipe(gulp.dest('app/js'));
});
gulp.task('sass', function () {
return gulp
.src('app/scss/**/*.scss')
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(rename({ suffix: '.min' }))
.pipe(
autoprefixer({
overrideBrowserslist: ['last 8 versions'],
})
)
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task('js-watch', function () {
gulp.watch('app/js/main.js', gulp.series('script-min')).on('change', browserSync.reload);
});
gulp.task('sass-watch', function () {
return gulp
.src('app/scss/**/*.scss')
.pipe(watch('app/scss/**/*.scss').on('change', gulp.series('sass')))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(rename({ suffix: '.min' }))
.pipe(
autoprefixer({
overrideBrowserslist: ['last 8 versions'],
})
)
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({ stream: true }));
});
gulp.task('html', function () {
return gulp.src('app/*.html').pipe(browserSync.reload({ stream: true }));
});
gulp.task('js', function () {
return gulp.src('app/js/*.js').pipe(browserSync.reload({ stream: true }));
});
gulp.task('watch', function () {
gulp.watch('app/scss/**/*.scss', gulp.parallel('sass-watch'));
gulp.watch('app/*.html', gulp.parallel('html'));
gulp.watch('app/js/*.js', gulp.parallel('js-watch'));
});
gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: 'app/',
},
});
});
gulp.task('default', gulp.parallel('style', 'script', 'script-min', 'sass-watch', 'js-watch', 'watch', 'browser-sync'));
main.js
new Swiper('.swiper-container', {
slidesPerView: 1, // Количество слайдов на один просмотр (слайды, видимые одновременно в контейнере слайдера).
loop: true, // Режим непрерывного цикла.
autoplay: {
delay: 3000, // Задержка между переходами.
pauseOnMouseEnter: true, // При включении автовоспроизведение будет приостановлено при наведении указателя (мыши) на контейнер Swiper.
},
pagination: {
el: '.swiper-pagination',
clickable: true, // Делаем точки кликабельными
},
speed: 800, // Продолжительность анимации при переключении точек в миллисекундах
});
index.html
<head>
<link rel="stylesheet" href="css/libs.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
</head>
<body>
<!-- swiper-container Название класса как и в main.js -->
<div class="swiper-container">
<!-- swiper-wrapper Название класса это используем -->
<div class="swiper-wrapper">
<!-- swiper-slide Название класса это используем для каждого из слайдов -->
<div class="swiper-slide">
<img src="img/Image_1.webp" />
</div>
<div class="swiper-slide">
<img src="img/Image_2.webp" />
</div>
<div class="swiper-slide">
<img src="img/Image_3.webp" />
</div>
</div>
<!-- swiper-pagination Название класса как и в main.js -->
<div class="swiper-pagination"></div>
</div>
<script src="js/libs.min.js"></script>
<script src="js/main.min.js"></script>
</body>
