| Server IP : 103.175.220.74 / Your IP : 216.73.216.151 Web Server : nginx/1.18.0 System : Linux p-floo-wj1-db 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 User : deploy ( 1003) PHP Version : 7.4.3-4ubuntu2.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/app/bronsoncandy.com/source/ |
Upload File : |
@extends('_layouts.main')
@section('main')
<div class="-mt-12 md:-mt-[103px]">
<img class="relative z-[2]" src="{{ asset('img/benner-header-admedia.png') }}" alt="">
</div>
<div class="mx-[12%]">
<h1 class="text-[30px] md:text-[60px] lg:text-[70px] text-center text-[#62408F] font-medium mb-[30px]">Video Commercial</h1>
<!-- Carousel Container -->
<div id="main-slider" class="splide mb-[2rem]">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=xyPm8ONe1Cg">
<img src="https://img.youtube.com/vi/xyPm8ONe1Cg/maxresdefault.jpg" alt="Thumbnail 1">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=y_qdsdzTb8k">
<img src="https://img.youtube.com/vi/y_qdsdzTb8k/sddefault.jpg" alt="Thumbnail 2">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=zdi7Q3GXA_o">
<img src="https://img.youtube.com/vi/zdi7Q3GXA_o/maxresdefault.jpg" alt="Thumbnail 3">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=W9KpbxOUYm0">
<img src="https://img.youtube.com/vi/W9KpbxOUYm0/maxresdefault.jpg" alt="Thumbnail 4">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=5KVlf_HTyrk">
<img src="https://img.youtube.com/vi/5KVlf_HTyrk/maxresdefault.jpg" alt="Thumbnail 5">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=FBDGF35DEXU">
<img src="https://img.youtube.com/vi/FBDGF35DEXU/sddefault.jpg" alt="Thumbnail 6">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=CQS8wWvDa9o">
<img src="https://img.youtube.com/vi/CQS8wWvDa9o/sddefault.jpg" alt="Thumbnail 7">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=sAuYOZvJe1Y">
<img src="https://img.youtube.com/vi/sAuYOZvJe1Y/sddefault.jpg" alt="Thumbnail 8">
</li>
<li class="splide__slide" data-splide-youtube="https://www.youtube.com/watch?v=bg5Iw2gZ6P8">
<img src="https://img.youtube.com/vi/bg5Iw2gZ6P8/sddefault.jpg" alt="Thumbnail 9">
</li>
</ul>
</div>
</div>
<!-- Thumbnail Slider -->
<div id="thumbnail-slider" class="splide mt-3 md:mt-3 lg:mt-2 mb-[10rem]">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="https://img.youtube.com/vi/xyPm8ONe1Cg/maxresdefault.jpg" alt="Thumbnail 1"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/y_qdsdzTb8k/sddefault.jpg" alt="Thumbnail 2"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/zdi7Q3GXA_o/maxresdefault.jpg" alt="Thumbnail 3"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/W9KpbxOUYm0/maxresdefault.jpg" alt="Thumbnail 4"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/5KVlf_HTyrk/maxresdefault.jpg" alt="Thumbnail 5"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/FBDGF35DEXU/sddefault.jpg" alt="Thumbnail 6"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/CQS8wWvDa9o/sddefault.jpg" alt="Thumbnail 7"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/sAuYOZvJe1Y/sddefault.jpg" alt="Thumbnail 8"></li>
<li class="splide__slide"><img src="https://img.youtube.com/vi/bg5Iw2gZ6P8/sddefault.jpg" alt="Thumbnail 9"></li>
</ul>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var main = new Splide('#main-slider', {
type: 'loop',
pagination: false,
arrows: true,
cover: true,
autoHeight: true,
heightRatio: 0.5,
classes: {
prev: 'splide__arrow--prev custom__splide__arrow--prev',
next: 'splide__arrow--next custom__splide__arrow--next',
},
});
var thumbnails = new Splide('#thumbnail-slider', {
type: 'loop',
rewind: true,
perPage: 4,
heightRatio: 0.13,
gap: '35px',
isNavigation: false,
focus: 'center',
pagination: false,
cover: true,
classes: {
prev: 'splide__arrow--prev hidden',
next: 'splide__arrow--next hidden',
}
});
main.sync(thumbnails);
main.mount(window.splide.Extensions);
thumbnails.mount();
});
</script>
</div>
@endsection