bootstrap image carousel does not work in angular - javascript

The first image of the carousel appears in my page, however the buttons do not work and neither does the images move. I have tried using different types of bootstrap carousel but to no avail. I saw some answers which suggested to add jQuery and Bootstrap links to the top, so i tried that but didn't work either.
home.component.html
<header>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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="https://placeimg.com/1080/500/animals" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>My Caption Title (1st Image)</h5>
<p>The whole caption will only show up if the screen is at least medium size.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/arch" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://placeimg.com/1080/500/nature" 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>
</header>
index.html
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<meta charset="utf-8">
<title>CastleApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>

Bootstrap requires JQuery for this kind of actions. You either need to add jquery in your index.html or add it to angular-cli.json or angular.json (depending on your version of Angular):
Approach 1 (Recommended):
Run first this command to install both JQuery and Bootstrap:
$ npm install jquery bootstrap --save
Then add these lines to angular-cli.json or angular.json (depending on your version of Angular)
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Approach 2 (Not recommended):
Add the needed scripts in your index.html. Be careful though as you'll download these templates each time you reload the page.
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<meta charset="utf-8">
<title>CastleApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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>
</body>
</html>
More information from the documentation

Related

An event for bootstrap carousel on pause

Based on this documentation, I can't find any event to detect the carousel is paused. Is there any way to detect the bootstrap carousel pause?!
The carousel can be paused via different ways and I would like to show a paused icon whenever it's paused.
This is not really a direct answer but I do not think there is a pause event as such but you can detect the slide.bs.carousel and slid.bs.carousel events. Here when it has slid one, I do a pause and trigger a custom event pause-detect.
Now what good is this? If you know the events that trigger a pause ('mouseenter' for example) you can then monitor that event and trigger the custom one in that.
Update: added the mouseenter default pause event as an example, commented out on the slid event where that triggered pause.
$('#carouselExampleIndicators').carousel();
$('#carouselExampleIndicators')
.on('slid.bs.carousel', function(event) {
// do something…
let mycar = $(this);
// mycar.carousel("pause");
let currentSlide = $(event.relatedTarget);
/* mycar.trigger('pause-detect', [{
slide: currentSlide
}]);
*/
}).on('mouseenter', function(event) {
let mycar = $(this);
let currentSlide = mycar.find('.active');
mycar.trigger('pause-detect', [{
slide: currentSlide
}]);
}).on('pause-detect', function(event, mycarousel) {
// let mycar = $(this);
// let elemEvents = $._data(mycar.get(0), "events");
// console.log(elemEvents);
console.log("paused:", event.target); // carousel element
console.log("slide:", mycarousel.slide.get(0), mycarousel.slide.find('img').attr('alt'));
});
.carousel-item {
height: 200px;
border: solid lime 1px;
background-color: #AADDFF;
color: blue;
}
<!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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</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>
<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide"> mytext
</div>
<div class="carousel-item">
<img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Problems with IE - Webpage does not load well

I have my website completely finished and running well in Google Chrome, Firefox, and other browsers except in Internet Explorer.
the menu is not seen, it is broken. The margins are not applied, the text is totally without form, it is as if no bookstore is being loaded. The website is created with bootstrap 3.6 Jquery is used to handle most of the effects of the page.
Do you know if IE does not support jquery, bootstrap or any other library? All libraries on my site are loaded locally.
The content of the page is loaded by means of php, since all the content is in database. It works well in other browsers but not in IE. The idea is that it works well in everyone.
I use this css files in my head
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Nivamedia | Webdesign, Online Marketing, Mobile Apps</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/et-line-font.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/style.css">
<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'> -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800" rel="stylesheet" type='text/css'>
</head>
This is my navigation menu
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121888387-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-121888387-1');
</script>
<!-- preloader section -->
<div class="preloader">
<div class="sk-spinner sk-spinner-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
<!-- navigation section -->
<section class="navbar navbar-fixed-top custom-navbar bg-trans" role="navigation" id="navbar_menu">
<div class="container" id="navbar_container">
<div class="navbar-header" id="mobile_version_collapse-in" style="background-color: white !important;">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="toggle_button">
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="nav-brand" href="index.php"><img src="images/nivaLogo2.png" alt="logo" title="Nivamedia" id="main_logo"></a>
</div>
<div class="collapse navbar-collapse" id="menu_collapse">
<ul class="nav navbar-nav navbar-right" id="list_options">
<li class="list_options_Li"></li>
<li class="list_options_Li" id="first_li_main">Leistungen</li>
<li class="list_options_Li" id="second_li_main">Referenzen</li>
<li class="list_options_Li" id="third_li_main">Agentur</li>
<li class="list_options_Li" id="fourth_li_main">Kontakt</li>
</ul>
</div>
</div>
</section>
and I have this js libraries at the end of the body:
<script src="js/jquery.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/sweetalert.js"></script>
All other pages of the website has the same problem.
I'm not sure if this answer works for you but there seems to be a problem with your bootstrap.css file: https://nivamedia.ch/css/bootstrap.min.css (v3.3.5)
replace this line:
<link rel="stylesheet" href="css/bootstrap.min.css">
with an updated version of bootstrap (3.3.7)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Here is a screenshot of what I get in IE:
Also, I should make you aware that the files you are hosting are either corrupt or not encoded using UTF-8. Check the sites header is using UTF-8 if they are it's likely the bootstrap.css is corrupt, try downloading a new file and reuploading it.
Here is your bootstrap.css: https://nivamedia.ch/css/bootstrap.min.css
There is a lot of ��������������������� within.

Bootstrap Navbar Collapse Dropdown Menu

I am working on a Bootstrap Website with a dropdown box in the Navbar. When the Navbar is in collapse mode. The dropdown menu is not responding
Does anyone know why this would happen
The website can be found at http://horizonarb.co.uk/index.html
The code is as follows;
Many thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Horizon Arboriculture</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<script src="js/googleFonts.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="css/custom.css" rel="stylesheet"></link>
<!-- Font Awesome -->
<link rel="stylesheet" href="css/fontawesome/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-static-top" style="margin-bottom: 0px;">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<small>MENU</small>
</button>
<img src="img/front/HorizonArb_Tree_Transparent.png" class="noResize">
</div> <!-- class="navbar-header" -->
<div class="collapse navbar-collapse">
<ul class="nav nav-pills navbar-right">
<li class="active">Home</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Crown Thinning</li>
<li>Crown Lifting</li>
<li>Crown Reduction</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div> <!-- class="collapse navbar-collapse" -->
</div> <!-- class="container" -->
</div> <!-- class="navbar navbar-default" -->
<div class="container" id="topContainer">
<div class="row">
<div class="col-md-6 col-sm-6 col-sm-offset-3 col-md-offset-3 center marginTopThirty">
<img src="img/front/HorizonArb_Transparent.png" width="70%">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The dropdown is opening and closing, but it's hidden from view by the container. The following CSS should fix that:
.navbar-static-top .navbar-collapse.in {
overflow-y: visible; /* Bootstrap default is "auto" */
}

Bootstrap 3 Carousel is not sliding

So i've got a problem with the sliding.
It just won't slide!
The pictures are more like hovering each other or fading, but there won't be any sliding movement.
Does anyone got an idea how this comes and what i did wrong?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>and</title>
<!-- Bootstrap CSS -->
<link href="stylesheets/bootstrap.css" rel="stylesheet">
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/Slider/Earth_slider.png" alt="...">
<div class="carousel-caption">
<h2>First Slider</h2>
</div>
</div>
<div class="item">
<img src="images/Slider/Rosetta_slider.png" alt="...">
<div class="carousel-caption">
<h2>Second Slider</h2>
</div>
</div>
<div class="item">
<img src="images/Slider/Showreel_slider.png" alt="...">
<div class="carousel-caption">
<h2>Second Slider</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="javascript/bootstrap.min.js"></script>
<script src="javascript/jquery.min.js"></script>
<script>
$('.carousel').carousel({
interval: 1000
})​;
</script>
</body>
</html>
You have the basic Bootstrap.js without the Carousel component.
Install Bootstrap.js with Carousel.js/.css otherwise, you need to add Carousel.js to your page separately.
You can choose the desired bundle here:
http://getbootstrap.com/customize/
You have to init jQuery:
<script>
$(function() {
$('.carousel').carousel({
interval: 1000
})​;
}
</script>
Or try with markdown into your div
data-ride="carousel"
You need carousel.js called in your script. Also you need to define your Javascript like
<script>
$(function() {
$('.carousel').carousel({
interval: 2000
});
});
Here is the fiddle you can try.

Pinch Zoom Issue Phonegap Build stops working

I have a working pinchzoom in html using iscroll but when i build it for phonegap for ios and android it pinch zoom seems to stop to work.
The code below is my working code on html but when i try to port it to an ios and android app it stops working. Viewing it in a browser works.
I am not really good with javascript maybe somebody can help me fix this issue.
Here is my code.
<!DOCTYPE html>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link href="css/jquery.mobile.iscrollview.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.iscrollview-pull.css" media="screen" rel="stylesheet" type="text/css" />
<!-- Scripys -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',{
zoom:true, zoomMax: 4
});
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<!-- Start of Page - Map-->
<div id="map" data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<div id="logo">
<img src="images/logo-dark.png">
</div>
</div>
<!-- Start of Content - Schedule [Map] -->
<div data-role="content">
<div id="wrapper" style="width:100%">
<img class="mapimage" src="images/leaf_map.jpg"/>
</div>
</div>
<!-- End of Content -->
<!-- Start of Footer -->
<div data-role="footer" data-position="fixed" data-role="footer" data-tap-toggle="false">
<div class="banner">
<div>
<a href="promo.html" data-rel="dialog" data-transition="pop">
<span>This app was created by:</span>
<span><img src="images/iwebxpert-logo.png"></span>
<span>iWebXpert</span>
</a>
</div>
</div>
<!-- Navbar / Main Navigation -->
<div data-role="navbar">
<ul>
<li>
<img src="images/home-icon.png">
</li>
<li>
<img src="images/schedule-icon.png">
</li>
<li>
<img src="images/map-icon.png">
</li>
<li>
<img src="images/design-icon.png">
</li>
<li>
<img src="images/about-icon.png">
</li>
</ul>
</div>
</div>
<!-- End of Footer -->
</div>
<!-- End of Page - Map-->
<script>loaded();</script>
Since you are loading scripts from external sources (if you haven't already) make sure you add
<access origin="*" />
to your config.xml file

Categories