DEV Community

RamAvtarStint
RamAvtarStint

Posted on

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.