CODEWITHSUNDEEP
javascriptowl-carousel
aasanchez
aasanchez

Reputation: 169

Reinit owlCarrouse after ajax

I'm working on a small project, where I need make a call to an API, and add the results to a carousel.

$('.owl-carousel').owlCarousel({
  center: true,
  loop: true,
  autoplay: true,
  autoplayTimeout: 1000,
  autoplayHoverPause: true,
});

function getChannels() {
  return ['ninja', 'freecodecamp', 'aws'];
}

$(document).ready(function() {
  let channels = getChannels().join(',');
  $.ajax({
    url: 'https://api.twitch.tv/kraken/users?login=' + channels,
    type: 'GET',
    dataType: 'json',
    success: function(data) {
      let html = '';
      const CHANNELS = data.users;
      CHANNELS.forEach(function(channel) {
        html = '<div class="item text-center"><div class="card"><img class="card-img-top" src="' + channel.logo + '" alt="' + channel.name + '"><div class="card-body"><h5 class="card-title">' + channel.name + '</h5><p class="card-text">' + channel.bio + '</p></div></div></div>';
        $(".owl-carousel").append(html);
      });
    },

    error: function() {
      alert('boo!');
    },
    beforeSend: setHeader,
  });
});

function setHeader(xhr) {
  xhr.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');
  xhr.setRequestHeader('Client-ID', 'd0ovtk7831pgj75eaahflmefr1jrbx');
}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"/>

    <title>Hello, world!</title>
</head>
<body>


<div class="container">
    <div class="owl-carousel owl-theme" id="carousel">
        <div class="item"><div class="card"><img class="card-img-top" src="https://via.placeholder.com/300"><div class="card-body"><h5 class="card-title">Cards title</h5><p class="card-text">Body1</p></div></div></div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>

According to some threads here in Stack Overflow, I must add something like this

$('.owl-carousel').trigger('refresh.owl.carousel');

or add this lines to the sucess function...

owl.owlCarousel({
  items: 4,
  navigation: true
});

But doesn't work... any idea???

For some reason, the new card add added to the booton, and not included into the carousel

Upvotes: 0

Views: 257

Answers (1)

weird_error
weird_error

Reputation: 96

Not sure why you would want to initialize the carousel with some content, then replace its contents with new contents, but here's what you need to change:

$(".owl-carousel").owlCarousel({
  center: true,
  loop: true,
  autoplay: true,
  autoplayTimeout: 1000,
  autoplayHoverPause: true
});

function getChannels() {
  return ["ninja", "freecodecamp", "aws"];
}

$(document).ready(() => {
  const channels = getChannels().join(",");

$.ajax({
  url: `https://api.twitch.tv/kraken/users?login=${channels}`,
  type: "GET",
  dataType: "json",
  success(data) {
    let html = "";
    const CHANNELS = data.users;

    // destroy the old carousel and cleanup the node
    $(".owl-carousel").trigger("destroy.owl.carousel");
    $(".owl-carousel").empty();

    CHANNELS.forEach(channel => {
      html = `<div class="item text-center"><div class="card"><img class="card-img-top" src="${
                channel.logo
            }" alt="${
                channel.name
            }"><div class="card-body"><h5 class="card-title">${
                channel.name
            }</h5><p class="card-text">${channel.bio}</p></div></div></div>`;
      // append new HTML inside the loop
      $(".owl-carousel").append(html);
    });

    // re-initialize the carousel outside the loop
    $(".owl-carousel").owlCarousel({
      center: true,
      loop: true,
      autoplay: true,
      autoplayTimeout: 1000,
      autoplayHoverPause: true
    });
  },

  error() {
    alert("boo!");
  },
  beforeSend: setHeader
});
});

function setHeader(xhr) {
xhr.setRequestHeader("Accept", "application/vnd.twitchtv.v5+json");
xhr.setRequestHeader("Client-ID", "d0ovtk7831pgj75eaahflmefr1jrbx");
}

Upvotes: 1

Related Questions