Installed owlcarousel, Edited webpack.mix.js, Added customer section for home page

package-lock.json

@@ -5560,6 +5560,14 @@
             "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=",
             "dev": true
         },
+        "owl.carousel": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/owl.carousel/-/owl.carousel-2.3.4.tgz",
+            "integrity": "sha512-JaDss9+feAvEW8KZppPSpllfposEzQiW+Ytt/Xm5t/3CTJ7YVmkh6RkWixoA2yXk2boIwedYxOvrrppIGzru9A==",
+            "requires": {
+                "jquery": ">=1.8.3"
+            }
+        },
         "p-defer": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "dependencies": {
         "bootstrap": "^5.0.2",
         "jquery": "^3.6.0",
-        "node-sass": "^6.0.1"
+        "node-sass": "^6.0.1",
+        "owl.carousel": "^2.3.4"
     }
 }

resources/js/app.js

@@ -1,2 +1,2 @@
 require('bootstrap/dist/js/bootstrap.bundle.js');
-window.$ = require('jquery/dist/jquery.js');
+require('owl.carousel/dist/owl.carousel.js');

resources/js/home/home.js

@@ -7,4 +7,31 @@ document.addEventListener('click',function(e){
         e.target.children[0].classList.toggle('active');
     }
 })
+$(document).ready(function() {
+    // owlCarousel for customer
+    $('.customer-holder').find('.owl-carousel').owlCarousel({
+        rtl: true,
+        loop: true,
+        margin: 10,
+        nav: false,
+        dots: false,
+        autoplay:true,
+        autoplayTimeout:2000,
+        autoplayHoverPause:true,
+        responsive:{
+            0:{
+                items:1
+            },
+            475:{
+                items:2
+            },
+            600:{
+                items:3
+            },
+            1000:{
+                items:5
+            }
+        }
+    })
+});
 

resources/sass/app.scss

@@ -3,3 +3,8 @@
 
 // Bootstrap
 @import '~bootstrap/scss/bootstrap';
+
+// owl.carousel
+$owl-image-path: '../img/';
+@import "~owl.carousel/src/scss/owl.carousel";
+@import "~owl.carousel/src/scss/owl.theme.default";

resources/sass/home/home.scss

@@ -516,7 +516,8 @@ footer {
 }
 
 
-// home
+// -----------------------home
+//banner home page
 .banner-holder {
     min-height: 520px;
     position: relative;
@@ -525,23 +526,11 @@ footer {
     display: flex;
     align-items: center;
 }
+
+// services home page
 .services-holder {
     text-align: center;
     padding: 2.5rem 0 ;
-    .title {
-        font-weight: 600;
-        font-size: 1.4rem;
-        line-height: 2;
-        margin-bottom: 0.5rem;
-        text-align: center;
-    }
-    .title-desc {
-        width: 70%;
-        margin: 0 auto 72px;
-        font-size: 0.875rem;
-        line-height: 2;
-        color: lighten($gray , 10);
-    }
     .feature-box-holder {
         background-color: $white;
         border-radius: 0.93rem;
@@ -657,3 +646,44 @@ footer {
         margin-top: 0.6rem;
     }
 }
+// title section for home page
+.title {
+    font-weight: 600;
+    font-size: 1.4rem;
+    line-height: 2;
+    margin-bottom: 0.5rem;
+    text-align: center;
+}
+.title-desc {
+    width: 70%;
+    margin: 0 auto 72px;
+    font-size: 0.875rem;
+    line-height: 2;
+    color: lighten($gray , 10);
+    @media screen and (max-width: 768px) {
+        width: 95%;
+    }
+}
+
+// customer home page
+.customer-holder {
+    background-color: $white;
+    text-align: center;
+    padding: 2.5rem 0;
+    .title-desc {
+        margin-bottom: 2.5rem;
+    }
+    .owl-carousel {
+        .item {
+            img {
+                display: block;
+                width: 100%;
+                opacity: 0.2;
+                transition: ease opacity 500ms;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}

resources/views/home/home.blade.php

@@ -70,9 +70,44 @@
 
             </div>
         </section>
+        <section class="customer-holder">
+            <div class="container">
+                <h2 class="title">
+                    برخی مشتریان
+                </h2>
+                <div class="title-desc">
+                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
+                </div>
+            </div>
+            <div class="container">
+                <div class="owl-carousel owl-theme">
+                    <div class="item">
+                        <img src="https://www.okler.net/previews/porto/9.1.0/img/logos/logo-1.png" alt="img">
+                    </div>
+                    <div class="item">
+                        <img src="https://www.okler.net/previews/porto/9.1.0/img/logos/logo-2.png" alt="img">
+                    </div>
+                    <div class="item">
+                        <img src="https://www.okler.net/previews/porto/9.1.0/img/logos/logo-3.png" alt="img">
+                    </div>
+                    <div class="item">
+                        <img src="https://www.okler.net/previews/porto/9.1.0/img/logos/logo-4.png" alt="img">
+                    </div>
+                    <div class="item">
+                        <img src="https://www.okler.net/previews/porto/9.1.0/img/logos/logo-5.png" alt="img">
+                    </div>
+                    <div class="item">
+                        <img src="https://www.okler.net/previews/porto/9.1.0/img/logos/logo-6.png" alt="img">
+                    </div>
+                </div>
+            </div>
+        </section>
     @endslot
 
     @slot('script')
+        <script>
+
+        </script>
     @endslot
 
 @endcomponent

webpack.config.js

@@ -0,0 +1,6 @@
+resolve: {
+    alias: {
+        'node_modules': path.join(__dirname, 'node_modulesss'),
+            'bower_modules': path.join(__dirname, 'bower_modules'),
+    }
+}

webpack.mix.js

@@ -11,6 +11,10 @@ const mix = require('laravel-mix');
  |
  */
 
+mix.autoload({
+    jquery: ['$', 'jQuery', 'window.jQuery']
+});
+
 mix.js('resources/js/home/home.js', 'public/js')
     .sass('resources/sass/home/home.scss', 'public/css')
     .copyDirectory('resources/images/home', 'public/images/home');