Owl Carousel data loads from an array in React Js

Question

Hi all I need to render owl carousel images & content data taken from an array. following is the data array

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"
    }
  ]

So what I need is something like this to render See the attached image

Thanks in advance !!

Answer 1

Is that what you needed ?

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>