Cloud Stack Ninja

I am working on angular 8 project. I have downloaded a sample html template from other website and integrated it in angular 8 project by creating components. I have set all the css and javascipts inside angular.json file. I have also used allowjs =true inside tsconfig.json file. Below is my a part of my angular.json file:

 "styles": [
          "src/styles.css",
          "src/assets/css/bootstrap.min.css",
          "src/assets/css/animate.css",
          "src/assets/css/owl.carousel.min.css",
          "src/assets/css/all.css",
          "src/assets/css/flaticon.css",
          "src/assets/css/themify-icons.css",
          "src/assets/css/magnific-popup.css",
          "src/assets/css/slick.css",
          "src/assets/css/style.css"
        ],
        "scripts": [
          "src/assets/js/jquery-1.12.1.min.js",
          "src/assets/js/popper.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/jquery.magnific-popup.js",
          "src/assets/js/owl.carousel.min.js",
          "src/assets/js/jquery.nice-select.min.js",
          "src/assets/js/slick.min.js",
          "src/assets/js/jquery.counterup.min.js",
          "src/assets/js/waypoints.min.js",
          "src/assets/js/contact.js",
          "src/assets/js/jquery.ajaxchimp.min.js",
          "src/assets/js/jquery.form.js",
          "src/assets/js/jquery.validate.min.js",
          "src/assets/js/mail-script.js",
          "src/assets/js/custom.js"
        ]
      },

I don't wanted to install owl carousel if i have its external js in my solution. I just want to make it work. My issue over here is that the code for slider works smoothly when i place it inside index.html. But it does not works if i place it inside app.component.html or any other html file. Below is the slider code:

 <!-- client review part here -->


<section class="client_review">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="client_review_slider owl-carousel">
                    <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                     <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                    <div class="single_client_review">
                        <div class="client_img">
                            <img src="img/client_2.png" alt="#">
                        </div>
                        <p>Stuff.</p>
                        <h5>- Mike Tayson</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- client review part end -->


Read more here: https://stackoverflow.com/questions/62736754/owl-carousel-slider-not-working-inside-angular-component-but-working-in-index-ht

Content Attribution

This content was originally published by Rahul at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: