<?php



use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if (!defined('ABSPATH')) exit; // Exit if accessed directly


class Sliderfifteenteenkaveh extends Widget_Base{

  public function get_name(){
    return 'Sliderfifteenteenkaveh';
  }

  public function get_title(){
    return esc_html__( 'Fifteenth Style Slider', 'kavehTheme' );
  }

  public function get_icon(){
    return 'eicon-archive-posts';
  }

  public function get_categories(){
    return ['kavehelements'];
  }

  protected function register_controls(){
    
    $this->start_controls_section(
        'contentSliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Content', 'kavehTheme' ),
                  'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
        ]
      );

      $repeater = new \Elementor\Repeater();

      $repeater->add_control(
        'backSliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Select Your Image', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::MEDIA,
          'default' => [
            'url' => \Elementor\Utils::get_placeholder_image_src(),
          ],
        ]
      );
      $repeater->add_control(
        'linkSliderfifteenteenkaveh',
        [
            'label' => esc_html__( 'Slide Link', 'kavehTheme' ),
            'type' => \Elementor\Controls_Manager::TEXT,
            'default' => esc_html__( '#', 'kavehTheme' ),
    
        ]
    );
      $this->add_control(
        'slidesSliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Slides', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::REPEATER,
          'fields' => $repeater->get_controls(),
          ],
      );
      $this->add_control(
        'bulletsSliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Show Dots?', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SWITCHER,
          'yes' => esc_html__( 'Yes', 'kavehTheme' ),
          'no' => esc_html__( 'No', 'kavehTheme' ),
          'return_value' => 'yes',
          'default' => 'yes',
        ]
      );
      $this->end_controls_section();

      $this->start_controls_section(
        'style1_Sliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Style', 'kavehTheme' ),
          'tab' => \Elementor\Controls_Manager::TAB_STYLE,
        ]
      );
      $this->add_control(
        'heightbgSliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Height', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::SLIDER,
          'size_units' => [ 'px' ],
          'range' => [
            'px' => [
              'min' => 0,
              'max' => 2000,
              'step' => 5,
            ],
            'devices' => [ 'desktop', 'tablet', 'mobile' ],
          ],
          'selectors' => [
            '{{WRAPPER}} .carousel-home-two-item img' => 'height: {{SIZE}}{{UNIT}};',
          ],
        ]
      );

      $this->add_control(
        'borderradiusSliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Border Radius', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::DIMENSIONS,
          'size_units' => [ 'px' ],
          'selectors' => [
            '{{WRAPPER}} .carousel-home-two-item img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
          ],
        ]
      );

      $this->add_control(
        'bgdotscolorSliderfifteenteenkavehh',
        [
          'label' => esc_html__( 'Dots Background Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'condition' => [
            'bulletsSliderfifteenteenkaveh' => 'yes',
        ],
          'selectors' => [
            '{{WRAPPER}} .carousel-home-two .swiper-pagination::before' => 'background-color: {{VALUE}}',
          ],
        ]
      );
      $this->add_control(
        'dotscolorSliderfifteenteenkavehh',
        [
          'label' => esc_html__( 'Dots Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'condition' => [
            'bulletsSliderfifteenteenkaveh' => 'yes',
        ],
          'selectors' => [
            '{{WRAPPER}} .carousel-home-two .swiper-pagination-bullet' => 'background-color: {{VALUE}}',
          ],
        ]
      );
      $this->add_control(
        'borderdotscolorSliderfifteenteenkavehh',
        [
          'label' => esc_html__( 'Dots Border Background Color', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::COLOR,
          'condition' => [
            'bulletsSliderfifteenteenkaveh' => 'yes',
        ],
          'selectors' => [
            '{{WRAPPER}} .carousel-home-two .swiper-pagination::before' => 'border: 1px solid {{VALUE}}',
          ],
        ]
      );
      $this->add_control(
        'borderradiusdotsSliderfifteenteenkaveh',
        [
          'label' => esc_html__( 'Slider Border Radius', 'kavehTheme' ),
          'type' => \Elementor\Controls_Manager::DIMENSIONS,
          'size_units' => [ 'px' ],
          'selectors' => [
            '{{WRAPPER}} .carousel-home-two .swiper-pagination::before' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
          ],
        ]
      );
       $this->end_controls_section();

          
        }


  protected function render(){
    $settings = $this->get_settings_for_display();
    $clsid = $this->get_id();
    ?>
    <div class="hero-landing-one position-relative d-flex align-items-center justify-content-center">
      <div class="container">
        <!-- Start Swiper -->
        <div class="swiper swiper-hero-landing-one position-relative swiper-fade swiper-initialized swiper-horizontal swiper-pointer-events swiper-rtl swiper-watch-progress swiper-backface-hidden">
          <div class="swiper-wrapper" id="swiper-wrapper-4977770014ff6a97" aria-live="off" style="transition-duration: 0ms;"><div class="swiper-slide swiper-slide-duplicate swiper-slide-next swiper-slide-duplicate-prev" data-swiper-slide-index="4" role="group" aria-label="5 / 5" style="width: 1296px; opacity: 0; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
              <div class="hero-landing-one-item position-relative">
                <div class="image position-absolute" data-title="Buying Expering">
                  <img src="./assets/images/new-elements/gold.png" alt="gold" width="349" height="259">
                </div>
                <div class="content d-flex flex-column align-items-start w-100">
                  <div class="title overflow-hidden mb-2">
                    <h2 class="mb-0"> Buy Various Types of Rings </h2>
                  </div>
                  <div class="sub-title overflow-hidden">
                    <div> Jeweled </div>
                  </div>
                  <div class="btn-box overflow-hidden">
                    <a href="javascript:void(0)" class="btn-view d-block">
                      Start Now
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17">
                        <path fill="currentColor" d="m10.53 7.657 2.466-.232C13.55 7.425 14 7.906 14 8.5s-.45 1.075-1.003 1.075l-2.466-.232c-.434 0-.786-.377-.786-.843 0-.467.352-.843.786-.843Z" opacity=".4"></path>
                        <path fill="currentColor" d="M2.25 7.7c.039-.042.183-.217.318-.362.79-.909 2.85-2.395 3.927-2.85.164-.073.578-.227.8-.238.211 0 .413.052.606.155.24.145.433.372.539.64.068.187.174.744.174.755.105.609.163 1.6.163 2.695 0 1.043-.058 1.993-.144 2.613-.01.01-.116.703-.232.94-.211.434-.625.702-1.068.702h-.038c-.29-.01-.896-.28-.896-.289-1.02-.455-3.032-1.87-3.84-2.81 0 0-.229-.241-.328-.392A1.306 1.306 0 0 1 2 8.505c0-.3.087-.578.25-.806Z"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- Start Slide -->
            <div class="swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0" role="group" aria-label="1 / 5" style="width: 1296px; opacity: 0; transform: translate3d(1296px, 0px, 0px); transition-duration: 0ms;">
              <div class="hero-landing-one-item position-relative">
                <div class="image position-absolute" data-title="Buying Expering">
                  <img src="./assets/images/new-elements/gold.png" alt="gold" width="349" height="259">
                </div>
                <div class="content d-flex flex-column align-items-start w-100">
                  <div class="title overflow-hidden mb-2">
                    <h2 class="mb-0"> Buy Various Types of Rings </h2>
                  </div>
                  <div class="sub-title overflow-hidden">
                    <div> Jeweled </div>
                  </div>
                  <div class="btn-box overflow-hidden">
                    <a href="javascript:void(0)" class="btn-view d-block">
                      Start Now
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17">
                        <path fill="currentColor" d="m10.53 7.657 2.466-.232C13.55 7.425 14 7.906 14 8.5s-.45 1.075-1.003 1.075l-2.466-.232c-.434 0-.786-.377-.786-.843 0-.467.352-.843.786-.843Z" opacity=".4"></path>
                        <path fill="currentColor" d="M2.25 7.7c.039-.042.183-.217.318-.362.79-.909 2.85-2.395 3.927-2.85.164-.073.578-.227.8-.238.211 0 .413.052.606.155.24.145.433.372.539.64.068.187.174.744.174.755.105.609.163 1.6.163 2.695 0 1.043-.058 1.993-.144 2.613-.01.01-.116.703-.232.94-.211.434-.625.702-1.068.702h-.038c-.29-.01-.896-.28-.896-.289-1.02-.455-3.032-1.87-3.84-2.81 0 0-.229-.241-.328-.392A1.306 1.306 0 0 1 2 8.505c0-.3.087-.578.25-.806Z"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Slide -->
            <!-- Start Slide -->
            <div class="swiper-slide" data-swiper-slide-index="1" role="group" aria-label="2 / 5" style="width: 1296px; opacity: 0; transform: translate3d(2592px, 0px, 0px); transition-duration: 0ms;">
              <div class="hero-landing-one-item position-relative">
                <div class="image position-absolute" data-title="Buying Expering">
                  <img src="./assets/images/new-elements/gold.png" alt="gold" width="349" height="259">
                </div>
                <div class="content d-flex flex-column align-items-start w-100">
                  <div class="title overflow-hidden mb-2">
                    <h2 class="mb-0"> Buy Various Types of Rings </h2>
                  </div>
                  <div class="sub-title overflow-hidden">
                    <div> Jeweled </div>
                  </div>
                  <div class="btn-box overflow-hidden">
                    <a href="javascript:void(0)" class="btn-view d-block">
                      Start Now
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17">
                        <path fill="currentColor" d="m10.53 7.657 2.466-.232C13.55 7.425 14 7.906 14 8.5s-.45 1.075-1.003 1.075l-2.466-.232c-.434 0-.786-.377-.786-.843 0-.467.352-.843.786-.843Z" opacity=".4"></path>
                        <path fill="currentColor" d="M2.25 7.7c.039-.042.183-.217.318-.362.79-.909 2.85-2.395 3.927-2.85.164-.073.578-.227.8-.238.211 0 .413.052.606.155.24.145.433.372.539.64.068.187.174.744.174.755.105.609.163 1.6.163 2.695 0 1.043-.058 1.993-.144 2.613-.01.01-.116.703-.232.94-.211.434-.625.702-1.068.702h-.038c-.29-.01-.896-.28-.896-.289-1.02-.455-3.032-1.87-3.84-2.81 0 0-.229-.241-.328-.392A1.306 1.306 0 0 1 2 8.505c0-.3.087-.578.25-.806Z"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Slide -->
            <!-- Start Slide -->
            <div class="swiper-slide" data-swiper-slide-index="2" role="group" aria-label="3 / 5" style="width: 1296px; opacity: 0; transform: translate3d(3888px, 0px, 0px); transition-duration: 0ms;">
              <div class="hero-landing-one-item position-relative">
                <div class="image position-absolute" data-title="Buying Expering">
                  <img src="./assets/images/new-elements/gold.png" alt="gold" width="349" height="259">
                </div>
                <div class="content d-flex flex-column align-items-start w-100">
                  <div class="title overflow-hidden mb-2">
                    <h2 class="mb-0"> Buy Various Types of Rings </h2>
                  </div>
                  <div class="sub-title overflow-hidden">
                    <div> Jeweled </div>
                  </div>
                  <div class="btn-box overflow-hidden">
                    <a href="javascript:void(0)" class="btn-view d-block">
                      Start Now
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17">
                        <path fill="currentColor" d="m10.53 7.657 2.466-.232C13.55 7.425 14 7.906 14 8.5s-.45 1.075-1.003 1.075l-2.466-.232c-.434 0-.786-.377-.786-.843 0-.467.352-.843.786-.843Z" opacity=".4"></path>
                        <path fill="currentColor" d="M2.25 7.7c.039-.042.183-.217.318-.362.79-.909 2.85-2.395 3.927-2.85.164-.073.578-.227.8-.238.211 0 .413.052.606.155.24.145.433.372.539.64.068.187.174.744.174.755.105.609.163 1.6.163 2.695 0 1.043-.058 1.993-.144 2.613-.01.01-.116.703-.232.94-.211.434-.625.702-1.068.702h-.038c-.29-.01-.896-.28-.896-.289-1.02-.455-3.032-1.87-3.84-2.81 0 0-.229-.241-.328-.392A1.306 1.306 0 0 1 2 8.505c0-.3.087-.578.25-.806Z"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Slide -->
            <!-- Start Slide -->
            <div class="swiper-slide" data-swiper-slide-index="3" role="group" aria-label="4 / 5" style="width: 1296px; opacity: 0; transform: translate3d(5184px, 0px, 0px); transition-duration: 0ms;">
              <div class="hero-landing-one-item position-relative">
                <div class="image position-absolute" data-title="Buying Expering">
                  <img src="./assets/images/new-elements/gold.png" alt="gold" width="349" height="259">
                </div>
                <div class="content d-flex flex-column align-items-start w-100">
                  <div class="title overflow-hidden mb-2">
                    <h2 class="mb-0"> Buy Various Types of Rings </h2>
                  </div>
                  <div class="sub-title overflow-hidden">
                    <div> Jeweled </div>
                  </div>
                  <div class="btn-box overflow-hidden">
                    <a href="javascript:void(0)" class="btn-view d-block">
                      Start Now
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17">
                        <path fill="currentColor" d="m10.53 7.657 2.466-.232C13.55 7.425 14 7.906 14 8.5s-.45 1.075-1.003 1.075l-2.466-.232c-.434 0-.786-.377-.786-.843 0-.467.352-.843.786-.843Z" opacity=".4"></path>
                        <path fill="currentColor" d="M2.25 7.7c.039-.042.183-.217.318-.362.79-.909 2.85-2.395 3.927-2.85.164-.073.578-.227.8-.238.211 0 .413.052.606.155.24.145.433.372.539.64.068.187.174.744.174.755.105.609.163 1.6.163 2.695 0 1.043-.058 1.993-.144 2.613-.01.01-.116.703-.232.94-.211.434-.625.702-1.068.702h-.038c-.29-.01-.896-.28-.896-.289-1.02-.455-3.032-1.87-3.84-2.81 0 0-.229-.241-.328-.392A1.306 1.306 0 0 1 2 8.505c0-.3.087-.578.25-.806Z"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Slide -->
            <!-- Start Slide -->
            <div class="swiper-slide swiper-slide-prev swiper-slide-duplicate-next" data-swiper-slide-index="4" role="group" aria-label="5 / 5" style="width: 1296px; opacity: 0; transform: translate3d(6480px, 0px, 0px); transition-duration: 0ms;">
              <div class="hero-landing-one-item position-relative">
                <div class="image position-absolute" data-title="Buying Expering">
                  <img src="./assets/images/new-elements/gold.png" alt="gold" width="349" height="259">
                </div>
                <div class="content d-flex flex-column align-items-start w-100">
                  <div class="title overflow-hidden mb-2">
                    <h2 class="mb-0"> Buy Various Types of Rings </h2>
                  </div>
                  <div class="sub-title overflow-hidden">
                    <div> Jeweled </div>
                  </div>
                  <div class="btn-box overflow-hidden">
                    <a href="javascript:void(0)" class="btn-view d-block">
                      Start Now
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17">
                        <path fill="currentColor" d="m10.53 7.657 2.466-.232C13.55 7.425 14 7.906 14 8.5s-.45 1.075-1.003 1.075l-2.466-.232c-.434 0-.786-.377-.786-.843 0-.467.352-.843.786-.843Z" opacity=".4"></path>
                        <path fill="currentColor" d="M2.25 7.7c.039-.042.183-.217.318-.362.79-.909 2.85-2.395 3.927-2.85.164-.073.578-.227.8-.238.211 0 .413.052.606.155.24.145.433.372.539.64.068.187.174.744.174.755.105.609.163 1.6.163 2.695 0 1.043-.058 1.993-.144 2.613-.01.01-.116.703-.232.94-.211.434-.625.702-1.068.702h-.038c-.29-.01-.896-.28-.896-.289-1.02-.455-3.032-1.87-3.84-2.81 0 0-.229-.241-.328-.392A1.306 1.306 0 0 1 2 8.505c0-.3.087-.578.25-.806Z"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <!-- End Slide -->
          <div class="swiper-slide swiper-slide-duplicate swiper-slide-visible swiper-slide-active" data-swiper-slide-index="0" role="group" aria-label="1 / 5" style="width: 1296px; opacity: 1; transform: translate3d(7776px, 0px, 0px); transition-duration: 0ms;">
              <div class="hero-landing-one-item position-relative">
                <div class="image position-absolute" data-title="Buying Expering">
                  <img src="./assets/images/new-elements/gold.png" alt="gold" width="349" height="259">
                </div>
                <div class="content d-flex flex-column align-items-start w-100">
                  <div class="title overflow-hidden mb-2">
                    <h2 class="mb-0"> Buy Various Types of Rings </h2>
                  </div>
                  <div class="sub-title overflow-hidden">
                    <div> Jeweled </div>
                  </div>
                  <div class="btn-box overflow-hidden">
                    <a href="javascript:void(0)" class="btn-view d-block">
                      Start Now
                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none" viewBox="0 0 16 17">
                        <path fill="currentColor" d="m10.53 7.657 2.466-.232C13.55 7.425 14 7.906 14 8.5s-.45 1.075-1.003 1.075l-2.466-.232c-.434 0-.786-.377-.786-.843 0-.467.352-.843.786-.843Z" opacity=".4"></path>
                        <path fill="currentColor" d="M2.25 7.7c.039-.042.183-.217.318-.362.79-.909 2.85-2.395 3.927-2.85.164-.073.578-.227.8-.238.211 0 .413.052.606.155.24.145.433.372.539.64.068.187.174.744.174.755.105.609.163 1.6.163 2.695 0 1.043-.058 1.993-.144 2.613-.01.01-.116.703-.232.94-.211.434-.625.702-1.068.702h-.038c-.29-.01-.896-.28-.896-.289-1.02-.455-3.032-1.87-3.84-2.81 0 0-.229-.241-.328-.392A1.306 1.306 0 0 1 2 8.505c0-.3.087-.578.25-.806Z"></path>
                      </svg>
                    </a>
                  </div>
                </div>
              </div>
            </div></div>
          <div class="swiper-controller d-flex align-items-center justify-content-center position-absolute bottom-0 end-50">
            <div class="swiper-button-prev position-relative top-0 start-0 bottom-0 end-0 m-0 w-auto h-auto" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-4977770014ff6a97">
              <svg xmlns="http://www.w3.org/2000/svg" width="25" height="26" fill="none" viewBox="0 0 25 26">
                <path fill="currentColor" d="m15.948 11.597 3.736-.351c.838 0 1.518.729 1.518 1.628 0 .9-.68 1.629-1.518 1.629l-3.736-.351c-.657 0-1.19-.572-1.19-1.278 0-.707.533-1.277 1.19-1.277Z" opacity=".4"></path>
                <path fill="currentColor" d="M3.408 11.662c.059-.063.277-.328.482-.547 1.195-1.377 4.315-3.628 5.948-4.317.248-.11.874-.344 1.21-.36.32 0 .627.078.92.234.364.219.655.564.815.97.103.282.264 1.127.264 1.142.16.923.246 2.424.246 4.083 0 1.579-.087 3.018-.218 3.957-.014.016-.175 1.065-.35 1.424-.32.657-.947 1.063-1.618 1.063h-.058c-.438-.015-1.357-.423-1.357-.437-1.545-.689-4.592-2.831-5.817-4.255 0 0-.346-.367-.495-.595a1.978 1.978 0 0 1-.35-1.141c0-.454.13-.876.378-1.221Z"></path>
              </svg>
            </div>
            <div class="swiper-pagination position-relative top-0 start-0 bottom-0 end-0 m-0 w-auto h-auto d-flex align-items-center justify-content-center swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span></div>
            <div class="swiper-button-next position-relative top-0 start-0 bottom-0 end-0 m-0 w-auto h-auto" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-4977770014ff6a97">
              <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none" viewBox="0 0 26 26">
                <path fill="currentColor" d="M9.135 11.597 5.4 11.246c-.838 0-1.518.729-1.518 1.628 0 .9.68 1.629 1.518 1.629l3.735-.351c.658 0 1.191-.572 1.191-1.278 0-.707-.533-1.277-1.19-1.277Z" opacity=".4"></path>
                <path fill="currentColor" d="M21.676 11.662c-.059-.063-.277-.328-.482-.547C20 9.738 16.88 7.487 15.246 6.798c-.248-.11-.874-.344-1.21-.36a1.93 1.93 0 0 0-.92.234 1.986 1.986 0 0 0-.815.97c-.103.282-.264 1.127-.264 1.142-.16.923-.246 2.424-.246 4.083 0 1.579.087 3.018.218 3.957.014.016.175 1.065.35 1.424.32.657.947 1.063 1.618 1.063h.059c.437-.015 1.356-.423 1.356-.437 1.545-.689 4.592-2.831 5.817-4.255 0 0 .346-.367.495-.595.234-.328.35-.735.35-1.141 0-.454-.13-.876-.378-1.221Z"></path>
              </svg>
            </div>
          </div>
        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
        <!-- End Swiper -->
      </div>
    </div>
<style>
.carousel-home-two-item img {
  object-fit: cover !important;
}
</style>
    <script>
       function init<?php echo $clsid; ?>() {
// Carousel Home Two
new Swiper(".swiper-carousel-home-two", {
  slidesPerView: 1,
  spaceBetween: 0,
  pagination: {
    el: ".swiper-pagination",
    type: "bullets",
    clickable: true,
  },
  autoplay: {
    delay: 3000,
  },
  effect: "fade",
  fadeEffect: {
    crossFade: true,
  },
  loop: true,
});
}
      if (window.Swiper) {
    // Swiper library already loaded, initialize Swiper instance
    init<?php echo $clsid; ?>();
  } else {
    // Swiper library not yet loaded, wait for it to load
    window.addEventListener("load", function() {
      init<?php echo $clsid; ?>();
    });
  }
  
    </script>

    <?php
  }


}
