Add slider

4716c647 · Sergey · 8b3c5573 · 4716c647 · 4716c647 · 4716c647
Commit 4716c647 authored Nov 27, 2018 by Sergey
12 changed files
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -23,6 +23,10 @@ gulp.task('browser-sync', function() {
        }
    });
 });
+gulp.task('img:build', function () {
+    return gulp.src('./src/img/nosprite/rastr/*.*')
+        .pipe(gulp.dest('./build/img/'));
+});

 gulp.task('fonts:build', function () {
   return gulp.src('./src/fonts/**/*.*')
@@ -129,6 +133,7 @@ gulp.task('watch', function() {
    gulp.watch('./src/fonts/**/*.*', gulp.series('fonts:build'));
    gulp.watch('./src/js-common/**/*.*', gulp.series('js-common:build'));
    gulp.watch('./src/css-common/**/*.*', gulp.series('css-common:build'));
+    gulp.watch('./src/img/nosprite/**/*.*', gulp.series('img:build'));
 });


@@ -147,7 +152,8 @@ gulp.task('default', gulp.series(
        'sprite:svg',
        'fonts:build',
        'js-common:build',
-        'css-common:build'
+        'css-common:build',
+        'img:build'
    ),
    gulp.parallel(
        'watch',

--- a/src/css-common/swiper.css
+++ b/src/css-common/swiper.css
--- a/src/img/nosprite/rastr/background-min.jpg
+++ b/src/img/nosprite/rastr/background-min.jpg
--- a/src/img/nosprite/rastr/slide.jpg
+++ b/src/img/nosprite/rastr/slide.jpg
--- a/src/img/nosprite/rastr/slide.png
+++ b/src/img/nosprite/rastr/slide.png
--- a/src/js-common/swiper.js
+++ b/src/js-common/swiper.js
--- a/src/js/main-slider.js
+++ b/src/js/main-slider.js
 'use strict';

 (function () {
-
+    document.addEventListener('DOMContentLoaded', function () {
+        var mySwiperMP = new Swiper ('.swiper-container', {
+            direction: 'horizontal',
+            loop: true,
+            autoplay: {
+                delay: 3000,
+                grabCursor: true
+            },
+        });
+    });
 })();
\ No newline at end of file
--- a/src/scss/main-slider/main-slider-common.scss
+++ b/src/scss/main-slider/main-slider-common.scss
+@import "../settings/color";
+
+.main-slider{
+  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.65) 35%, #232021 80%, #232021 100%),url("/img/background-min.jpg")no-repeat;
+  background-size: cover;
+}
\ No newline at end of file
--- a/src/scss/settings/common-style.scss
+++ b/src/scss/settings/common-style.scss
@@ -6,7 +6,7 @@ body{
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', serif;
-  background: gray;
+  background: #232021;
 }

 .wrapper{

--- a/src/template/common/footer.html
+++ b/src/template/common/footer.html
 <p>sadasdasdad</p>

 </body>
+<script src="js/swiper.js"></script>
 <script src="js/all.js"></script>
 </html>
\ No newline at end of file
--- a/src/template/common/header.html
+++ b/src/template/common/header.html
@@ -3,6 +3,7 @@
 <head lang="ru">
    <meta charset="UTF-8">
    <title>Bobcat SU</title>
+    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/style.css">
 </head>
 <body>

--- a/src/template/main-slider/index.html
+++ b/src/template/main-slider/index.html
 <div class="main-slider">
    <div class="wrapper main-slider__wrapper">
-        dsfdsfsdf
+        <div class="slider__main swiper-container">
+            <div class="swiper-wrapper">
+                <div class="slider__main-item swiper-slide"><a href="#"><img src="img/slide.jpg"></a></div>
+            </div>
+        </div>
    </div>
 </div>
\ No newline at end of file