How to make a automatic slideshow using javascript with fading? - javascript

enter image description here
I would like the photos to replace and fade after a time interval but currently, it is only able to fade in and out and the image are stack on top of one another.
The js code:
var current = 0,
slides = document.getElementsByTagName("img");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 3000);
The html code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section id="background1">
<!--Section to display content-->
<section id="content">
<!-- Images used to open the lightbox -->
<figure><img class="img-fluid" src="../Others/daylight-environment-forest-459225.jpg"></figure>
<figure><img class="img-fluid" src="../Others/nature-sky-twilight-grass-9198.jpg"> </figure>
<!--Display content-->
<div class="content">
<p class="small">Sustainability</p>
<p class="big">Starts with<br> You</p>
Learn more!
</div>
</section>
</section>
<script src="../bootstrap/slideshow.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--jquery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--popper js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!--Latest compiled js-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Any help will be greatly appreciated!!

You're using JavaScript for opacity... How about using just css to control the opacity & give you the fading effect that you're aiming for... like in the snippet below:
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
img {
animation: fadeAway 6s ease-in-out;
opacity: 0
}
#keyframes fadeAway {
from {
opacity: 1;
}
to {
opacity: 0.1;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<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>

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>

Bootstrap carousel not showing images

I'm trying to make a carousel which browses through the images in an image folder. A script automatically adds the items to the carousel based on the images present. The images are labelled 1, 2, 3, and so on.
But no matter what I try, the carousel doesn't show the image. I've tried converting the images to different format. The images are originally JFIF.
Here's my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Edexcel International GCSE (9-1) Human Biology Student Book | Scotch's Pirated Book Reader (PBR) v3.6</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body onLoad="load()" style="margin-top: 10px;">
<div class="container">
<div style="text-align: center; line-height: 2px;">
<h4>Image browser</h4>
<p>Coded by someone</p>
</div><br /><br />
<div id="pageCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox" id="carousel-inner">
<!-- GONNA BE FILLED BY THE SCRIPT -->
</div>
<a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/new.js"></script>
</body>
</html>
The new.js file has the script which loads the images into the carousel. A basic summary of what it does is:
'use strict';
function load()
{
var index = 2; // The first image is named 2.jfif
var carousel_innerHTML = "";
while (index < 278) // There are 277 images
{
carousel_innerHTML = carousel_innerHTML + makeEntry(index);
index++;
}
document.getElementById('carousel-inner').innerHTML = carousel_innerHTML;
}
function makeEntry(index)
{
return '<!-- AUTO GENERATED CODE --> <div class="carousel-item"><img class="d-block mx-auto" src="assets/' + index + '.jfif" alt="' + index + '" /></div>\n';
}
You were missing a couple things:
You need to add an active class to the first div in the carousel-inner div
You should initialize the carousel when finished loading the images. $('#pageCarousel').carousel({interval: 3000});
Here is a working example for you.
'use strict';
// for this example
var images = ["","","https://upload.wikimedia.org/wikipedia/commons/c/c9/10150811_677994762257483_131131840_n_677994762257483.jpg", "https://upload.wikimedia.org/wikipedia/commons/1/1b/10603847_756710051052620_5858255939401577860_o_756710051052620.jpg","https://upload.wikimedia.org/wikipedia/commons/6/6a/1073115_556203904436570_702830415_o_556203904436570.jpg"]
function load() {
var index = 2; // The first image is named 2.jfif
var carousel_innerHTML = "";
while (index < 5) // There are 277 images
{
carousel_innerHTML = carousel_innerHTML + makeEntry(index);
index++;
}
document.getElementById('carousel-inner').innerHTML = carousel_innerHTML;
$('#pageCarousel').carousel({interval: 3000});
}
function makeEntry(index) {
var first = index === 2 ? "active" : "";
return '<!-- AUTO GENERATED CODE --> <div class="carousel-item ' + first + '"><img class="d-block mx-auto" src="' + images[index] + '" alt="' + index + '" /></div>\n';
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<body onLoad="load()" style="margin-top: 10px;">
<div class="container">
<div style="text-align: center; line-height: 2px;">
<h4>Image browser</h4>
<p>Coded by someone</p>
</div><br /><br />
<div id="pageCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox" id="carousel-inner">
<!-- GONNA BE FILLED BY THE SCRIPT -->
</div>
<a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Optional JavaScript -->
<!-- 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</html>

How to smooth transition between elements of different heights in Bootstrap carousel

I am building a Bootstrap carousel for a project. The content of the slides have different heights. Currently, the transition animation for the different sized content is very choppy. I am wondering if there is any way to fix this transition and make it a bit more graceful/smooth as the carousel adjusts in height between the slides.
*Please note that I would like to maintain the different heights between the slides. They are sized that way for a reason that is essential to the project.
Please see an example of the choppy transition on JS Bin.
Here is the code for the carousel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Carousel</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</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" role="listbox">
<div class="item active">
<img style="margin: 0 auto;" src="http://placehold.it/300x300">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/250x250">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/160x600">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
It was chopping a lot because of the translation left/right so if u remove it it should be a lot better.
.carousel-inner .item {
opacity: 0;
transition: none;
transform: translate3d(0,0,0) !important;
}
.carousel-inner .active {
transition: opacity 1s ease-in-out;
opacity: 1;
}
but if u meant animate the height between different image sizes than u can use this jQuery:
$('.carousel').carousel().on('slide.bs.carousel', function (e) {
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({
height: nextH
}, 1000);
});
CODEPEN
Another way you can use javascript to done that.
Example
In that code I add event listener for listen slide.bs.carousel that triggered from bootstrap, get height of active item then animate carousel-inner element height.
<div class="item active">
<div class="img" style="background-image:url('http://placehold.it/300x300')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/250x250')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/160x600')"></div>
</div>
Add style
.item .img {
height:600px; //Maximum height
background-repeat:no-repeat;
background-position:center center;
}

Why does it jump to my else statement immediately?

Hey I am trying to add a class and an attribute to my nav elements and for some reason my code jumps to the else statement. Appreciate any help what so ever.
This is my Html
<!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>Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- Content Filter -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styleC.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<!-- 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="pageone">
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img id="logo" src="images/Logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">HOME <span class="sr-only">(current)</span></li>
<li>WORK</li>
<li>ABOUT ME</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>CONTACT</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="container">
<div class="jumbotron">
<h1>Hy, I’m Robert and I am a webdesigner based in Aarhus.</h1>
</div>
</div>
</div>
<div id="2" class="pagetwo">
<div class="container-fluid">
<main class="cd-main-content">
<div class="cd-tab-filter-wrapper">
<div class="cd-tab-filter">
<ul class="cd-filters">
<li class="placeholder">
<a data-type="all" href="#0">All</a> <!-- selected option on mobile -->
</li>
<li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
<li class="filter" data-filter=".color-1">Constructing Architecture</li>
<li class="filter" data-filter=".color-2">Photography</li>
<li class="filter" data-filter=".color-2">Multimedia Design</li>
</ul> <!-- cd-filters -->
</div> <!-- cd-tab-filter -->
</div> <!-- cd-tab-filter-wrapper -->
<section class="cd-gallery">
<ul>
<li class="mix color-1 check1 radio2 option3"><img src="img/img-1.jpg" alt="Image 1"></li>
<li class="mix color-2 check2 radio2 option2"><img src="img/img-2.jpg" alt="Image 2"></li>
<li class="mix color-1 check3 radio3 option1"><img src="img/img-3.jpg" alt="Image 3"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-4.jpg" alt="Image 4"></li>
<li class="mix color-1 check1 radio3 option2"><img src="img/img-5.jpg" alt="Image 5"></li>
<li class="mix color-2 check2 radio3 option3"><img src="img/img-6.jpg" alt="Image 6"></li>
<li class="mix color-2 check2 radio2 option1"><img src="img/img-7.jpg" alt="Image 7"></li>
<li class="mix color-1 check1 radio3 option4"><img src="img/img-8.jpg" alt="Image 8"></li>
<li class="mix color-2 check1 radio2 option3"><img src="img/img-9.jpg" alt="Image 9"></li>
<li class="mix color-1 check3 radio2 option4"><img src="img/img-10.jpg" alt="Image 10"></li>
<li class="mix color-1 check3 radio3 option2"><img src="img/img-11.jpg" alt="Image 11"></li>
<li class="mix color-2 check1 radio3 option1"><img src="img/img-12.jpg" alt="Image 12"></li>
<li class="gap"></li>
<li class="gap"></li>
<li class="gap"></li>
</ul>
<div class="cd-fail-message">No results found</div>
</section> <!-- cd-gallery -->
</div>
</div>
<div class="pagethree">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<h2 class="text-center about-txt"><a id="3" href="#">About Me</a></h2>
<img src="images/Profile-image.png" class="img-responsive img-rounded center-block" alt="My Face :)">
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="text-center about">To tell you a little more about me, I have decided to make this short
personal description. I love doing many things: design, photography, architecture, coffee
and all of these traits represent me. I thrive in a social environment, loving the interaction between
co-workers and clients. People say I’m funny and this makes working with me an ease.</p>
</div>
</div>
</div>
</div>
<div class="pagefour">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="jumbotron">
<h2>Feel free to contact me at <span>info#freirobert.com</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p>You can also find me on social media on the links below</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i>
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
<i class="fa fa-behance-square fa-2x" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container-fluid">
<p class="text-center">©Robert Frei 2016</p>
</div>
</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>
<!-- Resource Content Filter -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/jquery.mixitup.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script src="js/add.js"></script>
</body>
</html>
The css to the item required
.pagetwo {
background-color: white;
background-size: cover;
}
.darkNav {
background-color: black !important;
}
And my JS which does not work....
$(function () {
var header = $('.navbar-default .navbar-toggle .icon-bar');
var logo = $('#logo');
var hieghtThreshold = $(".pagetwo").offset().top;
var hieghtThreshold_end = $(".pagetwo").offset().top + $(".pagetwo").height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= hieghtThreshold && scroll <= hieghtThreshold_end ) {
console.log("WORKS!!!!!");
//logo.attr("src","/images/Logo-black.png");
//header.addClass("darkNav");
} else {
alert("IT BROKE!");
//logo.attr("src","/images/Logo.png");
//header.removeClass("darkNav");
}
});
})
This will execute every time when the window is scrolled. Go to the magic threshold and see that the WORKS!!!!! comment comes in the console. Replacing alert() with console.log() will throw nice light on it.
The $(window).scroll() fires continuously while scrolling the page. So since you have used alert() it keeps firing every time you scroll, and shows you BROKE!.

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.

Categories