如何解决将 Flexbox Row Columns 项目转换为 Carousel for Mobile使用 JavaScript
我必须为桌面制作一个 FlexBox 网格行，并且需要为移动设备转换一个轮播。在桌面视图中，它使用 FlexBox 以行和列结构显示，并在移动设备中仅使用 JavaScript 显示为轮播视图。没有 jQuery 或其他第三方插件。请在 codepen https://codepen.io/pritambhadra/pen/QWGZjXv 中找到完整代码 https://codepen.io/pritambhadra/pen/QWGZjXv
`
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay loop muted webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay loop muted webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-user show-user">
<video class="video" autoplay webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/Woman.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="equlizer-wrapper">
<div class="equlizer-list">
<span class="step-one"> </span>
<span class="step-two"> </span>
<span class="step-three"> </span>
</div>
</div>
<div class="username">Pritam</div>
</div>
<div class="full"></div>
</div>
<div class="fsm f-col hide-share-scrn show-share-scrn">
<video class="video" autoplay webkit-playsinline="true" playsinline="true"><source src="https://toktown-v2-grid-framework.web.app/v4/file_example.mp4" type="video/mp4"></video>
<div class="user-info">
<div class="username">Share Screen One</div>
</div>
<div class="full"></div>
</div>
</div>
</div>
</div> `
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
