0

I'm trying to make this owlcarousel work but for some reason its not coming up. Its an issue with some of the script tags I guess.

I'm using owl carousel and displaying items from Database inside owlcarousel using Ajax. However when I do that there is no carousel and the items get dumped one below each other like so:

Carousel items one below each other

Ajax

    <script>
      var results = $(".owl-carousel");
      $.ajax({
        url: "getmaincarousel",
        type: "GET",
        success: function (response) {
          response.forEach(function (item) {
            results
              .owlCarousel()
              .trigger("add.owl.carousel", [
                JQuery(
                  '<div class="item"> <div class="blog-entry"> <a href="#" class="block-20 d-flex align-items-start" style="background-image: url(' +
                    item.img +
                    ');"> <div class="meta-date text-center p-2"> <span class="day">' +
                    item.subject +
                    '</span> <span class="mos">' +
                    item.subject +
                    '</span> <span class="yr">' +
                    item.courseduration +
                    '</span> </div> </a> <div class="text border border-top-0 p-4"> <h3 class="heading"><a href="#">' +
                    item.coursename +
                    "</a></h3> <p>" +
                    item.coursedesc +
                    '</p> <div class="d-flex align-items-center mt-4"> <p class="mb-0"><a href="#" class="btn btn-primary">Read More <span class="ion-ios-arrow-round-forward"></span></a></p> <p class="ml-auto meta2 mb-0"> ' +
                    item.courseprice +
                    " </p> </div> </div> </div> </div>"
                ),
              ])
              .trigger("refresh.owl.carousel");
          });
        },
      });
    </script>

Script format 1

    <script src="../js/jquery.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/owl.carousel.min.js"></script>

    <script src="../js/main.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

When I do this, I get the following error in console: the script owlcarousel.min.js is not getting used idk why

the script owlcarousel.min.js is not getting used idk why

and when i interchange the script tags like so, I get this error

Script format 2

    <script src="../js/jquery.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="../js/owl.carousel.min.js"></script>
    <script src="../js/main.js"></script>

enter image description here

Notice how changing the Jquery 2.1.4 script position gives different errors.

I really dont know why this keeps happening. I need the owl carousel min to get the owlCarousel function which refreshes the carousel. I also need the Jquery 2.1.4 to perform Ajax query. How do I solve this and make use of both?

Here's my full html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Carousel 07</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="css/owl.carousel.min.css" />
    <link rel="stylesheet" href="css/owl.theme.default.min.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"
    />
    <link rel="stylesheet" href="css/style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
  </head>

  <body>
    <div class="navbar">
      <a href="#">Phemesoft</a>
      <a href="#">Dashboard</a>
      <a href="#">Courses</a>
      <a href="#">Live classes</a>
      <a href="#">Labs</a>
      <div class="search">
        <input type="search" placeholder="Search" class="inputSearch" />
        <!--  <button type="submit" class="searchButton">
               <i class="fa fa-search"></i>
            </button>-->
      </div>
      <button type="submit" class="searchbtn">
        <span class="material-icons">search</span>
      </button>
      <span class="material-icons">shopping_cart</span>
      <span class="material-icons">account_circle</span>
    </div>

    <section class="ftco-section">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <h2 class="heading-section mb-5 pb-md-4">Courses available</h2>
          </div>
          <div class="col-md-12">
            <div class="featured-carousel owl-carousel">
              <!-- <div class="item">
                                <div class="blog-entry">
                      <a href="#" class="block-20 d-flex align-items-start" style="background-image: url('images/image_1.jpg');">
                                        <div class="meta-date text-center p-2">
                          <span class="day">csubj</span>
                          <span class="mos">cboard</span>
                          <span class="yr">cduration</span>
                        </div>
                      </a>
                      <div class="text border border-top-0 p-4">
                        <h3 class="heading"><a href="#">Finance And Legal Working Streams Occur Throughout</a></h3>
                        <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
                        <div class="d-flex align-items-center mt-4">
                            <p class="mb-0"><a href="#" class="btn btn-primary">Read More <span class="ion-ios-arrow-round-forward"></span></a></p>
                            <p class="ml-auto meta2 mb-0">
                            cprice
                            </p>
                        </div>
                      </div>
                    </div>
                            </div> -->
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="../js/jquery.js"></script>
    <script src="../js/popper.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="../js/owl.carousel.min.js"></script>
    <script src="../js/main.js"></script>

    <script>
      // $.ajax({
      //   url: "getmaincarousel",
      //   type: "GET",
      //   success: function (response) {
      //     var $results = $(".owl-carousel");
      //     for (var a = 0; a < response.length; a++) {
      //       // console.log(response[a].Name);
      //       $results.append(
      //         '<div class="item"> <div class="blog-entry"> <a href="#" class="block-20 d-flex align-items-start" style="background-image: url(' +
      //           response[a].img +
      //           ');"> <div class="meta-date text-center p-2"> <span class="day">' +
      //           response[a].subject +
      //           '</span> <span class="mos">' +
      //           response[a].subject +
      //           '</span> <span class="yr">' +
      //           response[a].courseduration +
      //           '</span> </div> </a> <div class="text border border-top-0 p-4"> <h3 class="heading"><a href="#">' +
      //           response[a].coursename +
      //           "</a></h3> <p>" +
      //           response[a].coursedesc +
      //           '</p> <div class="d-flex align-items-center mt-4"> <p class="mb-0"><a href="#" class="btn btn-primary">Read More <span class="ion-ios-arrow-round-forward"></span></a></p> <p class="ml-auto meta2 mb-0"> ' +
      //           response[a].courseprice +
      //           " </p> </div> </div> </div> </div>"
      //       );
      //     }

      //   },
      // });
    </script>
    <script>
      var results = $(".owl-carousel");
      $.ajax({
        url: "getmaincarousel",
        type: "GET",
        success: function (response) {
          response.forEach(function (item) {
            results
              .owlCarousel()
              .trigger("add.owl.carousel", [
                JQuery(
                  '<div class="item"> <div class="blog-entry"> <a href="#" class="block-20 d-flex align-items-start" style="background-image: url(' +
                    item.img +
                    ');"> <div class="meta-date text-center p-2"> <span class="day">' +
                    item.subject +
                    '</span> <span class="mos">' +
                    item.subject +
                    '</span> <span class="yr">' +
                    item.courseduration +
                    '</span> </div> </a> <div class="text border border-top-0 p-4"> <h3 class="heading"><a href="#">' +
                    item.coursename +
                    "</a></h3> <p>" +
                    item.coursedesc +
                    '</p> <div class="d-flex align-items-center mt-4"> <p class="mb-0"><a href="#" class="btn btn-primary">Read More <span class="ion-ios-arrow-round-forward"></span></a></p> <p class="ml-auto meta2 mb-0"> ' +
                    item.courseprice +
                    " </p> </div> </div> </div> </div>"
                ),
              ])
              .trigger("refresh.owl.carousel");
          });
        },
      });
    </script>
  </body>
</html>
Sharan Shetty
  • 33
  • 4
  • Start by replacing JQuery with "jQuery" or "$", it will remove the second error and replace "results" variable by "$results", I haven't tested it but it should work. – Idov Mamane Oct 03 '21 at 13:29
  • I did that answer with a owl slider that ist working. See https://stackoverflow.com/questions/67670643/how-do-you-make-custom-owl-carousel-dots-clickable/67671558#67671558 Maybe that helps you. – Bernhard Beatus Oct 03 '21 at 15:04
  • Maybe you must write `jQuery` instead of `JQuery`? – Aleksandr Abramov Oct 06 '21 at 19:37

0 Answers0