Posted on Apr 17, 2019

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)

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"