Bootstrap Javascript Not Loading in Hello World Simple Project

Bootstrap Javascript Not Loading in Hello World Simple Project - javascript

For some reason the JavaScript isn't displaying. I've checked the inspect element sources and it does in fact load correctly, however it isn't being applied. Any idea why? Thanks.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}"></script>
<title>Hello World</title>
</head>
app.js:
require('./bootstrap');
I'm specifically wanting dropdown menus to work and also the bootstrap carousel from the bootstrap website:
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>

You need recompile your assets.
npm run watch
or
npm run prod

Related

Images are not getting displayed on my website (HTML)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>AYNTK</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="templates\Slide 1.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="templates\Slide 2.jpg" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="templates\Slide 3.jpg" class="d-block w-100">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I am really new to designing with HTML and CSS... I took this code from Bootstrap website, trying to create a carousel and added the relative path of my images to the img tag as source. The images does not get displayed on the website.. What can possibly be the reason?

host your images on Google drive as in upload them on Google drive , make them available for anyone within Google drive then copy the link for each image , place the link wherever you want that image in your code with in image tags and it's done bro.
Your images will be loaded.
Are you hosting it some where or your running it locally in your browser bro

Change \ to / in src attribute of img tag as
<img src="templates/Slide 1.jpg" >

Bootstrap 5 Carousel showing only control and not contents

I am working on an HTML site and I am using the bootstrap 5 frameworks.
MY GOAL is to add bootstrap 5 Carousel in my section next to an image, like show in this image.
[https://imgur.com/a/JSvH2nw]
I have directly copied Carousel code from bootstrap docs here is the link
https://getbootstrap.com/docs/5.1/components/carousel/#slides-only
But for some reason, the Carousel is not showing any content it is only showing controls and slider buttons like this
https://imgur.com/a/26ItRqU
what m i doing wrong?
<html lang="de">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght#400;500;600;700;800;900&family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,300;1,400&display=swap" rel="stylesheet">
<!-- Bootstrap icon -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container pt-5">
<div class="row">
<div class="col-xl-8 col-lg-6 text-sm-center ">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://dummyimage.com/600x400/000/fff" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-xl-4 col-lg-6 custmcol mx-auto text-center">
<img class="img-fluid sidewhyusimg " src="https://dummyimage.com/400x400/000/fff" alt="cleaningImage">
</div>
<span class=" shadow-do text-center"><a href="#" class=" btn btn-primary mainbtn mx-auto mt-5 ">Mehr
erfahren</a></span>
</div>
</div>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap- -->
</body>
</html>

You need to replace ... with actual image link
where the img tag is in your html code
<img src="..." class="d-block w-100" alt="...">
like this :
<img src="..." class="d-block w-100" alt="...">
Update:
if you want carousel without image you can do that by following:
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000" >
<!-- <img src="https://cdn.pixabay.com/photo/2015/10/29/14/38/web-1012467__340.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<!-- <img src="https://img.freepik.com/free-vector/abstract-dotted-banner-background_1035-18160.jpg?size=626&ext=jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<!-- <img src="https://static.vecteezy.com/system/resources/thumbnails/001/234/358/small/modern-blue-halftone-banner-background.jpg" class="d-block w-100" alt="..."> -->
<div class="">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
Simple trick: just remove the img tags from the html and remove carousel-caption class from the caption text div
alternatively you can use owl carousel to create beautiful carousels just like what you want
Here is a jsbin link i created with your code.
https://jsbin.com/rufivuwije/edit?html,output

Note that the image address in your code should be changed to your own image address.
<img src="..." class="d-block w-100" alt="...">

About the slideshow. need to get first image of slideshow in the list

I'm getting the issue as the images are getting listed of the slideshow. i want to show first image of the list when i run the code and other images need to get by clicking manually.
please help me regarding this issue.
Thanks.

Just use this bootstrap 4 snippet for 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>My Carousel</title>
</head>
<body>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b2a1%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b2a1%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.90625%22%20y%3D%22217.803125%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b29d%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b29d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3046875%22%20y%3D%22217.803125%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_17a4115b2a7%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_17a4115b2a7%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22217.803125%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

How can I change favicons depending on Bootstrap carousel?

As I said in the title, I am trying to use JavaScript to update the favicon (shortcut icon) depending on Bootstrap Carousels.
For example, As the carousel changes to the second slide, 2.ico should be the favicon, as the carousel changes to the third slide, 3.ico should be the favicon. Here's what I have done.
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="shortcut icon" href="1.ico" type="image/x-icon">
</head>
<!-- bootstrap boilerplate html for carousels -->
<body>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
<script src="bootstrap.js">
<script>
if ( /*slide 2 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "2.ico");
}
if ( /*slide 3 is active*/ ) {
document.getElementsByTagName("link")[0].setAttribute("href", "3.ico");
}
</script>

You need to add an event listener to your carousel. You have more detail explanation in the docs page. But a simple javascript example for your HTML would be
<script>
$(document).ready(function() {
const myCarousel = document.getElementById('carouselExampleControls')
myCarousel.addEventListener('slid.bs.carousel', function() {
let currentIndex = $('.carousel-item.active').index() + 1;
// do something...
})
});
</script>

Lazy load / defer images in carousel inside modal in Boostrap 4.5

I’m trying to make it so my high resolution images (jpgs png gifs) that are inside of the modal carousel don’t load until the thumbnail is clicked on. Getting lazy load to work on carousels in modals seems extra tricky.
Like a newbie I assumed that functionality was built into Bootstrap 4.5. I’ve found many similar questions on here as well as other places (I can post them if anyone wants) but I can’t get any of them to work, some are outdated, unanswered, or not applicable to Bootstrap 4.5. The most promising one I’ve found is here:
https://github.com/verlok/vanilla-lazyload/issues/451
I like it because it’s vanilla js (although I’m not totally comfortable in jquery), but more importantly because it wouldn’t require me to drastically rewrite my code, the page is quite large and I’m hoping to be able to simply add a class to the images.
But regardless, this one won’t work for me either. Any advice (for a newbie)? I’ve pasted my (abbreviated) code below, and I’ve uploaded the files to github: https://github.com/epignosis567/mygithub/tree/main/lazyLoadBootstrap
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link href="../mystyle.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body id="page-top">
<div class="container-fluid">
<div class="row">
<!-- Media content -->
<div class="offset-sm-3 col-sm-9 p-4">
<div class="row d-flex justify-content-center">
<div class="col p-0 text-center" style="width: 100%; max-width: 500px">
<img class="img-fluid pb-3 myPics" src="img/01-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="0"/>
<img class="img-fluid pb-3 myPics" src="img/02-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="1"/>
<img class="img-fluid pb-3 myPics" src="img/03-thumb.png" width="99%" data-toggle="modal" data-target="#myModal" data-slide-to="2"/>
</div>
</div>
<!-- begin carousel modal-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog modal modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-body p-1 ">
<!-- begin carousel-->
<div id="myCarousel" class="carousel slide" pause="false" data-ride="false" data-interval="false" >
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100 lazy" data-src="img/01-4K.png" />
</div>
<div class="carousel-item">
<img class="d-block w-100 lazy" data-src="img/02-4K.png" />
</div>
<div class="carousel-item">
<img class="d-block w-100 lazy" data-src="img/03-4K.png" />
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end carousel-->
</div>
</div>
</div>
</div>
<!-- end carousel modal-->
</div>
<!-- End media content -->
</div>
</div>
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="../myscript.js"></script>
<!-- Lazy Load script -->
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload#17.3.1/dist/lazyload.min.js"></script>
<!-- Lazy Load script -->
<script>
var carouselLazyLoad = new LazyLoad({
elements_selector: ".lazy"
});
$('#carousel.carousel .carousel-item').each(function(){
let next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (let i=0;i<2;i++) {
next=next.next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}
// The following line tells LazyLoad that new elements have been added to the page
carouselLazyLoad.update();
});
</script>
</body>
<script>
//carousel script to open to the thumb that was clicked on
$('.myPics[data-slide-to]').on('click', function(){
$('#myModal').carousel($(this).data('slide-to'));
});
</script>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Bootstrap Javascript Not Loading in Hello World Simple Project - javascript

You need recompile your assets. npm run watch or npm run prod

Related

Images are not getting displayed on my website (HTML)

Bootstrap 5 Carousel showing only control and not contents

About the slideshow. need to get first image of slideshow in the list

How can I change favicons depending on Bootstrap carousel?

Lazy load / defer images in carousel inside modal in Boostrap 4.5

Categories

Resources