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

github logo ・1 min read

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.

twitter logo DISCUSS (4)
markdown guide
 

Can you share some of the specific code involved?

 

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>
 

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"

           ],

please use proper formatting or a github.gist to post long sections of code

Classic DEV Post from May 2

The Art of Programming

One of the most consolidated misconceptions about programming, since the early days, is the idea that such activity is purely technical, completely exact in nature, like Math and Physics. Computation is exact, but programming is not.

RamAvtarStint profile image