Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Marvin Benno
7,524 PointsBootstrap 4 Carousel problem.
I've created several bootstrap carousels but the last one in the last article with the h1 "Svar pÄ FrÄgor" is partially working. The carousel is sliding properly but the buttons cannot be used to scroll manually. I have copied and pasted the exact same code as in the working carousel but the problem is still there. Can anyone figure out why the carouselbuttons are not working in the last article...?
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
</title>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<!-- Start own modal -->
<!-- slide 1 populÀrt -->
<div class="b-modal-prop b-modal1">
<div class="m-content-prop text-center">
<!-- Video inside Modal -->
<iframe id="iframe1" width="853" height="480" src="https://www.youtube-nocookie.com/embed/mKeb3ahVm2Q?rel=0&controls=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<!-- slide 2 populÀrt -->
<div class="b-modal-prop b-modal2">
<div class="m-content-prop text-center">
<!-- Video inside Modal -->
<iframe id="iframe2" width="853" height="480" src="https://www.youtube.com/embed/OWh7OoD-Huk?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<!-- slide 3 populÀrt -->
<div class="b-modal-prop b-modal3">
<div class="m-content-prop text-center">
<!-- Video inside Modal -->
<iframe id="iframe3" width="853" height="480" src="https://www.youtube.com/embed/8EqH4pslfwo?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<!-- Background fade when modals opens -->
<div class="modal-background-fade">
</div>
<!-- End own modals -->
<body>
<div class="container">
<nav class="navbar navbar-expand navbar-dark bg-dark row justify-content-between fixed-top">
<img class="logo col-1" src="../img/skisslogo.jpg">
<div class="col-1 text-center">
<h6>
meny
</h6>
</div>
</nav>
</div> <!-- End header -->
<div class="jumbotron jumbotron-fluid text-center">
<h1 class="display-1"> VĂ€lkommen till SneakPeak </h1>
<div class="container">
<p class=""> Sneakpeak Àr en hemsida för dig som Àr nyfiken pÄ den kristna tron, har frÄgor kring den kristna tron eller har hamnat pÄ sidan av nÄgon annan anledning. HÀr pÄ SneakPeak Àr tanken
att du ska fÄ inspireras, fÄ se vad Gud gör i vÀrlden och förhoppningsvis fÄ svar pÄ nÄgra frÄgor som du kanske undrar över. Den kristna tron har lÀnge presenterats som lagisk, trÄkig och "religös". Detta Àr inte sanningen om den kristna tron, den sanna kristna tron handlar om en personlig kÀrleksrelation med Gud sjÀlv. Det mest kraftfulla, uppfyllande och livsgivande som
finns pÄ denna planet. Vi ber att du ska fÄ utmanas i dina tankar och fÄ öppna upp dig att ta emot av den övervÀldigande kÀrleken som Gud har för dig. Han har skapat dig med ett syfte
och Gud har en underbar plan för ditt liv. ENJOY! </p>
</div>
</div>
<article id="fade1" class="my-5 text-center hiddenProp hidden">
<div>
<h2 class="display-2 mb-5"> PopulÀrt </h2>
</div>
<div class="mb-5">
<p> De mest populÀra klippen denna mÄnad en blandning mellan Mirakler, Vittnesbörd och Svar pÄ frÄgor. </p>
</div>
<!-- Bootstrap carousel för populÀrt -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-xl-6 mx-auto">
<div id="my-slider" class="carousel slide" data-ride="carousel">
<!-- Slide 1 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img id="slide-1" class="d-block w-100" src="../img/thumb-mirakler.jpeg" alt="First slide">
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<a id="slide-2">
<img class="d-block w-100" src="../img/thumb-populÀrt.jpeg" alt="Second slide">
</a>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<a id="slide-3">
<img class="d-block w-100" src="../img/thumb-svarpÄfrÄgor.jpeg" alt="Third slide">
</a>
</div>
<!-- Buttons -->
</div>
<a class="carousel-control-prev" href="#my-slider" 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="#my-slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- end my slider div -->
</div>
</div>
</div>
<!-- End of bootstrap carousel för populÀrt -->
</article>
<article id="fade2" class="my-5 text-center hiddenProp hidden">
<div class="mb-5">
<h2 class="display-2"> Mirakler </h2>
</div>
<div class="container mb-5 fadeIn">
<p> Mirakler Àr nÄgot som man hört om i sagohistorier man kan mirakler hÀnda pÄ riktigt? Det vi fokuserar pÄ mest hÀr pÄ SneakPeak Àr Mirakler i form av helande. Helande
var en naturlig del av Jesu vardag och vi som kristna Àr kallade att leva i detsamma. Ett helande handlar helt enkelt om att Guds kraft genom en mÀnniska
mirakulöst ÄterstÀller en kropsdel till dess orginala skick. TÀnk dig en bilreperation fast övernaturligt och utan reservdelar ;).
PoÀngen med helande Àr alltid Guds kÀrlek för individen och att han vill visa sitt goda hjÀrta mot oss genom andra mÀnniskor. </p>
</div>
<div class="container-fluid justify-content-center pt-4 row"> <!-- container for the whole section-->
<div class="col-4 d-none d-md-block mr-5"> <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
<h2 class="mb-4 text-center"> Titel pÄ video</h2>
<h5 class="container fadeIn"> beskrivning av videon osv olor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
</div>
<div class="col-md-4"> <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
<h2 class="mb-4 d-md-none text-center"> Titel pÄ video</h2>
<img src="../img/thumb-mirakler.jpeg">
</div>
<a href="#">
<h5 class="mt-4 offset-4 d-none">
Se mer
</h5>
</a>
</div>
</article>
<article id="fade3" class="my-5 text-center hiddenProp hidden">
<div class="mb-5">
<h2 class="display-2"> Vittnesbörd </h2>
</div>
<div class="container mb-5 fadeIn">
<p> Vittnesbörd i sin definition betyder "Ett uttalat eller skrivet statement om att nÄgot Àr sant eller ett vittnesbörd Àr ett bevis pÄ att nÄgot Àr sant.
I denna del sÄ kommer du fÄ se olika personer dela sina personliga vittnesbörd om hur de har fÄtt uppleva Gud eller andra vittnesbörd om vad Jesus har gjort.
Att fÄ höra nÄgon annans genuina story Àr alltid inspirerande och ögonöppnande. </p>
</div>
<!-- Start carousel for vittnesbörd -->
<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">
<div class="container-fluid justify-content-center pt-4 row"> <!-- container for the whole section-->
<div class="col-4 d-none d-md-block mr-5"> <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
<h2 class="mb-4 text-center"> Titel pÄ video</h2>
<h5 class="container fadeIn"> beskrivning av videon osv bswulor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
</div>
<div class="col-md-4"> <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
<h2 class="mb-4 d-md-none text-center"> Titel pÄ video</h2>
<img src="../img/thumb-vittnesbörd.png">
</div>
<a href="#">
<h5 class="mt-4 offset-4 d-none">
Se mer
</h5>
</a>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid justify-content-center pt-4 row"> <!-- container for the whole section-->
<div class="col-4 d-none d-md-block mr-5"> <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
<h2 class="mb-4 text-center"> Titel pÄ video</h2>
<h5 class="container fadeIn"> beskrivning av videon osv bswulor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
</div>
<div class="col-md-4"> <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
<h2 class="mb-4 d-md-none text-center"> Titel pÄ video</h2>
<img src="../img/thumb-vittnesbörd2.png">
</div>
<a href="#">
<h5 class="mt-4 offset-4 d-none">
Se mer
</h5>
</a>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid justify-content-center pt-4 row"> <!-- container for the whole section-->
<div class="col-4 d-none d-md-block mr-5"> <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
<h2 class="mb-4 text-center"> Titel pÄ video</h2>
<h5 class="container fadeIn"> beskrivning av videon osv bswulor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
</div>
<div class="col-md-4"> <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
<h2 class="mb-4 d-md-none text-center"> Titel pÄ video</h2>
<img src="../img/thumb-vittnesbörd3.jpeg">
</div>
<a href="#">
<h5 class="mt-4 offset-4 d-none">
Se mer
</h5>
</a>
</div>
</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>
<!-- End carousel for vittnesbörd -->
</article>
<article id="fade4" class="my-5 text-center hiddenProp hidden">
<div class="mb-5">
<h2 class="display-2"> Svar pÄ frÄgor </h2>
</div>
<div class="container mb-5 fadeIn">
<p> Att vara kristen handlar inte om att vara övertygad om att Gud Àr pÄ riktigt eller att ha alla bevis framför sig. Den kristna tron handlar om att fÄ ett personligt kÀrleksmötem
med Jesus som sen leder in i en kontant kÀleksrelation med Gud sjÀlv. Trotts detta tror vi pÄ SneakPeak att Svar pÄ frÄgor Àr en vÀldigt viktig del. Att fÄ svar pÄ svÄrare frÄgor
eller olika tankar som man har angÄende den kristna tron hjÀlper Àn att slappna av i att den kristna tron inte Àr baserad pÄ massa galenskaper som skrevs för 2000Är sedan.
Det öppnar upp för att kunna lÀgga ner sina vapen och alla fördomar man har och faktiskt ödmjukt söka Gud för ett personligt möte med honom, vi hoppas ni tycker om denna del.</p>
</div>
<h1>shaba</h1>
<!-- Start carousel for svar pÄ frÄgor -->
<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">
<div class="container-fluid justify-content-center pt-4 row"> <!-- container for the whole section-->
<div class="col-4 d-none d-md-block mr-5"> <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
<h2 class="mb-4 text-center"> Titel pÄ video</h2>
<h5 class="container fadeIn"> beskrivning av videon osv bswulor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
</div>
<div class="col-md-4"> <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
<h2 class="mb-4 d-md-none text-center"> Titel pÄ video</h2>
<img src="../img/thumb-svarpÄfrÄgor.jpeg">
</div>
<a href="#">
<h5 class="mt-4 offset-4 d-none">
Se mer
</h5>
</a>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid justify-content-center pt-4 row"> <!-- container for the whole section-->
<div class="col-4 d-none d-md-block mr-5"> <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
<h2 class="mb-4 text-center"> Titel pÄ video</h2>
<h5 class="container fadeIn"> beskrivning av videon osv bswulor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
</div>
<div class="col-md-4"> <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
<h2 class="mb-4 d-md-none text-center"> Titel pÄ video</h2>
<img src="../img/thumb-svarpÄfrÄgor2.jpeg">
</div>
<a href="#">
<h5 class="mt-4 offset-4 d-none">
Se mer
</h5>
</a>
</div>
</div>
<div class="carousel-item">
<div class="container-fluid justify-content-center pt-4 row"> <!-- container for the whole section-->
<div class="col-4 d-none d-md-block mr-5"> <!-- div for Titel and description of video that shows in the MD breakpoint or larger. -->
<h2 class="mb-4 text-center"> Titel pÄ video</h2>
<h5 class="container fadeIn"> beskrivning av videon osv bswulor. Praesent scelerisque nisi risus, quis scelerisque neque varius eget. In velit enim, vulputate a malesuada pretium, ultricies sed nulla. </h5>
</div>
<div class="col-md-4"> <!-- div for Titel and description of video that shows in breakpoints lower than MD -->
<h2 class="mb-4 d-md-none text-center"> Titel pÄ video</h2>
<img src="../img/thumb-svarpÄfrÄgor3.jpeg">
</div>
<a href="#">
<h5 class="mt-4 offset-4 d-none">
Se mer
</h5>
</a>
</div>
</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>
<!-- End carousel for svar pÄ frÄgor -->
</article>
<div class="container-fluid">
<footer class="row justify-content-between navbar sticky-bottom navbar-expand-sm bg-dark">
<div class="col-xs-1 bg-info">
© All rights reserved
</div>
<div class="col-xs-1 text-center bg-info">
<h6>
Code by: Marvin Benno
</h6>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="../JavaScript/javascript.js"></script>
</body>
</html>
<!-- Extra code -->
<!-- Modal close button
<button id="button-close" type="button" class="close pr-2 pt-1" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
-->
CSS
.b-modal-prop {
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center; }
.modal-background-fade {
background-color: rgba(0, 0, 0, 0.9);
width: 100%;
height: 100vh;
display: flex;
position: fixed;
z-index: 3; }
.m-content-prop {
width: 100%;
height: 0px;
background-color: black;
z-index: 4; }
body {
padding-top: 125px; }
.logo {
border-radius: 50%; }
.hiddenProp {
transition: all 1.8s ease; }
.hidden {
opacity: 0; }
article {
height: 800px; }
/*# sourceMappingURL=main.css.map */
JAVASCRIPT
// Fade in text with JQUERY
var docElement = $(document);
docElement.scroll(function() {
if (docElement.scrollTop() > 1 && $("#fade1").hasClass("hidden")) {
$("#fade1").removeClass("hidden")
}});
docElement.scroll(function() {
if (docElement.scrollTop() > 950 && $("#fade2").hasClass("hidden")) {
$("#fade2").removeClass("hidden")
}});
docElement.scroll(function() {
if (docElement.scrollTop() > 1670 && $("#fade3").hasClass("hidden")) {
$("#fade3").removeClass("hidden")
}});
docElement.scroll(function() {
if (docElement.scrollTop() > 2390 && $("#fade4").hasClass("hidden")) {
$("#fade4").removeClass("hidden")
}});
// End fade in text with JQUERY
// Modal ---------------------------
$(".b-modal-prop").hide();
$(".modal-background-fade").hide();
var modal = $(".b-modal-prop");
var content = $(".m-content-prop");
// Show modals popup for video
$("#slide-1").click(function(){
$(".b-modal1").css("display","flex")
$("#my-slider").carousel('pause');
$(".modal-background-fade").show();
});
$("#slide-2").click(function(){
$(".b-modal2").css("display","flex")
$("#my-slider").carousel('pause');
$(".modal-background-fade").show();
});
$("#slide-3").click(function(){
$(".b-modal3").css("display","flex")
$("#my-slider").carousel('pause');
$(".modal-background-fade").show();
});
// Close "button" in popup Modal
/* $("#button-close").click(function(){
$(".background-modal").hide();
$("#my-slider").carousel('cycle');
});
*/
// Close popup modal on click outside of Modal and pause video
$(window).mouseup(function(event){
var checker = $(".modal-background-fade");
if (event.target != content && checker.css("display") != "none" ) {
modal.hide();
$("#my-slider").carousel('cycle');
$(".modal-background-fade").hide();
var src = $("#iframe1").attr("src");
$("#iframe1").attr('src',src);
var src = $("#iframe2").attr("src");
$("#iframe2").attr('src',src);
var src = $("#iframe3").attr("src");
$("#iframe3").attr('src',src);
}
});
// ---------------------------------------
// ----- Notes----------------
// * Fixa att videon pausas nÀr mans stÀnger modal fönstret
// * Fixa layout med stor video och att close "button" ligger rÀtt.
// * Se till att allt funkar smidigt och implemmentera samma sak pÄ alla slides och alla sidor.
// * Fixa sÄ click outside modal inte trigger om modal Àr stÀngd
// Modal video Popup ending.