##### Advance Components

###### Radio

Switch Active
Switch Active
Switch Active
Switch Active

        <div class="form-switch switch-primary d-flex align-items-center gap-3">
          <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
          <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1">Switch Active</label>
        </div>
        <div class="form-switch switch-purple d-flex align-items-center gap-3">
          <input class="form-check-input" type="checkbox" role="switch" id="switch2" checked>
          <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch2">Switch Active</label>
        </div>
        <div class="form-switch switch-success d-flex align-items-center gap-3">
          <input class="form-check-input" type="checkbox" role="switch" id="switch3" checked>
          <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch3">Switch Active</label>
        </div>
        <div class="form-switch switch-warning d-flex align-items-center gap-3">
          <input class="form-check-input" type="checkbox" role="switch" id="switch4" checked>
          <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch4">Switch Active</label>
        </div>

###### Carousel With Arrows

##### Carousel Slide One

User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when

##### Carousel Slide Two

User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when

##### Carousel Slide Three

User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when

      <div class="arrow-carousel">
        <div class="gradient-overlay bottom-0 start-0 h-100">
            <img src="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="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="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>

JavaScript

      // Arrow Carousel
      $('.arrow-carousel').slick({
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          arrows: true,
          dots: false,
          infinite: true,
          autoplay: false,
          autoplaySpeed: 2000,
          speed: 600,
          prevArrow: '',
          nextArrow: '',
      });

###### Videos

      <div class="position-relative">
        <img src="assets/images/videos/video-img1.png" class="w-100 h-100 object-fit-cover radius-8" alt="">
        <a href="https://www.youtube.com/watch?v=Vr9WoWXkKeE" class="magnific-video bordered-shadow w-56-px h-56-px bg-white rounded-circle d-flex justify-content-center align-items-center position-absolute start-50 top-50 translate-middle z-1">
          <iconify-icon icon="ion:play" class="text-primary-600 text-xxl"></iconify-icon>
        </a>
      </div>

JavaScript

      // ========================= magnific Popup Icon Js Start =====================
      $('.magnific-video').magnificPopup({
        type:'iframe'
      });
      // ========================= magnific Popup Icon Js End =====================

###### Image Upload

Upload

      <div class="upload-image-wrapper d-flex align-items-center gap-3 flex-wrap">
        <div class="uploaded-imgs-container d-flex gap-3 flex-wrap"></div>
        <label class="upload-file-multiple h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1" for="upload-file-multiple">
          <iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
          <span class="fw-semibold text-secondary-light">Upload</span>
          <input id="upload-file-multiple" type="file" hidden multiple/>
        </label>
      </div>

JavaScript

        // ================================================ Upload Multiple image js Start here ================================================
        const fileInputMultiple = document.getElementById("upload-file-multiple");
        const uploadedImgsContainer = document.querySelector(".uploaded-imgs-container");

        fileInputMultiple.addEventListener("change", (e) => {
          const files = e.target.files;

          Array.from(files).forEach(file => {
            const src = URL.createObjectURL(file);

            const imgContainer = document.createElement('div');
            imgContainer.classList.add('position-relative', 'h-120-px', 'w-120-px', 'border', 'input-form-light', 'radius-8', 'overflow-hidden', 'border-dashed', 'bg-neutral-50');

            const removeButton = document.createElement('button');
            removeButton.type = 'button';
            removeButton.classList.add('uploaded-img__remove', 'position-absolute', 'top-0', 'end-0', 'z-1', 'text-2xxl', 'line-height-1', 'me-8', 'mt-8', 'd-flex');
            removeButton.innerHTML = '';

            const imagePreview = document.createElement('img');
            imagePreview.classList.add('w-100', 'h-100', 'object-fit-cover');
            imagePreview.src = src;

            imgContainer.appendChild(removeButton);
            imgContainer.appendChild(imagePreview);
            uploadedImgsContainer.appendChild(imgContainer);

            removeButton.addEventListener('click', () => {
              URL.revokeObjectURL(src);
              imgContainer.remove();
            });
          });

          // Clear the file input so the same file(s) can be uploaded again if needed
          fileInputMultiple.value = '';
        });
        // ================================================ Upload Multiple image js End here  ================================================