What could be causing the arrows on my card carousel to malfunction?

I'm facing some issues with my card carousel functionality. I'm in the process of learning JavaScript and I believe that's where the problem lies, but I'm unsure how to resolve it. Every time I click on the button/arrow for the carousel, instead of sliding, it causes a page reload. I've checked everything thoroughly, but there seems to be something I'm consistently overlooking. Here's the JavaScript code snippet:


(function($) {
    "use strict";

    $('.next').click(function(){ $('.carousel').carousel('next'); return false; });
    $('.prev').click(function(){ $('.carousel').carousel('prev'); return false; });

})(jQuery);

HTML:


<section class="container pt-3">
    <div class="row">
        <div class="col-lg-12">
            <h1>Vesti</h1>
        </div>
    </div>
</section>
<section class="carousel slide" data-ride="carousel" id="postsCarousel">
    <div class="container">
        <div class="row">
            <div class="col-12 text-md-right lead">
                <a class="btn btn-secondary-outline prev" href=""><i class="fa fa-lg fa-chevron-left"></i></a>
                <a class="btn btn-secondary-outline next" href=""><i class="fa fa-lg fa-chevron-right"></i></a>
            </div>
        </div>
    </div>
    <div class="container pt-0 mt-2">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="card-deck">
                    <div class="card h-100">
                        <div class="card-img-top card-img-top-250">
                            <img class="img-fluid" src="slike/img1.jpg" alt="Carousel 1">
                        </div>
                        <div class="card-body pt-2">
                            <h6 class="small text-wide p-b-2">Lorem</h6>
                            <h2>
                                <a href="">Lorem Ipsum</a>
                            </h2>
                        </div>
                    </div>
                    <div class="card h-100">
                        <div class="card-img-top card-img-top-250">
                            <img class="img-fluid" src="slike/img2.jpg" alt="Carousel 2">
                        </div>
                        <div class="card-body pt-2">
                            <h6 class="small text-wide p-b-2">Lorem</h6>
                            <h2>
                                <a href="">Lorem Ipsum</a>
                            </h2>
                        </div>
                    </div>
                    <div class="card h-100">
                        <div class="card-img-top card-img-top-250">
                            <img class="img-fluid" src="slike/img3.jpg" alt="Carousel 3">
                        </div>
                        <div class="card-body pt-2">
                            <h6 class="small text-wide p-b-2">Lorem</h6>
                            <h2>
                                <a href="">Lorem Ipsum</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card-deck">
                    <div class="card">
                        <div class="card-img-top card-img-top-250">
                            <img class="img-fluid" src="slike/img4.png" alt="Carousel 4">
                        </div>
                        <div class="card-body pt-2">
                            <h6 class="small text-wide p-b-2">Category 2</h6>
                            <h2>
                                <a href="">Lorem Ipsum</a>
                            </h2>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img-top card-img-top-250">
                            <img class="img-fluid" src="slike/img5.jpg" alt="Carousel 5">
                        </div>
                        <div class="card-body pt-2">
                            <h6 class="small text-wide p-b-2"><span class="pull-xs-right">12.04</span> Category
                                1</h6>
                            <h2>
                                <a href="">Lorem Ipsum</a>
                            </h2>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-img-top card-img-top-250">
                            <img class="img-fluid" src="slike/img6.jpg" alt="Carousel 6">
                        </div>
                        <div class="card-body pt-2">
                            <h6 class="small text-wide p-b-2">Category 3</h6>
                            <h2>
                                <a href="">Lorem Ipsum</a>
                            </h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
javascripthtmlcssbootstrap-4

Answer №1

Would you mind reviewing the code link provided below? It should resolve the issue you're facing. It seems that you may have forgotten to include bootstrap.min.js in your code.

Please click on this link to access the code: https://jsfiddle.net/yudizsolutions/xomswhnq/

 (function($) {
    "use strict";

    $('.next').click(function(){ $('.carousel').carousel('next');return false; });
    $('.prev').click(function(){ $('.carousel').carousel('prev');return false; });
    
})(jQuery);
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section class="container pt-3">
...
    </div>
  </div>
</section>

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

There seems to be a problem with the output when trying to display the message "You said ${reply}"

In the following code snippet, vanilla.js is being used with ATOM as the text editor and running on nodejs via terminal: 'use strict'; const Readline = require('readline'); const rl = Readline.createInterface({ input:process.stdin, ...

javascriptnode.jsterminal

Capturing the process exit event in Express: A guide

process.on('exit', async () => { console.log('updating') await campaignHelper.setIsStartedAsFalse() console.log('exit') process.exit(1) }) This code snippet is designed to trigger an update in the database before t ...

javascriptnode.jsexpressmongoose

Getting the WebElement object by manually clicking an element while in an active WebDriver Session

I am currently developing a Java Swing application for managing object repositories in Selenium scripts. This application will launch a WebDriver instance and allow users to manually navigate to the desired element for inspection. My goal is to capture th ...

javascriptseleniumxpathselenium-webdriverwebdriver

A guide on tapping into the creation event of an express session

Is there a way to determine when express creates a new session? Specifically, I am utilizing a mongodb session store. I have been encountering an problem related to multiple sessions being generated and I would like to identify the root cause by monitorin ...

javascriptnode.jsmongodbexpressexpress-session

`Ensuring uniform height for card titles`

So here's the scenario I'm dealing with: https://i.sstatic.net/4f7AR.png There seems to be an issue with alignment in the dark blue boxes when they are displayed in a flex container. The top box is not aligned properly with the one next to it. ...

cssreactjsmaterial-ui

Sizing labels for responsive bar charts with chart.js

I'm encountering a problem with my bar chart created using chart.js - the responsive feature works well for some elements but not all. Specifically, the labels on my bar chart do not resize along with the window, resulting in a strange look at smaller ...

javascriptjquerychart.js

Clicking on the ng-repeat will trigger the ng-click event, which populates all the data using ng

I need help including an HTML page using ng-click within ng-repeat. However, it is currently loading all the content for every ng-repeat element. My specific requirement is to only bind(ng-include) the clicked element. Please see the attachment for m ...

javascriptjqueryangularjshtml

Converting JSON to Date in ES6/TS with Angular 2

Below is the JSON data: let JSON_RESPONSE = `{"birthDates": ["2017-01-02","2016-07-15"]}` There is a TypeScript object called Children with an array of Date objects and an ES6 constructor: class Children { birthDates: Date[] = [] constructor(values ...

javascriptjsonangulartypescriptecmascript-6

Setting up Jest

I'm currently attempting to integrate the Jest Testing framework into my React Native project. Unfortunately, I am encountering an error message: Failed to retrieve mock metadata: /Users/me/Documents/Development/project/node_modules/global/window.js ...

javascriptreact-nativejestjs

The conversion of string to number is not getting displayed correctly when using console.log or document.write. Additionally, the concatenated display is also not functioning as intended

Being new to JS and HTML, this program was created to enhance my understanding of the concepts. I attempted a basic program to convert a string to a number in three different ways, but I am having trouble determining if the conversion actually took place. ...

javascripthtmltype-conversionconsole.logdocument.write

Perform an action upon a successful completion of an AJAX request using Axios by utilizing the `then()` method for chaining

I'd like to trigger a specific action when an ajax call is successful in axios save() { this.isUpdateTask ? this.updateProduct() : this.storeProduct() this.endTask() } When the ajax call to update or store the product succeed ...

javascriptajaxvue.jsaxios

"After executing a loop in JavaScript using jquery.ajax, the success function does not perform

Having trouble passing values from a PHP file to another function in Javascript. Even after a successful FOR LOOP, nothing seems to work within the SUCCESS block. Any suggestions? url1 = 'http://localhost:81/Dashboard/admin/inc/dashboard.php'; $ ...

javascriptphpjqueryajax

String iteration with Stylus

Is there a way to remove the brackets and the quotation marks when putting media queries into an object and looping over them? The code works well, but the stylus is causing the output to have unwanted characters. Here's my code: $maxBreakpoints = { ...

cssstringiterationstylus

Is there a way for me to have a table automatically scrolled to a specific column upon loading the HTML page?

My table contains a dynamic number of columns based on the months inputted from the database starting from a start_date and ending at an end_date. I have the current_date stored as a variable and want the table to load with the x-scrollbar positioned right ...

javascriptjqueryhtmlcss

The dialogue box fails to appear when accessed from the dropdown menu shadcn

I'm encountering an issue while using nextJS with shadcn. I am attempting to open a dialog from a dropdown menu, but instead of opening, it just closes the dropdown menu. My assumption is that I either need to utilize ref and states or position the al ...

javascriptreactjsnext.js

How can you tap into local storage in CSS while utilizing a chrome extension?

Can I access local storage from a Chrome extension's options file using CSS? Is it possible to use JavaScript to define a variable that can be utilized in CSS, or is local storage only accessible through JavaScript? If local storage is restricted to J ...

javascriptcssgoogle-chromegoogle-chrome-extensionlocal-storage

Utilizing Next.js routing to accommodate two distinct subdomains on a single website

I am looking to develop a new platform using Next.js (React.js and React-router). The platform will have two distinct spaces - one for users and another for the owner to manage all users. To achieve this, I plan on splitting both areas into two subdomains: ...

javascriptreactjsreact-routernext.js

Data loss occurs when the function malfunctions

Currently, I am working with Angular version 11. In my project, I am utilizing a function from a service to fetch data from an API and display it in a table that I created using the ng generate @angular/material:table command. Client Model export interfac ...

javascriptnode.jsarraysangulartypescript

How to transition from using a CDN to NPM for implementing the Google Maps JavaScript MarkerClusterer?

Currently integrating Google Maps JavaScript MarkerClusterer from CDN, I am considering transitioning to the NPM version for Typescript checking in my JavaScript files. However, I am encountering difficulties understanding how to make this switch. The docu ...

javascripttypescriptnpmgoogle-maps-api-3google-maps-markers

The Ionic framework has a defined variable

In my code, I have initialized a variable inside the constructor like this: constructor(public http: HttpClient) { this.data = null; this.http.get(this.url).subscribe((datas: any) => { this.dbUrl = datas[0].db_url2; console.log(this ...

javascripttypescriptionic2ionic3