unable to get stacked images and controls to work in bootstrap carousel

I have been tirelessly searching for a solution, but nothing seems to be working for me! I am facing an issue where two images are not sliding as expected, instead they are just stacked on top of each other. Additionally, the controls are not showing up, only the indicators at the bottom of the second image in the stack. I suspect that the problem might be related to how I have imported the Bootstrap CDN in my code. Any help regarding this would be greatly appreciated. Thank you!

Head:

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Carousel:

<div id="my-slider" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#my-slider" data-slide-to="0" class="active"></li>
                <li data-target="#my-slider" data-slide-to="1"></li>
              </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/mountains_sky_bali_sunrise_kintamani_indonesia_95497_1920x1080.jpg" alt="sample1" class="img-responsive"/>
                </div>
                <div class="item">
                    <img src="img/stormy-weather-sunset.jpg" alt="sample2" class="img-responsive"/>
                </div>
            </div>

            <!-- Controls -->
            <a class="carousel-control-prev" href="#my-slider" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#my-slider" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>

        </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

</body>
jqueryhtmlcssbootstrap-4

Answer №1

You integrated Bootstrap 3 carousel code and included necessary files from Bootstrap 4.

Check out the sample code below:

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

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

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>

<body>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="http://ackosoft.com/images/banner2.png" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://ackosoft.com/images/banner3.png" alt="Second slide">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    
    <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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>

For a live preview, visit this link:https://codepen.io/ziruhel/pen/KyRgjo

Answer №2

It appears that you are utilizing carousel code from Bootstrap 3.

If you want details on the Bootstrap 4 carousel, please visit this link.

For instance:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" 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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://via.placeholder.com/1600x800" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/1600x800" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://via.placeholder.com/1600x800" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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 CKEditor ensure that there is a paragraph tag within a div element?

Working on my current CMS, I have the need to include some custom HTML (which is functioning as expected): var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'>Edit Sidebar Text</div>"); The issue arises when atte ...

javascripthtmlckeditor

Retrieve the identifiers of various HTML elements and store them in an array

Within a div, there are multiple objects. I am trying to retrieve the IDs of all elements based on their class, knowing that the number of elements may vary. So far, my attempt has been: arr = $(".listitem #checkBox").hasClass('checkedItem').att ...

javascriptjqueryhtml

Angular 7 ng-select validation with required form control

Currently, I am utilizing the ng-select plugin for a dropdown search feature, but I am encountering issues with validation when a selection is not made from the dropdown menu. Here is how I have implemented it: <div class="form-group"> <ng-sel ...

angularbootstrap-4angular-ngselect

Feeling unsure about the concepts of scoping and the "this"

Recently, I came across a code snippet at this source: : var CounterButton = function(el){ this.$el = $(el); this.counter = 0; this.bindEvents(); this.myVal = 1; } CounterButton.prototype.bindEvents = function(){ this.$el.click(this. ...

javascriptjquery

Exploring the Best Methods to Retrieve the data-id in jstree JSON data

My goal is to retrieve the data-id from a dynamically generated tree form using JsTree (which has checkboxes), but unfortunately, my current approach isn't working. To iterate over the checkboxes and account for multiple selections, I am utilizing the ...

jqueryjstree

Execute Django code post webpage loading

Looking for a way to have the python code on the web page update every second if the database has changed, but currently it only runs on page load due to django functionality. function refresh(){ //Clear info boxes {% for TrackedObject in ...

javascriptpythonhtmldjangoweb

Having trouble with the parent folder functionality in JavaScript?

I am facing a challenge with my website's structure as I have an old setup that needs to be updated. http://localhost/enc/pdfs/ : This directory contains some html files that are uploaded via ajax to be displayed on a tabbed div using: var Tabs ...

javascriptjqueryajax

Conflicts arising between smoothState.js and other plugins

After successfully implementing the smoothState.js plugin on my website, I encountered an issue with another simple jQuery plugin. The plugin begins with: $(document).ready() Unfortunately, this plugin does not work unless I refresh the page. I have gone ...

javascriptjquerypluginssmoothstate.js

Creating a table with merged (colspan or rowspan) cells in HTML

Looking for assistance in creating an HTML table with a specific structure. Any help is appreciated! Thank you! https://i.stack.imgur.com/GVfhs.png Edit : [[Added the headers to table]].We need to develop this table within an Angular 9 application using T ...

htmlangulartypescripthtml-tablerow

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...

javascriptcssreactjsmaterial-ui

Error: The function $(...) does not contain a progressbar

I encountered a TypeError saying $(...).progressbar is not a function when loading the Gentelella - Bootstrap Admin Template Page. This error is affecting many jQuery processes. How can I resolve this? Error in my Code: (custom.js) // Progressbar if ($( ...

javascriptjquerytwitter-bootstrap

Determining the Jquery coordinates of the diagonal line within a table cell

Currently, I'm checking out this query on Stack Overflow titled "How to create a diagonal line within a table cell?" and found a helpful solution provided by user Galled. However, my concern lies in adjusting the position of the line. I am looking to ...

jqueryasp.netc#-4.0datatablecell

What is the best way to seamlessly transition from responsive design to mobile design?

While developing a single-page app, I encountered an issue with the layout when the screen width reaches a specific point. On narrow screens, I prefer to utilize the full width, but for wider screens, I want to limit the width for better readability. The l ...

htmlcsssafari

Tips for properly filling empty spaces in a flexbox layout using HTML

Is there a way to fill in the gap using CSS so that boxes automatically take up the empty spaces, even if they are of different sizes? How can I make sure the boxes adjust automatically as the screen size changes? .c1 { display: flex; flex-wrap: w ...

htmlcss

Using jQuery to extract a specific row from a dynamic table cell within an AJAX JSON operation

My challenge is to correctly identify a selected table row based on the button clicked within a table cell that has been generated from a string using jQuery, with the button class as the selector. I have browsed through similar questions and adjusted my ...

jqueryajaxbuttondynamichtml-table

Error message "undefined" appears when using jQuery Ajax response in Internet Explorer

Having issues with jquery ajax requests. <script type="text/javascript> $(document).ready(function() { $.ajax({ type: "POST", async: false, cache: false, url: "/ajax/script.php", data: { display: 'u ...

jqueryajaxinternet-explorerundefined

Updating the background image for a radio button

Is it possible to customize the background image within the active radio button from the default redmond to aristo? .ui-radiobutton-icon { background-image: url("/images/ui-icons_38667f_256x240.png.jsf"); } Can someone help with the correct syntax for t ...

cssjsf-2primefaces

The PHP script is failing to load the Bootstrap and CSS files in the HTML document

I developed a PHP application that functions as a plugin within a WordPress site. The application is located in the wp-content/plugins folder and is named SW. Within this folder, there are files like index.php and related folders containing bootstrap and C ...

phphtmlcsswordpressbootstrap-4

An effective method for finding a key in a multi-dimensional array or object based on its value using JavaScript and/or jQuery

I have a unique object structure that resembles the following: var data = {}; data.items = { name : 'apple', price : '$1.00' }; data.products = { name : 'banana', price : '$0.50' }; data.goods = { name : 'oran ...

javascriptjquerysearchobject

Using Angular 4 to retrieve a dynamic array from Firebase

I have a dilemma while creating reviews for the products in my shop. I am facing an issue with the button and click event that is supposed to save the review on the database. Later, when I try to read those reviews and calculate the rating for the product, ...

htmlangulartypescriptfirebase