Brendan Castaneda

1. Файлы слайдера подключаются в gulpfile.js
   node_modules/swiper/swiper-bundle.min.css
   node_modules/swiper/swiper-bundle.js
   
2. Затем к index.html подключаем наши файлы JS и CSS.
   
3. В JS файле пишем настройки для Swiper слайдер, то как он будет работать.
   

{
  "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"
  }
}

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'));

new Swiper('.swiper-container', {
  slidesPerView: 1, // Количество слайдов на один просмотр (слайды, видимые одновременно в контейнере слайдера).
  loop: true, // Режим непрерывного цикла.
  autoplay: {
    delay: 3000, // Задержка между переходами.
    pauseOnMouseEnter: true, // При включении автовоспроизведение будет приостановлено при наведении указателя (мыши) на контейнер Swiper.
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true, // Делаем точки кликабельными
  },
  speed: 800, // Продолжительность анимации при переключении точек в миллисекундах
});

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

function MyPrompt() {
  const [isBlocking, setIsBlocking] = React.useState(false);
  const location = useLocation();

  const handleBeforeUnload = (event) => {
    if (isBlocking) {
      event.preventDefault();
      event.returnValue = "Are you sure you want to leave?";
    }
  };

  React.useEffect(() => {
    window.addEventListener("beforeunload", handleBeforeUnload);

    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, [isBlocking]);

  const handleFormChange = (event) => {
    if (event.target.value.length > 0) {
      setIsBlocking(true);
    } else {
      setIsBlocking(false);
    }
  };

  return (
    <div>
      <form onChange={handleFormChange}>
        <input type="text" placeholder="Type something here" />
        <textarea placeholder="Type something here"></textarea>
        <button type="submit">Submit</button>
        <button type="button" onClick={() => setIsBlocking(false)}>Cancel</button>
      </form>
    </div>
  );
}

@echo off
(start "1.txt" "KM-Goanna\1.txt" & start "2.txt" "KM-Goanna\2.txt")
exit