Owl 从 React Js 中的数组加载轮播数据
Owl Carousel data loads from an array in React Js
大家好,我需要渲染 owl 旋转木马图像和从数组中获取的内容数据。
以下是数据数组
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"
}
]
所以我需要的是这样的东西来渲染
See the attached image
提前致谢!!
这是你需要的吗?
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>
大家好,我需要渲染 owl 旋转木马图像和从数组中获取的内容数据。 以下是数据数组
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"
}
]
所以我需要的是这样的东西来渲染 See the attached image
提前致谢!!
这是你需要的吗?
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>