306 lines
19 KiB
PHP
306 lines
19 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Carousel';
|
|
$subTitle = 'Components / Carousel';
|
|
$script = '<script>
|
|
var rtlDirection = $("html").attr("dir") === "rtl";
|
|
|
|
// ================================ Default Slider Start ================================
|
|
$(".default-carousel").slick({
|
|
infinite: true,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: false,
|
|
dots: false,
|
|
infinite: true,
|
|
autoplay: false,
|
|
autoplaySpeed: 2000,
|
|
speed: 600,
|
|
rtl: rtlDirection
|
|
});
|
|
|
|
// Arrow Carousel
|
|
$(".arrow-carousel").slick({
|
|
infinite: true,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: true,
|
|
dots: false,
|
|
infinite: true,
|
|
autoplay: false,
|
|
autoplaySpeed: 2000,
|
|
speed: 600,
|
|
prevArrow: "<button type=\'button\' class=\'slick-prev\'><iconify-icon icon=\'ic:outline-keyboard-arrow-left\' class=\'menu-icon\'></iconify-icon></button>",
|
|
nextArrow: "<button type=\'button\' class=\'slick-next\'><iconify-icon icon=\'ic:outline-keyboard-arrow-right\' class=\'menu-icon\'></iconify-icon></button>",
|
|
rtl: rtlDirection
|
|
});
|
|
|
|
// Pagination Carousel
|
|
$(".pagination-carousel").slick({
|
|
infinite: true,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: false,
|
|
dots: true,
|
|
infinite: true,
|
|
autoplay: false,
|
|
autoplaySpeed: 2000,
|
|
speed: 600,
|
|
prevArrow: "<button type=\'button\' class=\'slick-prev\'><iconify-icon icon=\'ic:outline-keyboard-arrow-left\' class=\'menu-icon\'></iconify-icon></button>",
|
|
nextArrow: "<button type=\'button\' class=\'slick-next\'><iconify-icon icon=\'ic:outline-keyboard-arrow-right\' class=\'menu-icon\'></iconify-icon></button>",
|
|
rtl: rtlDirection
|
|
});
|
|
|
|
// Multiple Carousel
|
|
$(".multiple-carousel").slick({
|
|
infinite: true,
|
|
slidesToShow: 4,
|
|
slidesToScroll: 1,
|
|
arrows: false,
|
|
dots: true,
|
|
infinite: true,
|
|
autoplay: false,
|
|
autoplaySpeed: 2000,
|
|
speed: 600,
|
|
gap: 24,
|
|
prevArrow: "<button type=\'button\' class=\'slick-prev\'><iconify-icon icon=\'ic:outline-keyboard-arrow-left\' class=\'menu-icon\'></iconify-icon></button>",
|
|
nextArrow: "<button type=\'button\' class=\'slick-next\'><iconify-icon icon=\'ic:outline-keyboard-arrow-right\' class=\'menu-icon\'></iconify-icon></button>",
|
|
rtl: rtlDirection,
|
|
responsive: [
|
|
{
|
|
breakpoint: 1199,
|
|
settings: {
|
|
slidesToShow: 3,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 991,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 575,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
}
|
|
},
|
|
]
|
|
});
|
|
|
|
// Carousel with Progress Bar
|
|
jQuery(document).ready(function($) {
|
|
var sliderTimer = 5000;
|
|
var beforeEnd = 500;
|
|
var $imageSlider = $(".progress-carousel");
|
|
$imageSlider.slick({
|
|
autoplay: true,
|
|
autoplaySpeed: sliderTimer,
|
|
speed: 1000,
|
|
arrows: false,
|
|
dots: false,
|
|
adaptiveHeight: true,
|
|
pauseOnFocus: false,
|
|
pauseOnHover: false,
|
|
rtl: rtlDirection
|
|
});
|
|
|
|
function progressBar(){
|
|
$(".slider-progress").find("span").removeAttr("style");
|
|
$(".slider-progress").find("span").removeClass("active");
|
|
setTimeout(function(){
|
|
$(".slider-progress").find("span").css("transition-duration", (sliderTimer/1000)+"s").addClass("active");
|
|
}, 100);
|
|
}
|
|
progressBar();
|
|
$imageSlider.on("beforeChange", function(e, slick) {
|
|
progressBar();
|
|
});
|
|
$imageSlider.on("afterChange", function(e, slick, nextSlide) {
|
|
titleAnim(nextSlide);
|
|
});
|
|
|
|
// Title Animation JS
|
|
function titleAnim(ele){
|
|
$imageSlider.find(".slick-current").find("h1").addClass("show");
|
|
setTimeout(function(){
|
|
$imageSlider.find(".slick-current").find("h1").removeClass("show");
|
|
}, sliderTimer - beforeEnd);
|
|
}
|
|
titleAnim();
|
|
});
|
|
|
|
// ================================ Default Slider End ================================
|
|
</script>';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="row gy-4">
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Default Carousel</h6>
|
|
</div>
|
|
<div class="card-body p-0 default-carousel">
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img1.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide One</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img2.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Two</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img3.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Three</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Carousel With Arrows</h6>
|
|
</div>
|
|
<div class="card-body p-0 arrow-carousel">
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img2.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide One</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img4.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Two</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img3.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Three</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Carousel With Pagination</h6>
|
|
</div>
|
|
<div class="card-body p-0 pagination-carousel dots-style-circle dots-positioned">
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img3.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide One</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img4.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Two</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img1.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Three</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img2.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Four</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Carousel with progress</h6>
|
|
</div>
|
|
<div class="card-body p-0 position-relative">
|
|
<div class="p-0 progress-carousel dots-style-circle dots-positioned">
|
|
<div class="gradient-overlay bottom-0 start-0 h-100 position-relative">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img4.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide One</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img2.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Two</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img3.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Three</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
<div class="gradient-overlay bottom-0 start-0 h-100">
|
|
<img src="{{ asset('assets/images/carousel/carousel-img1.png') }}" alt="" class="w-100 h-100 object-fit-cover">
|
|
<div class="position-absolute start-50 translate-middle-x bottom-0 pb-64 z-1 text-center w-100 max-w-440-px">
|
|
<h5 class="card-title text-white text-lg mb-6">Carousel Slide Four</h5>
|
|
<p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="slider-progress">
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<div class="card p-0 overflow-hidden position-relative radius-12">
|
|
<div class="card-header py-16 px-24 bg-base border border-end-0 border-start-0 border-top-0">
|
|
<h6 class="text-lg mb-0">Multiple slides</h6>
|
|
</div>
|
|
<div class="card-body py-24 px-16 multiple-carousel dots-style-circle">
|
|
<div class="mx-8 mb-24">
|
|
<img src="{{ asset('assets/images/carousel/mutiple-carousel-img1.png') }}" class="w-100 h-100 object-fit-cover" alt="">
|
|
</div>
|
|
<div class="mx-8 mb-24">
|
|
<img src="{{ asset('assets/images/carousel/mutiple-carousel-img2.png') }}" class="w-100 h-100 object-fit-cover" alt="">
|
|
</div>
|
|
<div class="mx-8 mb-24">
|
|
<img src="{{ asset('assets/images/carousel/mutiple-carousel-img3.png') }}" class="w-100 h-100 object-fit-cover" alt="">
|
|
</div>
|
|
<div class="mx-8 mb-24">
|
|
<img src="{{ asset('assets/images/carousel/mutiple-carousel-img4.png') }}" class="w-100 h-100 object-fit-cover" alt="">
|
|
</div>
|
|
<div class="mx-8 mb-24">
|
|
<img src="{{ asset('assets/images/carousel/mutiple-carousel-img2.png') }}" class="w-100 h-100 object-fit-cover" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|