DEV Community

RamAvtarStint
RamAvtarStint

Posted on

2 2

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

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)

Collapse
 
ben profile image
Ben Halpern

Can you share some of the specific code involved?

Collapse
 
ramavtarstint profile image
RamAvtarStint • 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>
Collapse
 
smitavorbitech profile image
smita-vorbitech

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"

           ],
Thread Thread
 
andreanidouglas profile image
Douglas R Andreani

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

Collapse
 
macupryk profile image
Mathieu Cupryk

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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay