mirror of https://github.com/4xmen/xshop.git
added downtown slider
lilUnkelDemon
2 weeks ago
parent
9c5f2e5158
commit
d03e6d7a72
@ -0,0 +1,86 @@
|
|||||||
|
<section class="DowntownSlider live-setting" data-live="{{$data->area_name.'_'.$data->part}}">
|
||||||
|
<div id="downtown-slider">
|
||||||
|
@foreach(\App\Models\Slider::where('status',1)->get() as $slider)
|
||||||
|
<div class="item">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-6 downtown-img">
|
||||||
|
<img src="{{$slider->imgUrl()}}" class="img-fluid" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="col-6 downtown-content">
|
||||||
|
<img src="{{$slider->imgUrl()}}" alt="">
|
||||||
|
<svg
|
||||||
|
width="145mm"
|
||||||
|
height="145mm"
|
||||||
|
viewBox="0 0 145 145"
|
||||||
|
version="1.1"
|
||||||
|
id="svg5"
|
||||||
|
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||||
|
sodipodi:docname="drawing.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview7"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="1.5287037"
|
||||||
|
inkscape:cx="334.27014"
|
||||||
|
inkscape:cy="284.88189"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1049"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs2" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<path
|
||||||
|
id="path234"
|
||||||
|
style="fill:#008d8d;fill-opacity:0;stroke:#000000;stroke-width:2.083;stroke-opacity:0.0121076"
|
||||||
|
d="M 154.60434,121.71446 A 58.623596,58.623596 0 0 1 95.980741,180.33806 58.623596,58.623596 0 0 1 37.357148,121.71446 58.623596,58.623596 0 0 1 95.980741,63.090865 58.623596,58.623596 0 0 1 154.60434,121.71446 Z" />
|
||||||
|
|
||||||
|
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:15.875px;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:0;stroke:none;stroke-width:2.083;stroke-opacity:0"
|
||||||
|
id="text1739"
|
||||||
|
transform="translate(-25.701646,-49.080477)"><textPath
|
||||||
|
xlink:href="#path234"
|
||||||
|
startOffset="50%"
|
||||||
|
id="textPath2569"
|
||||||
|
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15.875px;font-family:Vazirmatn;-inkscape-font-specification:Vazirmatn;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.083;stroke-opacity:0">
|
||||||
|
{{$slider->dataz[$data->area_name.'_'.$data->part.'_circle']}}
|
||||||
|
</textPath></text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<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-dark 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,30 @@
|
|||||||
|
import {tns} from "tiny-slider/src/tiny-slider";
|
||||||
|
|
||||||
|
var downtownSlider;
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.querySelectorAll('#downtown-slider')?.forEach(function (el) {
|
||||||
|
if (el.classList.contains('.tns-slider')) {
|
||||||
|
console.log('ignore');
|
||||||
|
return 'ignore';
|
||||||
|
}
|
||||||
|
downtownSlider = 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": "DowntownSlider",
|
||||||
|
"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,100 @@
|
|||||||
|
|
||||||
|
@keyframes rotate-z {
|
||||||
|
from {
|
||||||
|
transform: rotateZ(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.DowntownSlider {
|
||||||
|
position: relative;
|
||||||
|
height: 90vh;
|
||||||
|
|
||||||
|
|
||||||
|
// scss
|
||||||
|
&:before{
|
||||||
|
height: 7rem;
|
||||||
|
content: ' ';
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: var(--downtown-bg);
|
||||||
|
z-index: 9;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downtown-img{
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0;
|
||||||
|
img{
|
||||||
|
height: 90vh;
|
||||||
|
width: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
content: ' ';
|
||||||
|
background: var(--downtown-bg);
|
||||||
|
height: 3rem;
|
||||||
|
top: 5rem;
|
||||||
|
left: -4rem;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 7;
|
||||||
|
position: absolute;
|
||||||
|
transform: rotateZ(-4deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.downtown-content{
|
||||||
|
background: var(--downtown-bg);
|
||||||
|
padding-right: 6rem;
|
||||||
|
padding-left: 6rem;
|
||||||
|
align-items: end;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 10vh;
|
||||||
|
|
||||||
|
*{
|
||||||
|
color: var(--downtown-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
svg{
|
||||||
|
width: 20vh;
|
||||||
|
height: 20vh;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9;
|
||||||
|
top: 17.5vh;
|
||||||
|
right: -10.5vh;
|
||||||
|
animation: rotate-z 15s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
img{
|
||||||
|
width: 15vh;
|
||||||
|
height: 15vh;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
position: absolute;
|
||||||
|
right: -7.5vh;
|
||||||
|
top: 20vh;
|
||||||
|
border: 10px solid var(--downtown-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*-900px width*/
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.downtown-img{
|
||||||
|
&:after{
|
||||||
|
transform: rotateZ(-8deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.downtown-content{
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Loading…
Reference in New Issue