FunnelsWave Logo
Free Consultation

Video Couresol for Funnelish Funnel Builder

Video Carousel for Funnelish Mobile Version

funnelish funnel builder mobile carousel 
				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Carousel</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <style>
        .swiper-container {
            width: 100%;
            padding: 20px;
        }

        .bushra-video-slide {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
        }

        .bushra-video-container {
            position: relative;
            width: 100%;
            padding-top: 56.25%;
            overflow: hidden;
        }

        .bushra-video-thumbnail {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 2;
        }

        video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .bushra-play-pause-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            background: rgba(0, 0, 0, 0.6);
            border: none;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bushra-carousel-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 20px;
            width: 100%;
        }

        .bushra-swiper-button-prev,
        .bushra-swiper-button-next {
            position: static !important;
            width: 30px !important;
            height: 30px !important;
            margin: 0 !important;
            background: #333;
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .swiper-pagination {
            position: static !important;
            width: auto !important;
        }

        .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            margin: 0 4px;
            background: #333;
            opacity: 0.5;
        }

        .swiper-pagination-bullet-active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- Video Slide 1 -->
            <div class="swiper-slide bushra-video-slide">
                <div class="bushra-video-container">
                    <img decoding="async" src="https://picsum.photos/800/450" class="bushra-video-thumbnail">
                    <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
                    <button class="bushra-play-pause-btn">
                        <i class="bi bi-play-fill"></i>
                    </button>
                </div>
            </div>

            <!-- Video Slide 2 -->
            <div class="swiper-slide bushra-video-slide">
                <div class="bushra-video-container">
                    <img decoding="async" src="https://picsum.photos/800/451" class="bushra-video-thumbnail">
                    <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
                    <button class="bushra-play-pause-btn">
                        <i class="bi bi-play-fill"></i>
                    </button>
                </div>
            </div>

            <!-- Video Slide 3 -->
            <div class="swiper-slide bushra-video-slide">
                <div class="bushra-video-container">
                    <img decoding="async" src="https://picsum.photos/800/452" class="bushra-video-thumbnail">
                    <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
                    <button class="bushra-play-pause-btn">
                        <i class="bi bi-play-fill"></i>
                    </button>
                </div>
            </div>

            <!-- Video Slide 4 -->
            <div class="swiper-slide bushra-video-slide">
                <div class="bushra-video-container">
                    <img decoding="async" src="https://picsum.photos/800/453" class="bushra-video-thumbnail">
                    <video src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
                    <button class="bushra-play-pause-btn">
                        <i class="bi bi-play-fill"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Custom Navigation -->
        <div class="bushra-carousel-nav">
            <div class="bushra-swiper-button-prev">
                <i class="bi bi-chevron-left"></i>
            </div>
            <div class="swiper-pagination"></div>
            <div class="bushra-swiper-button-next">
                <i class="bi bi-chevron-right"></i>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper(".swiper-container", {
            cssMode: true,
            loop: true,
            slidesPerView: 3,
            spaceBetween: 10,
            breakpoints: {
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 16,
                },
                767: {
                    slidesPerView: 2,
                    spaceBetween: 16,
                },
                0: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
            },
            navigation: {
                nextEl: ".bushra-swiper-button-next",
                prevEl: ".bushra-swiper-button-prev",
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            on: {
                slideChangeTransitionStart: function () {
                    document.querySelectorAll('video').forEach(video => {
                        video.pause();
                        video.closest('.bushra-video-slide').querySelector('.bushra-play-pause-btn i').classList.remove('bi-pause-fill');
                        video.closest('.bushra-video-slide').querySelector('.bushra-play-pause-btn i').classList.add('bi-play-fill');
                        video.closest('.bushra-video-container').querySelector('.bushra-video-thumbnail').style.display = 'block';
                    });
                }
            }
        });

        // Video controls
        document.querySelectorAll('.bushra-video-slide').forEach(slide => {
            const videoContainer = slide.querySelector('.bushra-video-container');
            const thumbnail = videoContainer.querySelector('.bushra-video-thumbnail');
            const video = videoContainer.querySelector('video');
            const playPauseBtn = videoContainer.querySelector('.bushra-play-pause-btn');
            const playPauseIcon = playPauseBtn.querySelector('i');

            video.addEventListener('click', (e) => {
                e.preventDefault();
            });

            playPauseBtn.addEventListener('click', () => {
                if (video.paused) {
                    video.play();
                    playPauseIcon.classList.remove('bi-play-fill');
                    playPauseIcon.classList.add('bi-pause-fill');
                    thumbnail.style.display = 'none';
                } else {
                    video.pause();
                    playPauseIcon.classList.remove('bi-pause-fill');
                    playPauseIcon.classList.add('bi-play-fill');
                    thumbnail.style.display = 'block';
                }
            });
        });
    </script>
</body>
</html>

Carousel V2

				
					    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />

    <style>
      .bushra-sec-one-inner {
        width: 95%;
        margin: 0 auto;
      }

      .bushra-video-container {
        position: relative;
        width: 100%;
        height: auto;
        overflow: hidden;
      }

      .bushra-video-thumbnail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
        cursor: pointer;
      }

      .bushra-custom-video-controls {
        position: absolute;
        bottom: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
        z-index: 10;
      }

      .bushra-play-pause-btn {
        background: rgba(0, 0, 0, 0.5);
        border: none;
        color: white;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s ease;
      }

      .bushra-play-pause-btn:hover {
        background: rgba(0, 0, 0, 0.7);
      }

      .bushra-play-pause-btn i {
        font-size: 30px;
        margin-left: 5px;
      }

      .bushra-video-slide video {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      .bushra-frst-card {
        border: none !important;
      }

      .bushra-swiper-button-next,
      .bushra-swiper-button-prev {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #000 !important;
        transition: background-color 0.3s ease !important;
        z-index: 15 !important;
      }

      .bushra-swiper-button-next:hover,
      .bushra-swiper-button-prev:hover {
        background-color: rgba(255, 255, 255, 0.7) !important;
      }

      .bushra-swiper-button-next {
        right: 20px !important;
      }

      .bushra-swiper-button-prev {
        left: 20px !important;
      }

      .bushra-swiper-button-next::after,
      .bushra-swiper-button-prev::after {
        content: '' !important;
        font-size: 0 !important;
      }

      .bushra-swiper-button-next i,
      .bushra-swiper-button-prev i {
        font-size: 20px !important;
        font-weight: bold !important;
      }
    </style>
  </head>

  <body>
    <div class="bushra-sec-one">
      <div class="bushra-containers">
        <div class="bushra-sec-one-inner">
          <div class="swiper bushra-mySwiper1">
            <div class="swiper-wrapper">
              <div class="swiper-slide bushra-video-slide">
                <div class="card bushra-frst-card bushra-video-container">
                  <img decoding="async" src="https://img.funnelish.com/10297/706605/1738616778-vid-1.jpg" 
                       alt="Video Thumbnail" 
                       class="bushra-video-thumbnail"
                       data-video-src="https://cdn.shopify.com/videos/c/o/v/94f40f15462c42ce98b284ee0131f327.mp4">
                  <video playsinline webkit-playsinline>
                    <source src="https://cdn.shopify.com/videos/c/o/v/94f40f15462c42ce98b284ee0131f327.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                  </video>
                  <div class="bushra-custom-video-controls">
                    <button class="bushra-play-pause-btn">
                      <i class="bi bi-play-fill"></i>
                    </button>
                  </div>
                </div>
              </div>
              <div class="swiper-slide bushra-video-slide">
                <div class="card bushra-frst-card bushra-video-container">
                  <img decoding="async" src="https://img.funnelish.com/10297/706605/1738616802-vid-2.jpg" 
                       alt="Video Thumbnail" 
                       class="bushra-video-thumbnail"
                       data-video-src="https://cdn.shopify.com/videos/c/o/v/9416c063d8c94c0b8ce10517bed00fd6.mp4">
                  <video playsinline webkit-playsinline>
                    <source src="https://cdn.shopify.com/videos/c/o/v/9416c063d8c94c0b8ce10517bed00fd6.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                  </video>
                  <div class="bushra-custom-video-controls">
                    <button class="bushra-play-pause-btn">
                      <i class="bi bi-play-fill"></i>
                    </button>
                  </div>
                </div>
              </div>
              <div class="swiper-slide bushra-video-slide">
                <div class="card bushra-frst-card bushra-video-container">
                  <img decoding="async" src="https://img.funnelish.com/10297/706605/1738616816-vid-3.jpg" 
                       alt="Video Thumbnail" 
                       class="bushra-video-thumbnail"
                       data-video-src="https://cdn.shopify.com/videos/c/o/v/ca7a53b2deb14420a7cac3ed31c60fda.mp4">
                  <video playsinline webkit-playsinline>
                    <source src="https://cdn.shopify.com/videos/c/o/v/ca7a53b2deb14420a7cac3ed31c60fda.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                  </video>
                  <div class="bushra-custom-video-controls">
                    <button class="bushra-play-pause-btn">
                      <i class="bi bi-play-fill"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="bushra-swiper-button-next">
              <i class="bi bi-chevron-right"></i>
            </div>
            <div class="bushra-swiper-button-prev">
              <i class="bi bi-chevron-left"></i>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // Swiper initialization
      var swiper = new Swiper(".bushra-mySwiper1", {
        cssMode: true,
        loop: true,
        slidesPerView: 3,
        spaceBetween: 10,
        breakpoints: {
          1024: {
            slidesPerView: 3,
            spaceBetween: 16,
          },
          767: {
            slidesPerView: 2,
            spaceBetween: 16,
          },
          0: {
            slidesPerView: 1,
            spaceBetween: 30,
          },
        },
        navigation: {
          nextEl: ".bushra-swiper-button-next",
          prevEl: ".bushra-swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        on: {
          slideChangeTransitionStart: function () {
            // Pause all videos when sliding
            document.querySelectorAll('video').forEach(video => {
              video.pause();
              video.closest('.bushra-video-slide').querySelector('.bushra-play-pause-btn i').classList.remove('bi-pause-fill');
              video.closest('.bushra-video-slide').querySelector('.bushra-play-pause-btn i').classList.add('bi-play-fill');
              // Show thumbnail again
              video.closest('.bushra-video-container').querySelector('.bushra-video-thumbnail').style.display = 'block';
            });
          }
        }
      });

      // Custom video controls
      document.querySelectorAll('.bushra-video-slide').forEach(slide => {
        const videoContainer = slide.querySelector('.bushra-video-container');
        const thumbnail = videoContainer.querySelector('.bushra-video-thumbnail');
        const video = videoContainer.querySelector('video');
        const playPauseBtn = videoContainer.querySelector('.bushra-play-pause-btn');
        const playPauseIcon = playPauseBtn.querySelector('i');

        // Prevent default video interactions
        video.addEventListener('click', (e) => {
          e.preventDefault();
          return false;
        });

        // Thumbnail click handler
        thumbnail.addEventListener('click', () => {
          // Hide thumbnail
          thumbnail.style.display = 'none';
          
          // Play video
          video.play();
          playPauseIcon.classList.remove('bi-play-fill');
          playPauseIcon.classList.add('bi-pause-fill');
        });

        // Play/Pause button handler
        playPauseBtn.addEventListener('click', () => {
          // Hide thumbnail if visible
          thumbnail.style.display = 'none';

          if (video.paused) {
            video.play();
            playPauseIcon.classList.remove('bi-play-fill');
            playPauseIcon.classList.add('bi-pause-fill');
          } else {
            video.pause();
            playPauseIcon.classList.remove('bi-pause-fill');
            playPauseIcon.classList.add('bi-play-fill');
          }
        });

        // Reset video controls when video ends
        video.addEventListener('ended', () => {
          playPauseIcon.classList.remove('bi-pause-fill');
          playPauseIcon.classList.add('bi-play-fill');
          
          // Show thumbnail again
          thumbnail.style.display = 'block';
        });
      });
    </script>

Share This Blog

Video Couresol for Funnelish Funnel Builder

Best Sales Funnel Builder in 2025

Best Sales Funnel Builder in 2025: The Ultimate Guide to Skyrocket Your Business

Top 10 Ecommerce Funnel Builders

Top 10 Ecommerce Funnel Builders That Actually Work in 2025 (Both Free and Paid)

B2B Sales Funnel

B2B Sales Funnel Mastery: Expert Techniques That Actually Work (2025 Edition)

Done for you sales funnels

The Ultimate Guide to Done for You Sales Funnels: Boost Your Business with Automated Success

top of funnel vs bottom of funnel

Top of Funnel vs Bottom of Funnel: Understanding the Key Differences in Marketing Strategy

More To Explore

FW logo
Your digital ally for success. Tailored sales funnels for online dominance. Personalized pathways to make your brand stand out. Partner with us to make your vision our mission.
Facebook-f Linkedin

Get Started

About

  • Our Story
  • Portfolio
  • Blogs
  • Contact

What's Hot

  • Landing Page Design
  • Online Course Funnel
  • e-Commerce Funnel
  • Webinar Funnel