Slide Image and Video using Owl Slider

[Eko]

Hi, is it possible to use video and image in Owl Slider? If possible, do you have a demo of it? Or maybe you can give me the code? Thanks.

---

[Support]

Hello,

We don’t have an example of that but you can start adding the video in the first slide, like this:

<div class="owl-carousel-wrapper" style="height: 100vh;">
	<div class="owl-carousel dots-inside dots-horizontal-center show-dots-hover nav-inside nav-inside-plus nav-dark nav-md nav-font-size-md show-nav-hover mb-0" data-plugin-options="{'responsive': {'0': {'items': 1}, '479': {'items': 1}, '768': {'items': 1}, '979': {'items': 1}, '1199': {'items': 1}}, 'loop': false, 'autoHeight': false, 'margin': 0, 'dots': true, 'dotsVerticalOffset': '-75px', 'nav': true, 'animateIn': 'fadeIn', 'animateOut': 'fadeOut', 'mouseDrag': false, 'touchDrag': false, 'pullDrag': false, 'autoplay': true, 'autoplayTimeout': 9000, 'autoplayHoverPause': true, 'rewind': true}">

		<!-- Carousel Slide 1 -->
		<div class="position-relative" style="background-color: #35383d; height: 100vh;">
			<section class="section border-0 video overlay overlay-show overlay-op-8 m-0" data-video-path="video/memory-of-a-woman" data-plugin-video-background data-plugin-options="{'posterType': 'jpg', 'position': '50% 50%'}" style="height: 100vh;">
				<div class="container position-relative z-index-3 h-100">
					<div class="row align-items-center h-100">
						<div class="col">
							<div class="d-flex flex-column align-items-center justify-content-center h-100">
								<h1 class="position-relative text-color-light text-5 line-height-5 font-weight-medium px-4 mb-2 appear-animation" data-appear-animation="fadeInDownShorterPlus" data-plugin-options="{'minWindowWidth': 0}">
									<span class="position-absolute right-100pct top-50pct transform3dy-n50 opacity-3">
										<img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
									</span>
									GET READY TO <span class="position-relative">SEE<span class="position-absolute left-50pct transform3dx-n50 top-0 mt-3"><img src="img/slides/slide-blue-line.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorterPlus" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}" alt="" /></span></span>
									<span class="position-absolute left-100pct top-50pct transform3dy-n50 opacity-3">
										<img src="img/slides/slide-title-border-light.png" class="w-auto appear-animation" data-appear-animation="fadeInLeftShorter" data-appear-animation-delay="250" data-plugin-options="{'minWindowWidth': 0}" alt="" />
									</span>
								</h1>
								<h1 class="text-color-light font-weight-extra-bold text-12 line-height-1 mb-2 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="1000" data-plugin-options="{'minWindowWidth': 0}">PERFECT VIDEOS</h1>
								<p class="text-4 text-color-light font-weight-light opacity-7 mb-0" data-plugin-animated-letters data-plugin-options="{'startDelay': 2000, 'minWindowWidth': 0}">Check out our options and features</p>
							</div>
						</div>
					</div>
				</div>
			</section>
		</div>

	</div>
</div>

---

[Author]

Posts