Slider - incorporating a heading onto a video with HTML styling

Is there a way to display a title on a slider when one of the slides contains a video?

Here is an example code snippet:

  <!-- Swiper-->
  <div data-height="100vh" data-min-height="480px" data-slide-effect="fade" class="swiper-container swiper-slider">
    <div class="swiper-wrapper text-center">
      <div data-slide-bg="" class="swiper-slide">
        <video class="video-relative">
          <div id="overlay" class="swiper-slide-caption">
            <div class="shell">
              <h1>ProPlast</h1>
              <h6>Professional models</h6>
              <div class="button-group"><a href="#" class="btn btn-default btn-sm">More</a><a href="#" class="btn btn-primary btn-md">Contact</a></div>
            </div>
          </div>
          <source src="images/foka.mov" type="video/mp4">
        </video>
      </div>
      <div data-slide-bg="images/slajd1.jpg" class="swiper-slide">
        <div class="swiper-slide-caption">
          <div class="shell">
            <h1>Proplast</h1>
            <h6>We create with passion</h6>
            <div class="button-group"><a href="#" class="btn btn-default btn-sm">More</a><a href="#" class="btn btn-primary btn-md">Contact</a></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Swiper Pagination-->
    <div class="swiper-pagination"></div>
  </div>

The issue we are facing is that the title is not displaying on the video slide...

javascriptcsshtmlslider

Answer №1

Just wanted to clarify that the code snippet provided above should help you achieve the desired result. 

.swiper-slide {
  position: relative;
  clear: both;
}

#overlay {
  top: 0;
  position: absolute;
}
  <!-- Swiper-->
  <div data-height="100vh" data-min-height="480px" data-slide-effect="fade" class="swiper-container swiper-slider">
    <div class="swiper-wrapper text-center">
      <div data-slide-bg="" class="swiper-slide">
        <video class="video-relative">
          <source src="images/foka.mov" type="video/mp4">
        </video>
          
        <div id="overlay" class="swiper-slide-caption">
          <div class="shell">
            <h1>ProPlast</h1>
            <h6>Proffesional models</h6>
            <div class="button-group">
              <a href="#" class="btn btn-default btn-sm">More</a>
              <a href="#" class="btn btn-primary btn-md">Contact</a>
            </div>
          </div>
        </div>
          
        
      </div>
      <div data-slide-bg="images/slajd1.jpg" class="swiper-slide">
        <div class="swiper-slide-caption">
          <div class="shell">
            <h1>Proplast</h1>
            <h6>We create with passion</h6>
            <div class="button-group"><a href="#" class="btn btn-default btn-sm">More</a><a href="#" class="btn btn-primary btn-md">Contact</a></div>
          </div>
        </div>
      </div>
    </div>
    <!-- Swiper Pagination-->
    <div class="swiper-pagination"></div>
  </div>

If this does not meet your needs, feel free to reach out for further assistance!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the power of Javascript/jQuery to manipulate form

On my website, I have implemented a form that requires a customized response for certain zip codes. To achieve this, I am developing a code that validates the first 3 digits of the entered zip code against a predefined array in my system. Although the code ...

javascriptjqueryarraysformsonblur

Is it better to manually input a list of select options in the user interface or retrieve them dynamically from the database in case of future changes?

Imagine designing a user interface that allows users to choose their favorite Pokemon from options like Bulbasaur, Squirtle, and Charmander. Within the database, there is a lookup table containing all possible choices: pokemon --- id name 1 Bulbasaur 2 ...

javascriptsqlnode.jsreactjs

Three.js: Spherical boundary of an object that has been resized

When working with a collection of 3D shapes such as pyramids, cubes, octahedrons, and prisms, I encountered an issue with building described spheres around them. While it's straightforward to create the spheres using geometry.boundingSphere due to its ...

javascriptthree.js3dgeometry

Access an external URL by logging in, then return back to the Angular application

I am facing a dilemma with an external URL that I need to access, created by another client. My task is to make a call to this external URL and then return to the home page seamlessly. Here's what I have tried: <button class="altro" titl ...

javascriptangulartypescript

Verify that the JSON data contains the desired data type before adding it to jQuery

I'm working with JSON data extracted from an Excel file. I need to match the First Name in the JSON data with the 'First Name' field and append those elements to a specific div. Additionally, if the JSON data includes a 'status', I ...

javascripthtmljqueryjson

Configuration object for Webpack is not valid

I encountered an error while using webpack that says: Invalid configuration object. Webpack has been initialized with a configuration object that does not conform to the API schema. - configuration.resolve has an unknown property 'extension&ap ...

javascriptnode.jsreactjswebpackwebpack-4

The Bootstrap Navbar is causing the navigation bar to span across two lines

I'm having an issue with my navbar taking up two lines on desktop resolution, but fitting perfectly on mobile. I've spent hours going through the code with no success. Any help would be greatly appreciated. The HTML code is provided below. <! ...

javascriptjqueryhtmlcsstwitter-bootstrap

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation

What is the best way to retrieve the second to last element in a list

When using Protractor, you have convenient methods like .first() and .last() on the ElementArrayFinder: var elements = element.all(by.css(".myclass")); elements.last(); elements.first(); But what about retrieving the element that comes right before the ...

javascriptangularjsseleniumtestingprotractor

Tips for modifying string in key-value pairs on the client side (example using Paypal checkout demo)

Looking to integrate an online payment system into my small online business, I have decided on using PayPal. Their solution is user-friendly and can be found here: https://developer.paypal.com/demo/checkout/#/pattern/client However, I am facing an issue w ...

javascriptrestapipaypal

Splitting hyphenations

Check out my Codepen project I'm attempting to prevent word-breaks inside my .threadTitle class by using display: inline-block. While this solution works, the addition of a hyphen between two letters still causes a break. https://i.sstatic.net/q6ZMk ...

htmlcss

Error message for Joi when validating a nested array of objects

I have received user input from the client side and am performing backend validation using Joi. const Joi = require("joi") const schema = Joi.array().items( Joi.object().required().keys({ name: 'filter_list', value: Joi.array(). ...

javascriptnode.jsjoi

Tips for modifying javascript code to have popups appear as bPopup instead of in a separate popup window

Is there a way to modify the following code so that popup windows open as dpopups instead of just in a new popup window ()? $(document).ready(function() { var table = $('#taulu').DataTable( { "ajax": "taulu.php", "columnDefs" ...

javascriptjqueryformattingpopupbpopup

I am constantly reminded by React hooks to include all dependencies

Imagine I am using useEffect to pre-fetch data upon initial rendering: function myComponent(props) { const { fetchSomething } = props; ... ... useEffect(() => { fetchSomething(); }, []); ... ... } My linter is warni ...

javascriptreactjsreact-hooks

Encountering a client component error with the app router in Next.js version 13.4.9

Encountering an error in Nextjs that persists until the 'use client' directive is removed. Warning: Rendering <Context.Consumer.Consumer> is not supported and will be removed in a future major release. Did you mean to render <Context.Con ...

javascriptreactjsnext.jsnext.js13trpc.io

Encountering a blank webpage displaying a warning that reads, "The use of 'event.returnValue' is outdated

Although this issue has been discussed before and was previously considered a bug, I am currently using jQuery v1.11.0, which should have resolved it. The problem I am encountering is that when my page loads, there is supposed to be a slide-in effect (as a ...

javascriptjqueryasp.nethtml

Copying JSON Data in JavaScript: A Guide

Seeking advice on how to duplicate JSON within the same JSON at various hierarchy levels. Take a look at this example JSON below: Initial code snippet looks like this: { "data": { "moduleName": { "content": { "modul ...

javascriptjqueryjson

What is the best way to update and override multiple nested NPM dependencies with various versions?

Apologies for not being fluent in English Here is my NPM dependency: dependency tree +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1e090d0f184108091a4105021f1c090f18031e2c5d4255425c">[email protected]</a> ...

javascriptreactjsnpmice

A proposal for implementing constructor parameter properties in ECMAScript

TypeScript provides a convenient syntax for constructor parameter properties, allowing you to write code like this: constructor(a, public b, private _c) {} This is essentially shorthand for the following code: constructor(a, b, _c) { this.b = b; thi ...

javascripttypescriptecmascript-next

Identify the Google Maps Marker currently displayed on the screen

Is there a way to generate a list of markers within the zoom range for Google Maps, similar to the functionality on this site I'm curious if I can achieve this using jQuery or if there is a built-in function for Google Maps v3? Thank you! ...

javascriptjquerylistgoogle-mapsgoogle-maps-api-3