Plugins/JS/CSS - Added .slick-carousel to npm and bower and to js/css plugins/w-slick.js/css for make it work by default

Author: arturmamedov

bower.json

@@ -33,6 +33,7 @@
     "flag-icon-css": "latest",
     "jquery.nicescroll": "latest",
     "raty": "latest",
-    "js-cookie": "^2.2.0"
+    "js-cookie": "^2.2.0",
+    "slick-carousel": "^1.8.1"
   }
 }

css/plugins/w-slick.css

@@ -0,0 +1,60 @@
+/**
+ * Custom slick css
+ */
+.slick-dotted.slick-slider {
+    margin-bottom: 0px;
+}
+
+.slick-slide {
+    margin: 0px 10px;
+}
+
+.slick-dots {
+    position: initial;
+    width: 100%;
+    text-align: center;
+    margin-top: 30px;
+}
+.slick-dots li button::before {
+    font-size: 25px;
+}
+
+.slick-prev {
+    left:0;
+    z-index: 10;
+}
+.slick-next {
+    right:0;
+    z-index: 10;
+}
+/*.slick-prev,
+.slick-next {
+    width: 40px;
+    height: 80px;
+    background-color: #D90860;
+    margin-top: 25px;
+}
+.slick-prev:hover,
+.slick-next:hover,
+.slick-prev:active,
+.slick-next:active,
+.slick-prev:focus,
+.slick-next:focus
+{
+    background-color: #0E1222;
+}
+*/
+.slick-prev:before {
+    content: '\f137'; /* chevron: 'f053', arrow: 'f060' */
+}
+.slick-next:before {
+    content: '\f138'; /* chevron: 'f054', arrow: 'f061' */
+}
+.slick-prev:before,
+.slick-next:before {
+    font-family: "Font Awesome 5 Free";
+    color: #0036E7;
+    font-size: 24px;
+    opacity: 1;
+    font-weight: 900;
+}

gruntfile.js

@@ -138,6 +138,7 @@ module.exports = function (grunt) {
                     // plugins
                     'js/plugins/w-datepicker.js', // uxsolution/bootstrap-datepicker wrapper
                     // (disabled for me) 'js/plugins/w-raty.js', // raty wrapper
+                    'js/plugins/w-slick.js', // slick-carousel
                     // web
                     'js/web/w-analytics.js', // google analytics events tracker
                     // (disabled for me) 'js/web/w-cookie_choice.js', // cookie consent banner
@@ -176,6 +177,7 @@ module.exports = function (grunt) {
                     // plugins
                     'js/plugins/w-datepicker.js', // uxsolution/bootstrap-datepicker wrapper
                     'js/plugins/w-raty.js', // raty wrapper
+                    'js/plugins/w-slick.js', // slick-carousel
                     // web
                     'js/web/w-analytics.js', // google analytics events tracker
                     'js/web/w-cookie_choice.js', // cookie consent banner
@@ -283,6 +285,8 @@ module.exports = function (grunt) {
                         // 'node_modules/flag-icon-css/css/flag-icon.min.css',
                         // 'node_modules/animate.css/animate.min.css',
                         'node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css',
+                        'node_modules/slick-carousel/slick/slick.css',
+                        'node_modules/slick-carousel/slick/slick-theme.css',
                     ]
                 }
             }
@@ -311,6 +315,7 @@ module.exports = function (grunt) {
                         'node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js',
                         'node_modules/js-cookie/src/js.cookie.js',
                         'node_modules/jquery.nicescroll/dist/jquery.nicescroll.min.js',
+                        'node_modules/slick-carousel/slick/slick.min.js',
                     ]
                 }
             }

js/plugins/w-slick.js

@@ -0,0 +1,42 @@
+$(function(){
+    /* Slick activation other settings are made by data-slick="{}" api */
+    $(".slick-carousel").slick({
+        slidesToShow: 4,
+        slidesToScroll: 3,
+        autoplay: true,
+        dots: true,
+        arrows: true,
+        responsive: [
+            {
+                breakpoint: 1024,
+                settings: {
+                    dots: true,
+                    arrows: true,
+                    infinite: true,
+                    slidesToShow: 3,
+                    slidesToScroll: 2
+                }
+            },
+            {
+                breakpoint: 600,
+                settings: {
+                    dots: false,
+                    arrows: true,
+                    infinite: true,
+                    slidesToShow: 2,
+                    slidesToScroll: 2
+                }
+            },
+            {
+                breakpoint: 480,
+                settings: {
+                    dots: false,
+                    arrows: true,
+                    infinite: true,
+                    slidesToShow: 2,
+                    slidesToScroll: 1
+                }
+            }
+        ]
+    });
+});

js/withplugins_concat_template.js

@@ -63,4 +63,6 @@ $(document).ready(function () {
     /* withInclude('js/form/w-binder.js') */
 });
 
+/* withInclude('js/plugins/w-slick.js') */
+
 /* withInclude('js/web/w-cookie_choice.js') */

package.json

@@ -35,6 +35,7 @@
     "lodash": "^4.17.15",
     "popper.js": "^1.16.1",
     "respond.js": "^1.4.2",
+    "slick-carousel": "^1.8.1",
     "wowjs": "^1.1.3"
   },
   "devDependencies": {
@@ -47,6 +48,7 @@
   },
   "scripts": {
     "development": "grunt -vvv",
+    "onlycss": "grunt cssmin",
     "dev": "grunt -v",
     "production": "grunt",
     "prod": "grunt",