加载/替换 data-src 中指定的图像或视频

Question

我的目标是显示 div 中显示的不同图像或视频，当其他元素悬停在上面时，该图像或视频会发生变化。

我想我可以通过检查 a 中指定的图像文件data-src并将其加载到img页面上的标签中来仅处理图像。但是，我需要将标记更改为img指定video电影文件时的标记 - 这就是我需要的帮助。

您可以在此处查看“工作”图像版本（第三个项目中没有占位符视频，因此data-src不会显示）： https://codepen.io/moy/pen/BaNxzdL

所以当前页面上我有这个空图像标签：

<div class="carousel__bg">
    <img src="" /></div>

图像文件在多个轮播项目上指定，如下data-src例所示：

<div class="carousel__item" data-src="img/content/1-wide.jpg">

    <div class="carousel__content">

        <h4 class="carousel__title">Behind The Scenes</h4>

        <span class="carousel__flag">// Featured</span>

        <h2 class="carousel__subtitle">Denim Cox in Fuck Yes Dude!</h2>

        <a href="#" class="carousel__btn">Read the Article</a>

    </div>

    <img src="img/content/1.jpg" class="carousel__image" />

</div>

获取图像 URL 并将其添加到页面的 javascript 是这样的：

$(function() {

    var overlay = $('.carousel__bg img'), cached = {};

    $('.carousel__item').mouseenter(function() {

        var item = $(this),

        spot = $(this).index('.carousel__item'),

        value = item.attr('data-src');

        overlay.fadeTo(0,0).attr('src', value);

        if (!overlay[0].complete && !cached[spot]) {

            cached[spot] = true;

            $('.carousel__bg').addClass('loading');

            overlay.one('load', function() {

                $('.carousel__bg').removeClass('loading');

                overlay.fadeTo(300,1);

            });

        }

        else overlay.fadeTo(300,1);

    })

    .mouseleave(function() {

        overlay.finish();

    });

});

显然，问题是如果我指定data-src="video/safari.mp4"它就不起作用，因为它当前正在尝试将视频添加到元素中img。那么我该如何在 img/video 标签之间切换呢？一个相关的问题是能够加载文件的 mp4 + webm/ogg 版本吗？

那么是否需要重新设计以根据扩展名将imgorvideo元素“注入”到页面上？我尝试使用 if/else 语句来检查是否data-src包含.mp4扩展名，并且只是将video页面上的元素硬编码为文本，但无法使其工作。:/

这些文件可能非常大，这就是为什么我在需要它们之前才加载它们。

编辑

顺便说一句，我决定将这些物品放入轮播中，看看这种效果是否有效 - 效果非常好！

但是，我注意到当您将鼠标悬停在上一个/下一个按钮上时，我在 CSS 中淡出图像的方式（悬停时淡出所有图像.carousel，然后定位单个项目并覆盖）现在是一个问题不要淡入。

有人有更好的方法来处理这个问题吗？我尝试了 100% CSS 方法，但也许添加一个类会更好？

光滑的轮播示例：https ://codepen.io/moy/pen/JjdvRyG

Answer 1

元素video部分并不难，重要的部分是获取视频的 mime 类型以添加到元素中source。它data-src采用视频 url 数组（不同类型），并在找到类型后将不同的源添加到元素中。我更新了你的代码笔至于按钮，它们位于.carousel元素内部，因此悬停将冒泡到基于该按钮设计样式的所有元素。我使一些元素更加具体，因此它们只会在项目列表悬停时改变样式。最后，为了让监听器适用于 slick 元素，我将它们更改为.on.var VIDEO_TYPES = {&nbsp; 'mp4': 'video/mp4',&nbsp; 'webm': 'video/webm',&nbsp; 'ogv': 'video/ogg',}/**&nbsp;* Slick&nbsp;*/$(document).ready(function() {&nbsp; $('.slick-carousel').slick({&nbsp; &nbsp; &nbsp; //centerMode: true,&nbsp; &nbsp; &nbsp; centerPadding: '0',&nbsp; &nbsp; &nbsp; slidesToShow: 3,&nbsp; &nbsp; &nbsp; arrows: true,&nbsp; &nbsp; &nbsp; dots: false,&nbsp; &nbsp; &nbsp; prevArrow: '<a class="slick-arrow slick-arrow--prev"><span>&larr;</span></a>',&nbsp; &nbsp; &nbsp; nextArrow: '<a class="slick-arrow slick-arrow--next"><span>&rarr;</span></a>',&nbsp; &nbsp; &nbsp; responsive: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; breakpoint: 960,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; centerMode: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; breakpoint: 600,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; centerMode: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; breakpoint: 480,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; settings: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; centerMode: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slidesToShow: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; })&nbsp; &nbsp; .on('setPosition', function(event, slick) {&nbsp; &nbsp; &nbsp; &nbsp; slick.$slider.find(".slick-slide .tile:not(.position-set)").addClass('position-set').css('height', slick.$slideTrack.height() - 30 + 'px');&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;/**&nbsp;* Image Swap&nbsp;*/&nbsp; &nbsp;var cached = {};&nbsp; var overlay_video = $(".carousel__bg video");&nbsp; var overlay_img = $(".carousel__bg img");&nbsp; var overlay = $(".carousel__bg");&nbsp; $(".carousel__item")&nbsp; &nbsp; .on('mouseenter', function() {&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; var item = $(this),&nbsp; &nbsp; &nbsp; &nbsp; spot = $(this).index(".carousel__item"),&nbsp; &nbsp; &nbsp; &nbsp; value = item.data("src");&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; overlay_video.empty();&nbsp; &nbsp; &nbsp; var overlay_item;&nbsp; &nbsp; &nbsp; overlay.fadeTo(0, 0);&nbsp; &nbsp; &nbsp; //videos will have an array ur urls&nbsp; &nbsp; &nbsp; var is_video = value instanceof Array;&nbsp; &nbsp; &nbsp; if(is_video) {&nbsp; &nbsp; &nbsp; &nbsp; overlay_item = overlay_video;&nbsp; &nbsp; &nbsp; &nbsp; overlay_img.attr("src", '');&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; overlay_video.append(value.map((url) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var extension = url.split('.').pop();&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var type = VIDEO_TYPES[extension];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return `<source src="${url}" type="${type}">`&nbsp; &nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; overlay_item = overlay_img;&nbsp; &nbsp; &nbsp; &nbsp; overlay_img.attr("src", value);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; //force the video element to reload&nbsp; &nbsp; &nbsp; overlay_video.get(0).load();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; if (!overlay_item.complete && !cached[spot]) {&nbsp; &nbsp; &nbsp; &nbsp; cached[spot] = true;&nbsp; &nbsp; &nbsp; &nbsp; overlay.addClass("loading");&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; overlay_item.one(is_video ? "loadeddata" : "load", function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;overlay.removeClass("loading");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;overlay.fadeTo(300, 1);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; } else&nbsp; overlay.fadeTo(300, 1);&nbsp; &nbsp; })&nbsp; &nbsp; .on('mouseleave', function() {&nbsp; &nbsp; &nbsp; overlay.finish();&nbsp; &nbsp; });});/**&nbsp;* Base styling.&nbsp;*/html {&nbsp; &nbsp; background: rgb(255,255,255);&nbsp; &nbsp; font-size: 62.5%;&nbsp; &nbsp; -webkit-font-smoothing: antialiased;&nbsp; &nbsp; -moz-osx-font-smoothing: grayscale;&nbsp; &nbsp; -webkit-overflow-scrolling: touch;&nbsp; &nbsp; -webkit-text-size-adjust: 100%;}body {&nbsp; &nbsp; background-color: transparent;&nbsp; &nbsp; color: rgb(0,0,0);&nbsp; &nbsp; font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;&nbsp; &nbsp; font-family: 'Roboto', sans-serif;&nbsp; &nbsp; font-size: 1.6rem;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; line-height: 1.6rem;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 30px 0 0;&nbsp; &nbsp; text-rendering: optimizeLegibility;}/**&nbsp;* Carousel&nbsp;*/.carousel {&nbsp; &nbsp; background: rgb(0,0,0);&nbsp; &nbsp; color: rgb(255,255,255);&nbsp; &nbsp; height: 640px;&nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; max-width: 1200px;}.carousel:before,.carousel:after {&nbsp; &nbsp; background: rgba(255,255,255,.25);&nbsp; &nbsp; content: "";&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 33.33333%;&nbsp; &nbsp; width: 1px;&nbsp; &nbsp; z-index: 30;}.carousel:after {&nbsp; &nbsp; left: 66.66666%;}/**&nbsp;* Background (fullwidth) image&nbsp;*/.carousel__bg {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: 100%;}.carousel__bg.loading {&nbsp; &nbsp; background: url(../img/interface/loading.gif) no-repeat center center;}.carousel__bg img, .carousel__bg video {&nbsp; &nbsp; display: block;&nbsp; &nbsp; height: 640px;&nbsp; &nbsp; object-fit: cover;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; right: 0;&nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp;}/**&nbsp;* Individual carousel item&nbsp;*/.carousel__item {&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; float: left;&nbsp; &nbsp; height: 640px;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 33.33333%;&nbsp;}.carousel__item:hover {&nbsp; &nbsp; cursor: pointer;}/* Text Content */.carousel__content {&nbsp; &nbsp; background: rgba(0,0,0,.45);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; color: rgb(255,255,255);&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; min-height: 100%;&nbsp; &nbsp; padding: 30px;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; z-index: 15;}.carousel__title,.carousel__subtitle,.carousel__flag {&nbsp; &nbsp; color: rgb(255,255,255);&nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; font-family: 'Anton', sans-serif;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; line-height: 1;&nbsp; &nbsp; margin: 0 0 5px;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; text-transform: uppercase;}.carousel__title {&nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; transition: all .25s;}.carousel__subtitle {&nbsp; &nbsp; display: none;&nbsp; &nbsp; font-size: 48px;}.carousel__flag {&nbsp; &nbsp; color: rgb(45,190,193);&nbsp; &nbsp; font-size: 14px;}/* Button */.carousel__btn {&nbsp; &nbsp; background: transparent;&nbsp; &nbsp; border: 1px solid rgb(255,255,255);&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; color: rgb(255,255,255);&nbsp; &nbsp; display: block;&nbsp; &nbsp; font-family: 'Anton', sans-serif;&nbsp; &nbsp; font-size: 12px;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; height: 45px;&nbsp; &nbsp; line-height: 45px;&nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; padding: 0 30px;&nbsp; &nbsp; bottom: 30px;&nbsp; &nbsp; left: 30px;&nbsp; &nbsp; right: 30px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; transition: all .15s;&nbsp; &nbsp; -webkit-backface-visibility: hidden;}.carousel__btn:visited {&nbsp; &nbsp; background: transparent;}.carousel__btn:focus,.carousel__btn:hover {&nbsp; &nbsp; background: rgb(45,190,193);&nbsp; &nbsp; border-color: rgb(45,190,193);}/* Image */.carousel__image {&nbsp; &nbsp; display: block;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; object-fit: cover;&nbsp; &nbsp; transition: all .30s;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; max-width: 100%;&nbsp; &nbsp; -webkit-backface-visibility: hidden;}/* When hovering over the carousel, fade all the titles out */.carousel>.slick-carousel>.slick-list:hover .carousel__title {&nbsp; &nbsp; opacity: .30;}/* But not the one contained without the 'item' you're hovering over */.carousel:hover .carousel__item:hover .carousel__title {&nbsp; &nbsp; opacity: 1;}/* Fade all images out so the fullwidth background image is visble */.carousel>.slick-carousel>.slick-list:hover&nbsp; .carousel__image {&nbsp; &nbsp; opacity: 0;}/* Hide the flag element */.carousel>.slick-carousel>.slick-list:hover .carousel__flag {&nbsp; &nbsp; display: none;}/* Show the subtitle */.carousel:hover .carousel__item:hover .carousel__subtitle {&nbsp; &nbsp; display: block;}/* Display the CTA of the active item */.carousel:hover .carousel__item:hover .carousel__btn {&nbsp; &nbsp; opacity: 1;}/* Slick Prev/Next */.slick-carousel,.slick-list,.slick-track {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; min-height: 100%;}.slick-arrow {&nbsp; &nbsp; background: transparent;&nbsp; &nbsp; border: 1px solid rgb(255,255,255);&nbsp; &nbsp; color: rgb(255,255,255);&nbsp; &nbsp; display: block;&nbsp; &nbsp; font-family: 'Anton', sans-serif;&nbsp; &nbsp; font-size: 24px;&nbsp; &nbsp; height: 45px;&nbsp; &nbsp; line-height: 45px;&nbsp; &nbsp; margin-top: -30px;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 50%;&nbsp; &nbsp; left: 30px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; transform: rotate(45deg);&nbsp; &nbsp; transition: all .15s;&nbsp; &nbsp; width: 45px;&nbsp; &nbsp; z-index: 60;}.slick-arrow:hover {&nbsp; &nbsp; background: rgb(255,255,255);&nbsp; &nbsp; color: rgb(0,0,0);}.slick-arrow span {&nbsp; &nbsp; display: block;&nbsp; &nbsp; transform: rotate(-45deg);}.slick-arrow--next {&nbsp; &nbsp; left: auto;&nbsp; &nbsp; right: 30px;}/* Slick Core */.slick-slider{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: block;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; -webkit-user-select: none;&nbsp; &nbsp; &nbsp; &nbsp;-moz-user-select: none;&nbsp; &nbsp; &nbsp; &nbsp; -ms-user-select: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; user-select: none;&nbsp; &nbsp; -webkit-touch-callout: none;&nbsp; &nbsp; -khtml-user-select: none;&nbsp; &nbsp; -ms-touch-action: pan-y;&nbsp; &nbsp; &nbsp; &nbsp; touch-action: pan-y;&nbsp; &nbsp; -webkit-tap-highlight-color: transparent;}.slick-list{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: block;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}.slick-list:focus{&nbsp; &nbsp; outline: none;}.slick-list.dragging{&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; cursor: hand;}.slick-slider .slick-track,.slick-slider .slick-list{&nbsp; &nbsp; -webkit-transform: translate3d(0, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp;-moz-transform: translate3d(0, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; -ms-transform: translate3d(0, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-o-transform: translate3d(0, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate3d(0, 0, 0);}.slick-track{&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin-left: auto;&nbsp; &nbsp; margin-right: auto;}.slick-track:before,.slick-track:after{&nbsp; &nbsp; display: table;&nbsp; &nbsp; content: '';}.slick-track:after{&nbsp; &nbsp; clear: both;}.slick-loading .slick-track{&nbsp; &nbsp; visibility: hidden;}.slick-slide{&nbsp; &nbsp; display: none;&nbsp; &nbsp; float: left;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; min-height: 1px;}[dir='rtl'] .slick-slide{&nbsp; &nbsp; float: right;}.slick-slide img{&nbsp; &nbsp; display: block;}.slick-slide.slick-loading img{&nbsp; &nbsp; display: none;}.slick-slide.dragging img{&nbsp; &nbsp; pointer-events: none;}.slick-initialized .slick-slide{&nbsp; &nbsp; display: block;}.slick-loading .slick-slide{&nbsp; &nbsp; visibility: hidden;}.slick-vertical .slick-slide{&nbsp; &nbsp; display: block;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; border: 1px solid transparent;}.slick-arrow.slick-hidden {&nbsp; &nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script><div class="carousel">&nbsp; <div class="carousel__bg">&nbsp; &nbsp; <img src="" />&nbsp; &nbsp; <video autoplay muted loop></video>&nbsp; </div>&nbsp; <div class="slick-carousel">&nbsp; &nbsp; <div class="carousel__item" data-src="https://www.fillmurray.com/750/550">&nbsp; &nbsp; &nbsp; <div class="carousel__content">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="carousel__title">Behind The Scenes</h4>&nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel__flag">// Featured</span>&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="carousel__subtitle">Lorem ipsum dolor</h2>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="carousel__btn">Read the Article</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <img src="https://www.fillmurray.com/g/400/600" class="carousel__image" />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="carousel__item" data-src="https://www.fillmurray.com/800/600">&nbsp; &nbsp; &nbsp; <div class="carousel__content">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="carousel__title">Reed Stark</h4>&nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel__flag">// Featured</span>&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="carousel__subtitle">Lorem ipsum dolor</h2>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="carousel__btn">Watch the Video</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <img src="https://www.fillmurray.com/g/450/650" class="carousel__image" />&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>&nbsp; &nbsp; &nbsp; <div class="carousel__content">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="carousel__title">Fresh Drops</h4>&nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel__flag">// Featured</span>&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="carousel__subtitle">Lorem ipsum dolor</h2>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="carousel__btn">See The Collection</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <img src="https://www.fillmurray.com/g/350/550" class="carousel__image" />&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div class="carousel__item" data-src='[ "https://www.w3schools.com/tags/movie.mp4", "https://www.w3schools.com/tags/movie.ogg"]'>&nbsp; &nbsp; &nbsp; <div class="carousel__content">&nbsp; &nbsp; &nbsp; &nbsp; <h4 class="carousel__title">Fresh Drops</h4>&nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel__flag">// Featured</span>&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="carousel__subtitle">Lorem ipsum dolor</h2>&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="carousel__btn">See The Collection</a>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <img src="https://www.fillmurray.com/g/300/500" class="carousel__image" />&nbsp; &nbsp; </div>&nbsp; </div></div>