Angular5 Carousel: Spinning Your Web Pages in Style

I am in the process of creating an angular carousel slide. I found the necessary HTML and CSS code from the Bootstrap carousel example, but I am struggling with the JavaScript implementation from the site. Below is the HTML code in my app.component.html:

 <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="first-slide" src="../assets/imgs/i1.jpg" alt="First slide">
                            <div class="container">
                                <div class="carousel-caption text-left">
                                    <h1>Example headline.</h1>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p>
                                        <a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="second-slide" src="../assets/imgs/i2.jpg" alt="Second slide">
                            <div class="container">
                                <div class="carousel-caption">
                                    <h1>Another example headline.</h1>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p>
                                        <a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img class="third-slide" src="../assets/imgs/i3.jpg" alt="Third slide">
                            <div class="container">
                                <div class="carousel-caption text-right">
                                    <h1>One more for good measure.</h1>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida
                                        at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p>
                                        <a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
        

Unfortunately, the carousel does not seem to be functioning, and neither do the next and previous buttons. I would greatly appreciate any assistance, as I am unable to determine the issue.

Answer №1

It appears that bootstrap was not integrated into your project correctly.

To incorporate Bootstrap 4 using npm, follow these steps:

npm install --save bootstrap

Include the CSS in your main HTML file:

@import "~bootstrap/dist/css/bootstrap.css"

Additionally, don't forget to include jQuery, Popper.js, and bootstrap.js

"scripts": [ "../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js" ],

For further guidance, you can visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ExpressJS Template Caching System

Encountering issues with template caching in my MEAN app. The navigation bar uses conditional logic to show/hide buttons based on user status. Upon page load, values are null or false until login (views, isLoggedIn). The problem arises post-login - despit ...

An issue occurred while attempting to access the Stripe checkout page

While working on my e-commerce website using next.js and stripe checkout, I encountered an error during the checkout process. I am utilizing the use-shopping-cart package, but suspect it may be causing the following response error from stripe-checkout: & ...

Using Bootstrap for Fixed Headers and Section Anchors

Despite my best efforts, I am struggling to resolve an issue with my fixed bootstrap navbar and internal links. I have experimented with various solutions, including using a JavaScript onscroll event listener and applying styles directly in the markup. How ...

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element). Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should ...

Creating content inside a list

When aiming for semantic code, I am currently debating the best way to write text within a list item. Should it be done as follows: <li> <p>This is my text</p> <p>This is another bit of text</p> </li> or <l ...

Tips for implementing sorting and filtering with Ajax and Json in PHP and MySQL applications

Greetings! I'm a newcomer in the world of software development, currently working on a software site. I've successfully built the pages and layout using HTML, CSS, and JavaScript, which was the easy part. Now, my challenge lies in creating main c ...

Naming conventions for initial layout DIVs: Best approaches

As a beginner in the realm of website design, I find myself at the early stages of constructing an HTML/CSS site based on a sketch I've created. In planning out the DIVs for the homepage, I am faced with questions about how to label them and determine ...

What is the best way to manage asynchronous functions when using Axios in Vue.js?

When I refactor code, I like to split it into three separate files for better organization. In Users.vue, I have a method called getUsers that looks like this: getUsers() { this.isLoading = true this.$store .dispatch('auth/getVal ...

Storing table rows in an array using Javascript

I've encountered a situation where I have a PHP script generating a string of table rows that is then returned via an AJAX request. This generated string consists of all the content enclosed within the tbody tags (<tr>1</tr><tr>2< ...

Express handlebars does not support client-side javascript

This is a unique template <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>My Amazing Website</title> ...

What is causing my JavaScript not to load properly within Bootstrap tabs?

I am facing an issue with my website which has Bootstrap 4 tabs implemented in a blade template. The problem arises when there are tabs within tabs, and upon clicking one tab, the slicks Javascript plugin that I created does not load on other tabs. It on ...

Getting rid of any excess space between columns within the same row in Bootstrap following a line

Exploring Bootstrap 3. When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious ...

Error in Node.js child_process: unable to access the property '_writableState' as it is undefined

I'm currently working on integrating ffmpeg's functionality into a Node.js API by utilizing the child_process library. However, I encounter an error when trying to pass data to ffmpeg's stdin pipe, specifically getting a TypeError: Cannot re ...

Issues with JQuery .attr method not functioning as expected

I'm having trouble with the .attr() function in jQuery. It doesn't seem to be changing the background-color of the div with the id "outline" like I expected. Here's an example of my code: <div id="outline"></div> And here is t ...

Selenium was unable to find the p tag element on the webpage

I apologize for reaching out to you all for assistance with such a basic task, but I have tried everything in my toolkit and still can't seem to figure it out. I've experimented with partial xpath, full xpath, and various CSS selectors. I am see ...

Navigating the world of cryptocurrency can be daunting, but with the right tools

Hello fellow developers, I've encountered some difficulties with cryptocurrency in my Nativescript project. I am attempting to incorporate the NPM package ripple-lib into my code, but I have been unsuccessful using nativescript-nodeify. How can I suc ...

Using JQUERY to fadeIn elements when clicking on a button and loading content from an external HTML

On my webpage, when a user clicks on a navigation link, instead of changing to a new page, the content from the linked pages loads into a div on the main page using JQuery and .load function. Both tests worked perfectly with this implementation. Now, I wa ...

What is causing the inefficacy of this particular SQL request method, while the alternative one proves effective?

It's surprising that the one not working is from the mssql package page. Why isn't it functioning on my machine? What am I missing here? The other example I found online works perfectly. On a side note - should these requests be done asynchronou ...

Tips on effectively utilizing a function within middleware in Node.js

I've successfully used the checkAuth function with this format: router.get('/login', checkAuth, function(){ }) Now I'm wondering how to utilize the checkAuth function with this format: routes file router.get('/login', con ...

CSS - Tips for affixing footer to the bottom of a webpage

Currently, I am working on a small personal project to brush up my HTML & CSS skills, and I am encountering some difficulties in fixing the footer of my website to the bottom of the page. You can view the site here. I have researched online and discovered ...