The previous section of the carousel seems to be malfunctioning while the following section functions properly

This code snippet showcases my use of Bootstrap elements:

<div id="testimonial-carousel" class="carousel slide" data-ride="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
      <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
      <em>Pebbles, New York</em>
    </div>
    <div class="carousel-item">
      <h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
      <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
      <em>Beverly, Illinois</em>
    </div>
  <a class="carousel-control-prev" href="testimonial-carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

Despite ensuring that the id and href attributes are the same, the prev button still redirects to a new page instead of functioning as intended.

htmlcssbootstrap-4carousel

Answer №1

In the code provided, it seems that there are a few errors to be addressed. Firstly, make sure to close the first div with 

div id="testimonial-carousel"
. Additionally, in the first <a> tag, the # is missing in the href properties. It is also recommended to use the bootstrap4 template which can be found here if you are using this version. Lastly, if you want to run the carousel automatically, remember to change data-ride="false" to data-ride="carousel".

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d09130b130f">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <h1>Hello, world!</h1>

  <div id="testimonial-carousel" class="carousel slide" data-ride="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <h2>I love all dogs, regardless of breed</h2>
        <img class="testimonial-image" src="https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="dog-profile">
        <em>Pebbles, New York</em>
      </div>
      <div class="carousel-item">
        <h2 class="testimonial-text">My dog used to be so lonely, because of me! Instead of going for a walk with my pet,I eat garbage and watch zombie TV</h2>
        <img class="testimonial-image" src="https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="lady-profile">
        <em>Beverly, Illinois</em>
      </div>
      <a class="carousel-control-prev" href="#testimonial-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon bg-primary"></span>
      </a>
      <a class="carousel-control-next" href="#testimonial-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon bg-primary"></span>
      </a>
    </div>
  </div>

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="167c676373646f562538233827">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070041e061e02">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="452f343020373c05766b706b74">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2e312e2e3b2c70342d1e6f706f68706f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bda7bfa7bb">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
</body>

</html>

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

How can you dynamically add 'subtext' to a selectpicker in Bootstrap 4?

While working with Bootstrap-4, I am attempting to dynamically add 'data-subtext' next to all the option texts of a selectpicker. The code below successfully creates the list of options from an array, but I am struggling to include the data-subte ...

javascriptbootstrap-4

Tips for connecting radio buttons with a line

I have been working hard to implement the design shown in the image below using HTML and CSS. Here is what I have accomplished so far. https://i.sstatic.net/q2DHa.png .slider{ display: flex; margin: 0 auto; text-align: center; li { display: ...

htmlcssbootstrap-4

Is there a way to prevent a Bootstrap alert from disappearing on its own?

I'm having trouble with my button's alert feature. When clicked, the alert should display and stay visible until it's closed. However, on my website, the alert quickly flashes on the screen every time the button is pressed. On my jsfiddle ...

jqueryhtmlcsstwitter-bootstrapbutton

Is it possible to keep the screen in the same position using Javascript or jQuery, even after refreshing the page?

On my page for live scores results, there are two sections - the top section displays live match results and information, while the bottom section is dedicated to comments. When I submit a comment, the page refreshes and goes back up to the information sec ...

javascriptjqueryhtml

Navigation bar in HTML positioned on the right side of the webpage

My goal is to have a navigation bar on the right side of the page, taking up 250px, while allowing the main content to naturally adjust its size based on the window dimensions. I do want the main content to appear before the navigation in the HTML structur ...

htmlcss

Change button text with JS on click

My goal is to update the text on a button click, changing it from 'Copy' to 'Copied!' as part of a custom clipboard implementation. The code I'm currently using is as follows: HTML: <button id="copyButton2">Copy</button& ...

javascriptjqueryhtmlwordpress

Styling text and images with Bootstrap

Currently, I'm utilizing bootstrap to structure a row with 2 div elements. The first div contains an image while the second div holds text content. The challenge I am facing is aligning the text to the edge of the image. However, since the image does ...

htmlbootstrap-4

I'm looking for a Visual Studio add-in that can identify and flag any unused CSS classes or IDs within the entire solution

Exactly as the headline suggests. If not, what are some reliable online services you've tried for decluttering oversized stylesheets? ...

cssvisual-studioadd-in

Ways to eliminate HTML elements from one HTML content to another

The HTML code provided is as follows: <dl class="item-options"> <dd class="truncated" style="color:red;">DSOX3000-232, RS232/UART Serial Decode and Trigger - in <a onclick="return false" class="dots" href="#">...</a>/&l ...

jqueryhtmlperformance

Trouble accessing files in the assets folder of Angular 2

I am encountering a 404 error when attempting to access a local file within my application. I am unable to display a PDF that is located in a sub-folder (pdf) within the assets folder. I am using CLI. <embed width="100%" height="100%" src="./assets/pdf ...

htmlangular

Explain the concept of paragraph spacing in Word, including how it is

When working with my ms word 2010 document, I often use the includetext-function to incorporate HTML content: { INCLUDETEXT "test.html" } Here is an example of the HTML code that I am trying to include: <html> <head> <meta http-equiv="Co ...

htmlcssms-wordparagraph

Is there a way to retrieve the text of li elements without assigning them IDs?

I have a list of names with four items inside it. My goal is to display the text of the selected name while hiding the others. Only one name should be visible at a time on the page. <ul id="names"> <li>John</li> <li>Alex</ ...

javascriptjqueryhtml

How to position div in the middle of Electron/VUE application's screen?

I am struggling to center a container div on the screen. The technology stack I am using includes Electron, VUE, HTML, and CSS. Here is the code snippet I have attempted: <template > <div class="login background" style="height:100%" > ...

htmlcsswebpackvue.jselectron

Issues with Read More/Less functionality on a website - Troubleshooting with JavaScript, jQuery, and Bootstrap 4

I'm looking to create a simple, lightweight feature where clicking on a "read more" link will reveal a paragraph, and then clicking on a "read less" link will hide it again. My knowledge of JS and JQuery is quite limited. I'm currently utilizing ...

javascripthtmljquerybootstrap-4

Link numerous number-type inputs together

I'm looking to create a form with 6 input fields of type number. Each label will have specified min and max values. The challenge is that if I set one field to be between 0-50, for example in red, then the next field in yellow can't be from 49-70 ...

javascripthtmlreactjsinput

AngularJS Multiple Select fails to display preselected options

This morning, I dedicated a significant amount of time to finding a solution for assigning multiple values to an entity on my form. The scenario is as follows: I have an Entity named QualityData that can have various MechanismIdentifiers. After brainstor ...

angularjshtml

Listening for a click event on a newly added element using JQuery

I am relatively new to using JQuery and I have encountered an issue with adding a click event listener for a dynamically created button. When the user clicks on the first button, my function successfully adds a second button to a div. However, I am facing ...

jqueryhtmlonclick

Guide to importing a scss file into a scss class

Is there a way to apply a different theme by adding the "dark-theme" class to the body? I've attempted the following implementation: @import '../../../../node_modules/angular-grids/styles/material.scss'; .app-dark { @import '../../. ...

cssangularsass

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

javascripthtmlcssonmouseoveronmouseout

Building a Bootstrap Tooltip

Here is a brief code excerpt: link HTML CODE: <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a> asda example link I am puzzled by the discrepancies between my implementation and the one on W3Schools. I have used the sam ...

htmlcsstwitter-bootstrap