reactjs - 从 React Js 中的数组加载 Owl Carousel 数据
问题描述
大家好,我需要渲染从数组中获取的猫头鹰轮播图像和内容数据。以下是数据数组
const MOVIEBANNER = [
{
id: 1,
genres: "ACTION / ADVENTURE",
language: "ENGLISH, HINDI",
movieTitle: "Avengers End Game",
movieType: "2D & 3D",
duration: "240mins",
ratings: 50195,
bannerImage: "https://resize1.indiatvnews.com/en/centered/newbucket/1200_675/2019/04/avengers-endgame-1556244382.jpg"
},
{
id: 2,
genres: "ACTION / ADVENTURE / FANTASY",
language: "ENGLISH, HINDI, TAMIL",
movieTitle: "No Time To Die",
movieType: "IMAX 3D",
duration: "140mins",
ratings: 30195,
bannerImage: "https://www.geo.tv/assets/uploads/updates/2021-04-18/345956_6606435_updates.jpg"
},
{
id: 2,
genres: "ACTION / ADVENTURE / FANTASY",
language: "ENGLISH, HINDI, TAMIL",
movieTitle: "Hotel Transylvania 4",
movieType: "2D & 3D",
duration: "160mins",
ratings: 10195,
bannerImage: "https://pbs.twimg.com/media/E0KjQ2gUUAA_MF0.jpg"
}
]
所以我需要的是这样的东西来渲染 见附图
提前致谢 !!
解决方案
那是你需要的吗?
const MOVIEBANNER = [{
id: 1,
genres: "ACTION / ADVENTURE",
language: "ENGLISH, HINDI",
movieTitle: "Avengers End Game",
movieType: "2D & 3D",
duration: "240mins",
ratings: 50195,
bannerImage: "https://resize1.indiatvnews.com/en/centered/newbucket/1200_675/2019/04/avengers-endgame-1556244382.jpg"
},
{
id: 2,
genres: "ACTION / ADVENTURE / FANTASY",
language: "ENGLISH, HINDI, TAMIL",
movieTitle: "No Time To Die",
movieType: "IMAX 3D",
duration: "140mins",
ratings: 30195,
bannerImage: "https://www.geo.tv/assets/uploads/updates/2021-04-18/345956_6606435_updates.jpg"
},
{
id: 3,
genres: "ACTION / ADVENTURE / FANTASY",
language: "ENGLISH, HINDI, TAMIL",
movieTitle: "Hotel Transylvania 4",
movieType: "2D & 3D",
duration: "160mins",
ratings: 10195,
bannerImage: "https://pbs.twimg.com/media/E0KjQ2gUUAA_MF0.jpg"
}
]
$(document).ready(function() {
MOVIEBANNER.forEach(movie => {
$('.owl-carousel').append(`
<div class="item">
<h4>${movie.movieTitle}</h4>
<h6>Genres : ${movie.genres}</h4>
<h6>Duration : ${movie.duration}</h6>
<img src=${movie.bannerImage} />
</div>`);
})
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
}
}
})
})
body {
font-family: sans-serif
}
<link rel="stylesheet" type="text/css" href="https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.css">
<script defer src="https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel owl-theme"></div>
推荐阅读
- java - 我如何在 android 中具有 xy 位置的图像上制作可移动的 perticuler 点?
- java - 在方法中初始化局部变量
- spring-boot - Openshift 容器运行状况探测连接被拒绝
- ubuntu - 通过SSH,Ubuntu 20.04(Focal)“无法获得引用控制台的文件描述符”
- python - 从数据框 pandas 创建 groupby 函数
- three.js - 我无法使用 WebGL1 或 2 在我的着色器中使用导数 (dFdx)
- django - 使用 nginx + gunicorn + django 的间歇性错误请求 (400) Spotify API 回调
- python - 在绘制多元线性回归模型的成本与时期时获得空图
- django - Python-Social-Auth:无法从 Linkedin 保存电子邮件地址值以用于管道
- mongodb - Mongorestore 引发错误 - 我可以跳过文档吗?