added ParallaxSlider part

fix slider auto problem

app/Http/Controllers/ThemeController.php

@@ -14,8 +14,7 @@ class ThemeController extends Controller
         foreach (Setting::where('section', 'Theme')->whereNotNull('data')
                      ->get(['value', 'data']) as $color) {
             $data = json_decode($color->data);
-            if ($data->name) {
+            if (isset($data->name)) {
-
                 $response .= '--' . $data->name . ':' . $color->value;
                 if (isset($data->suffix)) {
                     $response .= $data->suffix;

resources/sass/client-custom/_zfix.scss

@@ -76,3 +76,11 @@ a,a:visited{
         color: var(--xshop-primary);
     }
 }
+
+a.btn-outline-light{
+    color: white;
+}
+
+a.btn-outline-dark{
+    color: black;
+}

resources/views/segments/products/TreeGridProducts/TreeGridProducts.js

@@ -12,7 +12,6 @@ document.addEventListener('DOMContentLoaded', () => {
         treeSlider = tns({
             container: el,
             items: 3,
-            slideBy: 'page',
             autoplay: true,
             autoplayButton: false,
             // nextButton: false,
@@ -46,7 +45,6 @@ document.addEventListener('DOMContentLoaded', () => {
         treeSliderX = tns({
             container: el,
             items: 1,
-            slideBy: 'page',
             autoplay: true,
             autoplayButton: false,
             // nextButton: false,
@@ -67,7 +65,6 @@ document.addEventListener('DOMContentLoaded', () => {
         treeSliderX = tns({
             container: el,
             items: 1,
-            slideBy: 'page',
             autoplay: true,
             autoplayTimeout: 7500,
             autoplayButton: false,

resources/views/segments/slider/ParallaxSlider/ParallaxSlider.blade.php

@@ -0,0 +1,25 @@
+<section id='ParallaxSlider'>
+    <div id="ParallaxSliderTns">
+        @foreach(\App\Models\Slider::where('status',1)->get() as $slider)
+            <div>
+                <div class="parallax-slider" data-bg="{{$slider->imgUrl()}}"></div>
+                <div class="parallax-slide-item">
+                    <div class="main-content">
+                        {!! $slider->body !!}
+                        <br>
+                        <p class="text-center">
+                            {{$slider->dataz['index_ParallaxSlider_subtitle']}}
+                            <br>
+
+                            <a class="btn btn-outline-dark mt-5"
+                               href="{{$slider->dataz['index_ParallaxSlider_link']}}">
+                                {{$slider->dataz['index_ParallaxSlider_btn']}}
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+        @endforeach
+    </div>
+</section>
+

resources/views/segments/slider/ParallaxSlider/ParallaxSlider.js

@@ -0,0 +1,68 @@
+import {tns} from "tiny-slider/src/tiny-slider";
+
+var parallaxSlider ;
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('#ParallaxSliderTns')?.forEach(function (el) {
+        if (el.classList.contains('.tns-slider')){
+            console.log('ignore');
+            return 'ignore';
+        }
+        parallaxSlider = tns({
+            container: el,
+            items: 1,
+            // slideBy: 'page',
+            autoplay: false,
+            autoplayButton: false,
+            // nextButton: false,
+            controls: false,
+            autoplayHoverPause: true,
+            mouseDrag: true,
+            autoplayTimeout: 5000,
+            autoplayButtonOutput: false,
+
+            // speed:10000,
+
+        });
+    });
+
+    // document.addEventListener('scroll', function() {
+    //     const scrolled = window.scrollY;
+    //     const slides = document.querySelectorAll('.parallax-slider');
+    //
+    //     slides.forEach((slide) => {
+    //         const offset = slide.offsetTop;
+    //         slide.style.backgroundPositionY = `${(offset - scrolled) * 0.2}px`; // Adjust the multiplier for effect
+    //     });
+    // });
+
+    // Parallax effect
+    function applyParallax() {
+        const sliders = document.querySelectorAll('.parallax-slider');
+        const windowHeight = window.innerHeight;
+        const scrollY = window.scrollY;
+
+        sliders.forEach(slider => {
+            const sliderRect = slider.getBoundingClientRect();
+            const sliderCenter = sliderRect.top + sliderRect.height / 2;
+            const viewportCenter = windowHeight / 2;
+
+            const distanceFromCenter = sliderCenter - viewportCenter;
+            const parallaxOffset = distanceFromCenter * -0.7; // Adjust this value to control parallax intensity
+
+            const bgImage = slider.getAttribute('data-bg');
+            slider.style.backgroundImage = `url('${bgImage}')`;
+            slider.style.backgroundPositionY = `calc(50% + ${parallaxOffset}px)`;
+        });
+    }
+
+// Apply parallax on scroll and resize
+    window.addEventListener('scroll', applyParallax);
+    window.addEventListener('resize', applyParallax);
+
+// Initial application
+    applyParallax();
+
+// Reapply parallax when tiny-slider changes slides
+    parallaxSlider.events.on('transitionEnd', applyParallax);
+});

resources/views/segments/slider/ParallaxSlider/ParallaxSlider.json

@@ -0,0 +1,10 @@
+{
+    "name": "ParallaxSlider",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/slider/ParallaxSlider/ParallaxSlider.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+use App\Models\Slider;
+
+class ParallaxSlider
+{
+    public static function onAdd(Part $part = null)
+    {
+        Slider::addData($part->area->name . '_' . $part->part . '_btn','View offer');
+        Slider::addData($part->area->name . '_' . $part->part . '_link','/');
+        Slider::addData($part->area->name . '_' . $part->part . '_subtitle','Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci aliquid aspernatur, commodi corporis cupiditate');
+    }
+    public static function onRemove(Part $part = null)
+    {
+        Slider::remData($part->area->name . '_' . $part->part . '_btn');
+        Slider::remData($part->area->name . '_' . $part->part . '_link');
+        Slider::remData($part->area->name . '_' . $part->part . '_subtitle');
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/slider/ParallaxSlider/ParallaxSlider.scss

@@ -0,0 +1,34 @@
+#ParallaxSlider {
+
+    #ParallaxSliderTns > div{
+        position: relative;
+        overflow: hidden;
+        height: 750px;
+    }
+
+    .parallax-slide-item{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 750px;
+    }
+    // scss
+    .parallax-slider {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 750px;
+        background-size: auto 120vh;
+        background-position: center 0;
+
+
+    }
+    .main-content{
+        position: relative;
+        z-index: 2;
+        max-width: 80%;
+        width: 500px;
+    }
+}

resources/views/segments/slider/SliderSimple/SliderSimple.js

@@ -11,7 +11,6 @@ document.addEventListener('DOMContentLoaded', () => {
         sliderSimple = tns({
             container: el,
             items: 1,
-            slideBy: 'page',
             autoplay: true,
             autoplayButton: false,
             // nextButton: false,
@@ -21,4 +20,5 @@ document.addEventListener('DOMContentLoaded', () => {
             // speed:10000,
         });
     });
+
 });