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"

],

Douglas R Andreani • Sep 27 '19

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

Mathieu Cupryk • May 26 '20

Hi Ram, can you share your application on github? I would like run your source code/

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

DEV Community

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

Top comments (5)

Read next

Using Storybook with Angular and Vite 🎨

The Article I Took So Long to Write: Concepts about Reactive Programming and RxJS

Mastering CSS BEM naming with Practical Examples: Pure HTML, Angular, and Next.js

Micro front-end module federation: Aplicação extensível