Is there a skilled coder available to troubleshoot this carousel's HTML code?

Hello, I am struggling with the code snippet below that uses Bootstrap to create a carousel. The next and previous buttons are not working properly.

<div id="testimonial-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
  <div class="carousel-item ">
    <h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on PetLove. Woof.</h2>
    <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
    <em>Pebbles, New York</em>
  </div>
  <div class="carousel-item active">
    <h2 >My dog used to be so lonely, but with PetLove'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>
</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>

Answer №1

Check out this code snippet to enhance your slider. The code includes an auto slide property for carousel options, and you can explore more carousel variations here

<div id="testimonial-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
  <div class="carousel-item ">
    <h2>Discovering love through TinDog: no longer sniffing around for it. Woof!</h2>
    <img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
    <em>Pebbles, New York</em>
  </div>
  <div class="carousel-item active">
    <h2 >My dog's loneliness vanished when they found their soulmate on TinDog. That's pawsitively amazing!</h2>
    <img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
    <em>Beverly, Illinois</em>
  </div>
</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>
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

Answer №2

You need to include the required libraries.

Insert the following code in your HTML file:

In the Head tag:
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
crossorigin="anonymous">

After the body Tag:

<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>

Make sure to maintain the order specified above.

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

The background color feature of a div is malfunctioning

I have encountered a strange issue with one of my Div elements. When I add text inside the div, the background color sticks to the text. However, if there is no text present, the background color disappears. Image with Text: https://i.stack.imgur.com/oYK ...

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

Tips on inserting text into form input fields

I need some guidance on how to enhance my form input functionality. The form currently consists of an input box and a submit button. When the user clicks submit, the form content is submitted and processed using javascript. What I am aiming for is to autom ...

Boxes maintain their height consistency even after a page refresh

I Implemented This Script to Ensure Same Height for Boxes <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"> $(document).ready(function(){ var highestBox = 0; $('.box').each(function(){ ...

How to create a listview with stylish rounded corners in jQuery mobile using CSS?

I'm attempting to customize the appearance of a jQuery mobile listview using CSS by adding a border radius to each item. Although things seem to be working mostly as expected, I've encountered a problem where only the first and last <li>&l ...

Why is the Google Map missing from the Bootstrap modal dialog?

I have multiple links on my website, each describing a different location with unique map data. I would like to display a modal bootstrap dialog with an embedded Google map when a user clicks on any of the links - ensuring that the location shown correspon ...

The elements on the webpage adjust their dimensions accordingly when zooming in or out

I have been facing an issue with the menu width on my webpage. When I zoom in and out, the width of the menu keeps changing. This problem only occurs in browsers other than IE. I have checked for fixed positioning but it appears to be using relative positi ...

Can Phonegap be utilized to port a PlayN game to iOS?

PlayN seems like a fantastic tool for creating Html5 games. I'm curious to know if there are any plans to ensure that the html/javascript output is compatible with Phonegap, ultimately allowing for the creation of an iOS executable? ...

Tips for implementing bslib package pop up window within a table displayed using rhandsontable in R Shiny

I am trying to implement the template from Laurent's answer on R Shiny - Popup window when hovering over icon in my code below, which involves integrating a popup window into a rhandsontable table. My goal is to display the popup window as depicted in ...

Struggling with making an Ajax and Jquery drop down menu work? Wondering how to use Javascript to retrieve a variable and then utilize it in PHP? Let's troubleshoot

Currently, I am utilizing Ajax/Jquery to present a dropdown menu with data retrieved from my SQL database. The process involves using javascript to obtain a variable that is then utilized in PHP. However, the function doesn't seem to be working as exp ...

Issue with Swiper JS: The buttons on pages three and beyond are unresponsive

I'm having trouble with the functionality of the "Back" button on pages 2 and 3 of my website. Can anyone help me figure out why it's not working? My goal is to create a website that resembles a game menu, similar to Deus Ex The Fall. I'm u ...

Expanding CSS transition for child elements as they increase in size

I am currently working with Vuetify and have encountered an issue with a v-list-item that contains a title and a subtitle. The problem is that the title is restricted to displaying only one line. If the title exceeds this limit, it gets cut off and shows " ...

Skip over the em tags while extracting the content from the class name using the Parsel selector

Is there a way to extract the contents of a specific class name, including what's inside and after 'em' tags? Refer to the image below for context: https://i.sstatic.net/FrYVv.png My attempted methods and the corresponding outcomes are as f ...

CSS: Position an element based on the size of the screen

I'm currently developing a program that will dynamically resize elements based on the viewer's screen size. The program is being built using JSP/SQL/XHTML/CSS, and I have a couple of queries. Is there a way to select a CSS file by storing the sc ...

The image selection triggers the appearance of an icon

In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected. Below are some image ...

Difficulty in altering the background of an input box

I am attempting to design a textbox that changes its background color to green when the correct answer is submitted, and to red for an incorrect answer. Unfortunately, nothing is happening for either option. document.querySelector('form').addE ...

Issue with JS jQuery: The click event on an li element within an expanded ul does not function properly

I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: https://i.sstatic.net/jXYz0.png The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that ...

Repositioning the final row to the bottom of the container in Bootstrap 4

I am working on a simple footer design that includes contact information in three rows. The first two rows should appear at the top, while the last row needs to be positioned at the very bottom of the container. To achieve this layout, I decided to use abs ...

Using the 'useMediaQuery' function from Material UI in a class component

Currently experimenting with Material UI's useMediaQuery feature to adjust the styles of a specific component, in this case the Button component. The objective is to eliminate the outline surrounding the button when the screen size decreases. The atte ...