What is needed to enable the functionality of the next and previous buttons? (Carousel Bootstrap)

I'm working on a text-only carousel using Bootstrap, but I'm facing an issue with the slider not functioning properly when I press the "next" and "prev" buttons.

Any assistance would be greatly appreciated!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="294b46465d5a5d5b4859691c0718071a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div id="slider-2 carousel-1" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="caption-2">
        <h5>Lorem ipsum, dolor sit amet</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit odit reprehenderit dolores, est minus. Iusto omnis corporis, optio, facere cupiditate illum earum molestiae vitae facilis repudiandae possimus sit impedit?</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="caption-2">
        <h5>Lorem ipsum, dolor sit amet</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit odit reprehenderit dolores, est minus. Iusto omnis corporis, optio, facere cupiditate illum earum molestiae vitae facilis repudiandae possimus sit impedit?</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="caption-2">
        <h5>Lorem ipsum, dolor sit amet</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit odit reprehenderit dolores, est minus. Iusto omnis corporis, optio, facere cupiditate illum earum molestiae vitae facilis repudiandae possimus sit impedit?</p>
      </div>
    </div>
  </div>
  
  <button class="carousel-control-prev btn-carousel" type="button" data-bs-target="#slider-2" data-bs-slide="prev">
      <span class="carousel-control-prev-icon seta-3" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
  </button>
<button class="carousel-control-next btn-carousel" type="button" data-bs-target="#slider-2" data-bs-slide="next">
      <span class="carousel-control-next-icon seta-4" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e4e4fff8fff9eafbcbbea5baa5b8">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapcarouselbootstrap-5

Answer №1

The issue you are facing could be related to the following:

<div id="slider-2 carousel-1"

Avoid using multiple IDs within a single element as it may not work correctly in all browsers.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f342b3429">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div id="slider-2" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="caption-2">
        <h5>Lorem ipsum, dolor sit amet</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit odit reprehenderit dolores, est minus. Iusto omnis corporis, optio, facere cupiditate illum earum molestiae vitae facilis repudiandae possimus sit impedit?</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="caption-2">
        <h5>Lorem ipsum, dolor sit amet</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit odit reprehenderit dolores, est minus. Iusto omnis corporis, optio, facere cupiditate illum earum molestiae vitae facilis repudiandae possimus sit impedit?</p>
      </div>
    </div>
    <div class="carousel-item">
      <div class="caption-2">
        <h5>Lorem ipsum, dolor sit amet</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore suscipit odit reprehenderit dolores, est minus. Iusto omnis corporis, optio, facere cupiditate illum earum molestiae vitae facilis repudiandae possimus sit impedit?</p>
      </div>
    </div>
  </div>
  
  <button class="carousel-control-prev btn-carousel" type="button" data-bs-target="#slider-2" data-bs-slide="prev">
      <span class="carousel-control-prev-icon seta-3" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
  </button>
<button class="carousel-control-next btn-carousel" type="button" data-bs-target="#slider-2" data-bs-slide="next">
      <span class="carousel-control-next-icon seta-4" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
  </button>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70121f1f04030402110030455e415e43">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

What specific @media query should be used to target Windows Phone 8+ with high resolution?

As per the insights shared in Brett Jankord's article on Cross Browser Retina/High Resolution Media Queries The information suggests that Windows 8 phones do not adhere to device-pixel-ratio media queries. Are there alternative methods to target W ...

csswindows-phone-8media-queries

HTML Browser Notice

My panel is designed to display different elements based on the browser being used. Specifically, I want different content to appear for IE, Firefox, and all other browsers. I don't want to create unique code for every browser, but rather streamline i ...

html

Welcome to the interactive homepage featuring multitouch authentication

I am looking to design a homepage that is interactive based on touch input. For instance, if the user uses 5 fingers to touch the screen, similar to the green circles in the image below, they will be redirected to a specific homepage. If they touch in a di ...

javascriptjqueryhtmliostouch

Make an angularJS PUT request using $http

After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...

javascripthtmlangularjs

PHP: Parsing HTML Tables with Headers and Irregular Body Rows Using Simple HTML Dom Parser

In an HTML table, the data is structured as follows: Header 1 has Row 1, Header 2 has Row 2 and Row 3, while Header 3 has Row 4, Row 5, and Row 6. <table> <thead> <tr> <th>Header 1</th> </tr> </thead& ...

phphtmlparsingsimple-html-dom

Tips for extracting an SVG path from HTML structure

This example I'm referencing is by Chris Coyer <svg version="1.1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;"> <defs> <g id="icon-image"> <path class="path1" d="M0 4v26h32v ...

htmlcsssvg

Guide on aligning text to the center in the navigation bar

I am currently experimenting with a dropdown navigation bar using pure CSS. However, I am facing issues with text alignment as it only aligns the dropdown text. Setting left: 50% and right: 50% does center the text, but it doesn't cover the width of m ...

htmlcss

Tips for updating the content of multiple tabs in a container with just one tab in Bootstrap 4.x

I am attempting to create two tab containers, where one is used to describe the content of a set of files and the other is used as a list of download links for the described files. Initially, I tried controlling the two containers using just one tab. I ca ...

javascriptjquerytwitter-bootstrapbootstrap-4

Changing the color of a Navlink when focused

Can anyone help me modify the background color of a dropdown nav-link in Bootstrap? I am currently using the latest version and want to change it from blue to red when focused or clicked. I have included my navbar code below along with additional CSS, but ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

expanding the input and duplicating the outcomes

I'm attempting to clone and add values to results in my project. Here's the link to what I have so far: http://jsfiddle.net/QNP3r/175/ Currently, it is functioning adequately with a table element. However, I'd like to make it work with a di ...

javascriptjqueryhtmlappend

Tips for concealing an entire row of a table with Jquery

I am currently working on a system that involves a table with anchor tags named original and copy in each row. By clicking on these anchor tags, we are able to update the database whether the item is an original or a copy using ajax. However, I am facing a ...

javascripthtmljqueryajaxlaravel-8

Unable to set the height for ul/div elements

I'm struggling to make my navbar appear when I click the "menu button". The div seems to be present in the code, but with a height of 0. Here's the relevant section of the code causing the issue. Any suggestions on how I can resolve this? var ...

javascripthtmlcssheight

Losing values due to custom $validator and getterSetter in AngularJS / UI Bootstrap

My objective is to create a UI Bootstrap datepicker with an input mask feature. The datepicker directive only validates dates selected using the popup window and not dates manually typed in by the user. To address this, I researched how to implement custo ...

javascriptangularjstwitter-bootstrapvalidationangular-ui-bootstrap

How can I populate a <select> tag with options dynamically using C# when the page loads?

I am using jQuery ajax to populate cascaded dropdown elements from a database. The issue I'm facing is that I can't seem to add the default "Select Program" option at the top of my first dropdown dynamically. Even though I tried using the prepend ...

c#jqueryhtmlajax

Struggling to locate elements with Python selenium

Just starting out with Selenium and attempting to extract data from a particular website: . This site stores information on hotels across the United States. My main objective is to compile this data into a CSV file where each entry would have a 'State ...

pythonhtmlseleniumweb-scraping

The default value for an input of type date should be set to the current date

I am working on a project that involves an input field with the type of "date". I have implemented Materialize to provide a user-friendly date picker. My goal is to set the default value of this input field to the current date when it is initialized. Here ...

htmltypescriptmaterialize

Tips for incorporating inline images with gatsby-image

Seeking Solution In my quest to query and showcase images with a maximum width of 350px, I am hoping to have them displayed inline-block for tablets and larger screens. Ideally, each image would sit next to one another and wrap if they exceed the parent d ...

javascriptcssreactjsimagegatsby

What is the best way to change the class of an input using jQuery when it is not empty?

Utilizing Bootstrap 4. I am working on a feature where I have four text inputs. If any of these inputs contain values, I want to add a specific class to a button. Upon clicking the button, my goal is to clear all input values and remove the aforementione ...

javascriptjqueryhtmltwitter-bootstrap

Website Responsiveness - inquiries for all needs

My first responsive website project has hit a roadblock, as I struggle to understand how to implement media queries effectively. Here's a snippet of my code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

cssmedia-queries

Vue - making one element's width match another element's width

Trying to dynamically adjust the innermost element's width to match the outermost element's width with Vue: <div id="banner-container" class="row"> <div class="col-xs-12"> <div class="card mb-2"> <div ...

javascripthtmlcssvue.js