I'm having trouble with my carousel. I suspect it's the "link-rel" in the head tag that's causing the issue

Having trouble with my carousel - it's not navigating properly. When I check the console, it shows:

Failed to find a valid digest in the 'integrity' attribute for resource '' with computed SHA-256 integrity 'YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY='. The resource has been blocked.

I attempted to replace that line in my code, but then the carousel layout became broken and the issue wasn't resolved...

I'm confident the problem lies within the head tag since it was working fine previously. However, I haven't found a solution yet...

How can I permanently fix this? I need a reliable code that works consistently.

Here is my current <head> tag:

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="Style/reset.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-grid.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />


<link href="styles/myStyle.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">


<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="jScripts/jquery-1.12.0.min.js"></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="http://netdna.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="jScripts/JavaScript.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
javascriptcssbootstrap-4carousel

Answer №1

There seems to be an issue with the link integrity used for fetching bootstrap's CSS. To fix this, update your CDN path from: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

Change it to the one suggested on Bootstrap's official website: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Below is a functional code snippet:

/* Ensure image responsiveness */

.carousel-inner img {
  width: 100%;
  height: 100%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


  <link href="Style/reset.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

  <link href="bootstrap/css/bootstrap-reboot.css" rel="stylesheet" />
  <link href="bootstrap/css/bootstrap-grid.css" rel="stylesheet" />
  <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />


  <link href="styles/myStyle.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Assistant" rel="stylesheet">

  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--<script src="jScripts/jquery-1.12.0.min.js"></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="http://netdna.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script src="jScripts/JavaScript.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>


  <div id="demo" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="Los Angeles" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
      </div>
      <div class="carousel-item">
        <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="New York" width="1100" height="500">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></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

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Can the :after pseudo-element be modified when hovering, except when hovering over the after element itself?

Currently, my CSS code looks like this: class-name:hover:after {} Although it works well, the hover effect triggers even when hovering over the after portion of the element. Is there a way to modify the code so that the :hover only applies when hovering ...

csshover

Using Selenium to Perform Drag and Drop Operations on an SVG Object

I am attempting to drag a specific Webelement and drop it inside an SVG "container" that contains four elements, which are represented by polygons. Each polygon is labeled as g[1], g[2], and so on. Here is the HTML code of the container: <div class=&qu ...

javascriptseleniumselenium-webdrivercucumber

Distributing utility functions universally throughout the entire React application

Is there a way to create global functions in React that can be imported into one file and shared across all pages? Currently, I have to import helper.tsx into each individual file where I want to use them. For example, the helper.tsx file exports functio ...

javascriptreactjstypescripthelperreact-typescript

Angular 2 event emitter falling behind schedule

I am currently utilizing Angular 2 beta 6. The custom event I created is not being captured import {Component, OnInit, EventEmitter} from 'angular2/core'; import {NgForm} from 'angular2/common'; import {Output} from "angular2/core" ...

javascripttypescriptangular

"Implement a feature that allows for infinite scrolling triggered by the height of

Looking for a unique solution to implement a load more or infinite scroll button that adjusts based on the height of a div. Imagine having a div with a height of 500px and content inside totaling 1000px. How can we display only the initial 500px of the div ...

javascriptcss

There seems to be a problem with the bundle.js file caused by Uglify

I've just finished a project and now I'm ready to start building it. Utilizing a boilerplate project, I still find myself struggling to comprehend all the npm/webpack intricacies happening behind the scenes. Whenever I try to run "npm start", I k ...

javascriptnode.jsnpmwebpackuglifyjs

Is there a "Read more" link to expand the content on the page?

I am struggling to figure out why my JavaScript code for toggling between showing more text and less text is not functioning correctly. My goal is for the user to click on the "Show More" button to reveal additional text, and then be able to click on "Show ...

javascripthtml

Are there any inventive methods to dynamically populate HTML content directly from a URL?

My objective is not to avoid incorporating code (such as JavaScript) here, but rather to create a specific tool. Imagine I have a URL string like domain.com/something, which can produce either a single string like "John", or potentially JSON data dependin ...

htmlcss

Incorporate custom JavaScript files that contain classes within a Vue component

i am encountering an issue with a js file that contains classes with functions. i have a vue component and i want to create an instance of that class within it. (when directly copying the file into my <script> tag, everything works smoothly) myfile. ...

javascriptvue.jsnpm

Don't forget to save the selected date in the datepicker

I have a datepicker with two text fields: fromdate and todate. When I input the month of May and submit, then input another date, the default date should remain as May, instead of changing to the current month. Check out my code below. $(function() { ...

javascriptjquerycodeigniter

Styling a specific element in Svelte without needing a globally unique identifier

How can I target just the outer div using a css selector? <div> <div>...</div> <div>...</div> </div> <style> OUTER.DIV.ONLY { background: url(outer.png); } </style> Alternatively, I& ...

csssvelte

`Issues encountered with resizing the menu``

Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll ...

javascripthtmlcss

What is the most effective way to delete a single value from a key with multiple values stored in local storage?

This question has come up before, but the solutions provided didn't work for me, which is why I am asking it again. Currently, I am storing values in an array that is then stored in local storage. Here is the object: data.items - 0: {id: 190217270, ...

javascriptarraysreactjslocal-storage

Using URL parameters in Node.js applications

I am encountering an issue with my nodejs setup, and I am hoping someone can assist me. My challenge lies in trying to pass a parameter with a specific value to a page.html file, like this: page.html?s=1 However, I am encountering a problem where the pa ...

javascripthtmlnode.jshttp

Why does the onBlur event function in Chrome but fails to work in Safari?

I've encountered a problem with the onBlur event in react-typescript. To replicate the issue, I clicked the upButton repeatedly to increase the number of nights to 9 or more, which is the maximum allowed. Upon further clicking the upButton, an error m ...

javascriptreactjstypescriptreact-typescript

Having issues with InstaFeed (search) feature and jQuery Mobile

As a new developer, I am working on my first JQM site. However, I am facing an issue with my search input form where the instafeed photos do not show up until after a manual page refresh following submission. Despite numerous attempts, I cannot seem to res ...

javascriptjqueryinstagramjquery-mobile

javascript code to close slide div without hiding the setting icon upon clicking outside the div

Can you help me with an issue I am facing while implementing a slide div for creating theme color? The div works fine, but when I click outside of it, the div does not close. I have tried multiple solutions, but none seem to work. I have researched various ...

javascripthtmlcss

Getting all inline styles from an HTML string using JavaScript

(JavaScript) I am working with an html email template stored as a string. Is there a way to extract all the inline styles used in the template? For instance, if I have this input: <div style="min-width:300px;max-width:600px;overflow-wrap:break-word ...

javascripthtmlcssregex

Error: The function pajinate is not defined for jQuery([...])

I'm currently experiencing difficulties with the jQuery Pajinate plugin after migrating to a new host. The script was functioning properly on my previous hosting platform, but now I seem to be encountering some problems. Below is the code snippet: ...

javascriptjquery