Slider or carousel not working when the code is moved to an Angular component in angular 7

#help #angular7 #angular

When I am putting Slider HTML code in the angular component slider is not working but when I am putting code directly into index.html it's working fine. Can anyone please help me out? as I am a beginner in angular.

Top comments (5)

Ben Halpern • Apr 17 '19

Can you share some of the specific code involved?

RamAvtarStint • Apr 17 '19 • Edited

I am using below Html code, CSS, Script files. Please let me know how i can use this ?

            <ul>
                <li>
                    <img src="assets/images/main-slider/bk1.jpg" alt="" class="rev-slidebg">

                    We Offer landscaping
                        <br>Services Since 1947


                    30+ years of experience our staff keep your property looking
                        <br> and functioning beautifully. Our landscapers are fully licensed


                    <a href="#" class="slider-link-style1">MORE ABOUT OUR COMPANY </a>

                </li>

                <li>
                    <img src="assets/images/main-slider/bk2.jpg" alt="" class="rev-slidebg">

                    GRD Offers Garden
                        <br>Design to Clients.

                    30+ years of experience our staff keep your property looking
                        <br> and functioning beautifully. Our landscapers are fully licensed

                    <a href="#" class="slider-link-style1">MORE ABOUT OUR COMPANY </a>

                </li>

                <li>
                    <img src="assets/images/main-slider/bk3.jpg" alt="" class="rev-slidebg">

                    We Are Certified
                        <br> &amp; Insured landscapers


                    30+ years of experience our staff keep your property looking
                        <br> and functioning beautifully. Our landscapers are fully licensed

                    <a href="#" class="slider-link-style1">MORE ABOUT OUR COMPANY </a>

                </li>
            </ul>

    <script type="text/javascript" src="assets/js/revolution/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.actions.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.carousel.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.kenburn.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.layeranimation.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.migration.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.navigation.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.parallax.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.slideanims.min.js"></script>
    <script type="text/javascript" src="assets/js/revolution/extensions/revolution.extension.video.min.js"></script>

smita-vorbitech • Sep 25 '19

Put script code in angular.json
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"src/assets/js/jquery.js",
"src/assets/js/popper.min.js",
"src/assets/js/bootstrap.min.js",
"src/assets/js/jquery.fancybox.js",
"src/assets/js/jquery-ui.js",
"src/assets/js/owl.js",
"src/assets/js/appear.js",
"src/assets/js/wow.js",
"src/assets/js/element-in-view.js",
"src/assets/js/paroller.js",
"src/assets/js/script.js",
"src/assets/js/revolution-slider/jquery.themepunch.tools.min.js",
"src/assets/js/revolution-slider/jquery.themepunch.revolution.min.js",
"src/assets/js/revolution-slider/revolution.addon.slicey.min8a54.js",
"src/assets/js/revolution-slider/revolution.extension.actions.min.js",
"src/assets/js/revolution-slider/revolution.extension.carousel.min.js",
"src/assets/js/revolution-slider/revolution.extension.kenburn.min.js",
"src/assets/js/revolution-slider/revolution.extension.layeranimation.min.js",
"src/assets/js/revolution-slider/revolution.extension.migration.min.js",
"src/assets/js/revolution-slider/revolution.extension.navigation.min.js",
"src/assets/js/revolution-slider/revolution.extension.parallax.min.js",
"src/assets/js/revolution-slider/revolution.extension.slideanims.min.js",
"src/assets/js/revolution-slider/revolution.extension.video.min.js"