DevTools failed to load SourceMap / Carousel slides aren't sliding

Bootstrap Studio Help
1

I was designing my site and had a power outage and my VM shut down. i restarted my VM and since then get a javascript error:

“DevTools failed to load SourceMap: Could not load content for http://192.168.50.170:8080/bootstrap/js/bootstrap.bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE”

I uninstalled BSS, downloaded the latest version, created a pre-built template and without any changes tried to preview and yet getting the same error. I guess some of the files may have corrupted. Not sure how to rectify the error.

2

Due to this error, my carousel doesn’t transition at all. It just pops to the next item and lots of components are malfunctioning :frowning:

Screenshot 2021-03-18 232613
Screenshot 2021-03-18 2326131396×783 114 KB

There’s no custom html at all. I just select a pre-built theme, add a carousel, and select preview and still get the error.

3

On Windows 10 there is a selection on the computer setting to “Turn off all unnecessary animations (when possible)” which will effect some browsers.

Bootstrap now includes the prefers-reduced-motion class on certain animations or transitions and the carousel is one of the ones that can be effected by the setting mentioned.

6

I found the error on why my carousel slides aren’t sliding and most of the components aren’t working. When i checked the html code, “jquery” is loaded at the bottom of the page. How to i change BSS to load jquery at the beginning in the head along with the other “css” files rather than at the bottom?

Screenshot 2021-03-19 162229
Screenshot 2021-03-19 1622291501×1219 128 KB

7

If you prefer to load jquery your own way you could choose in the Settings - Bootstrap Settings to not load jquery and then paste the script tag in the Settings - Head Content.

It should make no difference though unless your VM cant find the local jquery for some reason.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

8

Just do a system restore to the day before your power glitch.

Then, go to Newegg or Amazon and buy a good 600-700 watt UPS (uninterruptible power supply.) APC makes good units. Unless you’re on a laptop with a battery, It’s absolute insanity to use a computer in 2021 without a UPS installed. Modern operating systems and software are constantly reading/writing data to the drives. Operating systems get updated at random times. Having a power failure in the middle of such operations can be catastrophic.

Next, make sure you have your BSS backup settings properly configured, so you don’t have to worry about losing your websites.

Setup a daily backup to cloud storage or an external device (USB drive or NAS) to backup all your work folders.

Setup a weekly backup to ghost your C: drive (if you’re on Windows) to separate drive using some good quality backup software (Acronis, etc)

Regularly test your backups by actually doing restores from them. Don’t just set them up and wait for something to go blooey before you try using them.

Redundancy and multiple backups to multiple locations on a regular basis are crucial elements of computer use, and should be the first thing people learn when they get their first computer.

Also, it’s a good idea to leave your computer on all the time. Long term shutting down and starting up of solid-state electronics causes temperature changes, which is what results in 99% of hardware failures that don’t occur within the first 24 hours of operation. You’ll go through system fans more often, but fans are a lot cheaper than motherboard, CPU, graphic card, RAM, SSD or other failures.

Windows has power saving features that will put monitors into low power mode where the screens are off, so you can even leave them on. I tend to turn my monitors off because monitors are so cheap I usually end up upgrading them before they actually fail.

Lastly, make sure you’re running a utility that keeps track of your hardware temps (particularly your CPU.) You need to be aware of when there is unusual or unwarranted high CPU usage (which can often indicate the presence of malware, viruses, cryptominers, etc.) You should know what temps your CPU idles at, and where it goes under particular tasks. This is one of the cheapest ways to ensure system longevity.

9

Carousel slides aren’t transitioning anymore. It’s so annoying. Don’t know where i am making the mistake. I have copied the html from the left pane and pasting it here…

<div data-ride="carousel" class="carousel slide" id="carouselContent" style="padding: 100px;" data-interval="2000">
<div class="carousel-inner">
    <div class="carousel-item">
        <p class="carousel_text">Paragraph 1</p>
    </div>
    <div class="carousel-item">
        <p class="carousel_text">Paragraph 2</p>
    </div>
    <div class="carousel-item active">
        <p class="carousel_text">Paragraph 3</p>
    </div>
</div>
<div><a href="#carouselContent" role="button" data-slide="prev" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"><i class="fa fa-chevron-left" style="color: var(--primary);"></i></span><span class="sr-only">Previous</span></a><a href="#carouselContent" role="button" data-slide="next" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"><i class="fa fa-chevron-right" style="color: var(--primary);"></i></span><span class="sr-only">Next</span></a></div>
<ol class="carousel-indicators">
    <li data-target="#carouselContent" data-slide-to="0"></li>
    <li data-target="#carouselContent" data-slide-to="1"></li>
    <li data-target="#carouselContent" data-slide-to="2" class="active"></li>
</ol>
10

Jeez…wow! Yes jedi master. Point noted.

11

The carousels sliding is action is javascript based. What happens if you drag a second carousel to the page as test?

12

You can always use javascript to check to see if jquery is loaded for the Bootstrap 4 carousel.

You also could check to see if prefers-reduced-motion:reduce is effecting the transition as it seems like that is your issue if you can cycle the carousel. This will overide the setting if you add it to a custom css stylesheet:

@media (prefers-reduced-motion:reduce) {
  .carousel-item {
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
  }
}
13

I have recreated my problem. Am sure it’ll be something silly. have a look at the URL below. It doesn’t slide, but the text just appears. Hope this helps in me explaining the problem.

JSFiddle - Code Playground

14

If I add the css code I posted the fiddle starts working.

@media (prefers-reduced-motion:reduce) {
  .carousel-item {
    transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    transition: transform .6s ease-in-out,-webkit-transform .6s ease-in-out;
  }
}
15

Thanks a ton! The carousel slides are now transitioning. I spent so much time trying to get it to work with various tweaks.

Why isn’t the default behaviour working? any ideas?

16

I think this article explains it much better than I can. You have to adjust your system settings to see the animations or transitions work and I do not know what system you have.

reduced motion

1 Like
17

wow!!! 5 Stars to you! Who would have thought windows settings affects the animations shown on browsers! Ironically, it was working on my previous VM before the crash. perhaps, i may have changed some settings unknowingly and hence was working.

Thank you all once again for your immense help. The support from the community alone is worth purchase the BSS tool.

1 Like