mirror of https://github.com/4xmen/xshop.git
Compare commits
3 Commits
237f069b91
...
f6cd392d9a
| Author | SHA1 | Date |
|---|---|---|
 A1Gard
|
f6cd392d9a | 4 weeks ago |
|
A1Gard
|
e703833e29 | 4 weeks ago |
|
A1Gard
|
0ff59e87fc | 4 weeks ago |
@ -0,0 +1,24 @@
|
||||
<section class="ModernSlider live-setting" data-live="{{$data->area_name.'_'.$data->part}}">
|
||||
<div id="ModernSlider">
|
||||
@foreach(\App\Models\Slider::where('status',1)->get() as $slider)
|
||||
<div class="item">
|
||||
<div class="modern-slider" style="background-image: url('{{$slider->imgUrl()}}')">
|
||||
<div class="modern-slide-item">
|
||||
<div class="main-content main-dir">
|
||||
{!! $slider->body !!}
|
||||
<br>
|
||||
<p class="text-center">
|
||||
{{$slider->dataz[$data->area_name.'_'.$data->part.'_subtitle']}}
|
||||
<br>
|
||||
<a class="btn btn-outline-primary mt-5"
|
||||
href="{{fixUrlLang($slider->dataz[$data->area_name.'_'.$data->part.'_link'])}}">
|
||||
{{$slider->dataz[$data->area_name.'_'.$data->part.'_btn']}}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
@ -0,0 +1,29 @@
|
||||
import {tns} from "tiny-slider/src/tiny-slider";
|
||||
|
||||
var modrenSlider;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('#ModernSlider')?.forEach(function (el) {
|
||||
if (el.classList.contains('.tns-slider')) {
|
||||
console.log('ignore');
|
||||
return 'ignore';
|
||||
}
|
||||
modrenSlider = tns({
|
||||
container: el,
|
||||
items: 1,
|
||||
// slideBy: 'page',
|
||||
// autoplay: true,
|
||||
autoplayButton: false,
|
||||
// nextButton: false,
|
||||
controls: false,
|
||||
autoplayHoverPause: true,
|
||||
mouseDrag: true,
|
||||
autoplayTimeout: 5000,
|
||||
autoplayButtonOutput: false,
|
||||
|
||||
// speed:10000,
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "ModernSlider",
|
||||
"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": []
|
||||
}
|
||||
@ -0,0 +1,37 @@
|
||||
<?php
|
||||
|
||||
namespace Resources\Views\Segments;
|
||||
|
||||
use App\Models\Part;
|
||||
use App\Models\Setting;
|
||||
use App\Models\Slider;
|
||||
|
||||
class ModernSlider
|
||||
{
|
||||
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');
|
||||
$setting = new Setting();
|
||||
$setting->section = 'theme';
|
||||
$setting->key = $part->area_name . '_' . $part->part.'_color';
|
||||
$setting->value = '#000000';
|
||||
$setting->data = json_encode(['name' => 'modern-slider-color']);
|
||||
$setting->type = 'COLOR';
|
||||
$setting->size = 12;
|
||||
$setting->title = $part->area_name . ' ' . $part->part .' slider text color';
|
||||
$setting->save();
|
||||
}
|
||||
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');
|
||||
Setting::where('key',$part->area_name . '_' . $part->part.'_color')->first()?->delete();
|
||||
}
|
||||
public static function onMount(Part $part = null)
|
||||
{
|
||||
return $part;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
.ModernSlider {
|
||||
// scss
|
||||
.modern-slider {
|
||||
height: 85vh;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||
|
||||
&:before, &:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 30%;
|
||||
inset-inline-end: 8%;
|
||||
bottom: 0;
|
||||
width: 500px;
|
||||
height: 35%;
|
||||
border-left: 3px solid;
|
||||
border-bottom: 3px solid;
|
||||
border-color: var(--xshop-primary);
|
||||
transform: rotate(-15deg);
|
||||
border-image-outset: 0;
|
||||
border-image-repeat: stretch;
|
||||
border-image-slice: 30;
|
||||
border-image-width: 3px;
|
||||
opacity: 0;
|
||||
transition-duration: 700ms;
|
||||
transition-delay: 550ms;
|
||||
transition-timing-function: cubic-bezier(.25, .25, .75, .75);
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
||||
border-image-source: linear-gradient(to right, transparent 83%, var(--xshop-primary) 83%, var(--xshop-primary) 100%);
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-image-source: linear-gradient(to left, transparent 83%, var(--xshop-secondary) 83%, var(--xshop-secondary) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.modern-slide-item {
|
||||
transform: scale(0);
|
||||
position: absolute;
|
||||
inset-inline-end: 12%;
|
||||
top: 40%;
|
||||
width: 350px;
|
||||
max-width: 80%;
|
||||
transition-duration: 500ms;
|
||||
transition-delay: 250ms;
|
||||
transition-timing-function: cubic-bezier(.25, .25, .75, .75);
|
||||
color: var(--modern-slider-color);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.tns-slide-active {
|
||||
.modern-slide-item {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.modern-slider {
|
||||
&:before, &:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*-1000px width*/
|
||||
@media (max-width: 1000px) {
|
||||
#ModernSlider {
|
||||
|
||||
.modern-slider {
|
||||
background-position: right center ;
|
||||
background-size: auto 100% ;
|
||||
}
|
||||
}
|
||||
.modern-slider {
|
||||
&:before, &:after {
|
||||
opacity: 1;
|
||||
max-width: 95%;
|
||||
top: 35% !important;
|
||||
inset-inline-end: 6% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
Loading…
Reference in New Issue