Lucas Reichle
Reputation: 21
Changing background-image on carousel navigation click
I'm using a Bootstrap Carousel and I am trying to change the background (an image) to coordinate to a specific slide slide. I have 4 slides and 4 background-images.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My name</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="public/css/styles.css">
<!--- Font Awesome ------->
<!-- bootstrap script -->
<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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body id="ed-body" class="bg-img0">
<section id="education">
<div class="container-fluid">
<div class="ed-carousel">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="slide-box">
<h3 class="slide-title">college 1</h3>
<img class="college4-seal" src="public/images/college1-seal.png" alt="college 1 seal">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• Dates</p>
<div class="col-lg-9 slide-details">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-box">
<h3 class="slide-title">college 2</h3>
<img class="college2-seal" src="public/images/college2-seal.png" alt="college 2 seal">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• dates</p>
<div class="col-lg-9 slide-details">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-box">
<h3 class="slide-title">college 3</h3>
<img class="college3-seal" src="public/images/college3-seal.jpg" alt="college3 seal">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• dates</p>
<div class="slide-details col-lg-9">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-box">
<h3 class="slide-title">college 4</h3>
<img class="slide-seal college4-logo" src="public/images/college4-seal.png" alt="college 4 logo">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• dates</p>
<div class="slide-details col-lg-9">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
</body>
</html>
I'm attempting to change the background by using CSS classes with the background-image property.
CSS
.bg-img0 {
background-image:url("college1.png");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
z-index: -1;
}
.bg-img1 {
background-image:url("college2.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
}
.bg-img2 {
background-image:url("college3.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
}
.bg-img3 {
background-image:url("college4.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
}
.college1-seal {
max-height: 12em;
max-width: 12em;
text-align: center;
align-items: center;
float: left;
display: inline-block;
}
.college2-seal {
border-radius: 50%;
background-color: #fff;
width: 100%;
height: 100%;
max-height: 12em;
max-width: 12em;
text-align: center;
align-items: center;
float: left;
}
.college3-seal {
border-radius: 50%;
width: 100%;
height: 100%;
max-height: 12em;
max-width: 12em;
text-align: center;
align-items: center;
float: left;
}
.college4-logo {
max-height: 12em;
max-width: 12em;
float: left;
}
.carousel-inner {
padding: 1.5em 10.65em;
font-size: 1.1em;
background-filter:blur(50px);
}
.slide-box {
position: relative;
padding: 1.25em;
box-shadow: 0 .5em .333em rgba(0,0,0,.8);
overflow: hidden;
border-radius: 2em;
z-index: 1;
}
.slide-title {
color: #000;
font-size: 2em;
padding: 0 0 .75em;
}
.slide-text {
margin: 1.5em 0 0 12em;
padding: 0 0 0 2em;
height: 12em;
}
.slide-details {
text-align: left;
}
.slide-info {
padding: 0 0 1em;
}
I've tried a number of different methods. This makes the most sense but Javascript won't recognize the the picNum variable outside the function.
Jquery/Javascript
var picNum = 0;
$(".carousel-control-next").click(function() {
$("#ed-body").removeClass("bg-img" + picNum);
var picNum = picNum + 1;
$("#ed-body").addClass("bg-img" + picNum);
});
I've put the variable inside the function and that is the closest I've gotten to this working but the picNum resets to 0 each click so it only goes to the second picture.
$(".carousel-control-next").click(function() {
var picNum = 0;
$("#ed-body").removeClass("bg-img" + picNum);
var picNum = picNum + 1;
$("#ed-body").addClass("bg-img" + picNum);
});
Upvotes: 2
Views: 1112
Answers (1)
s.kuznetsov
Reputation: 15223
I made you a code for a click event for two buttons - .carousel-control-next and .carousel-control-prev.
The error was in this line:
var picNum = picNum + 1;
You need it like this:
picNum++;
I also added an if condition for you, which assigns 0 if the number of the .bg-img class is greater than the declared one:
if (picNum > count_slide) {
picNum = 0;
}
var picNum = 0;
var count_slide = $('#carouselExampleFade .carousel-item').length - 1;
$(".carousel-control-next").click(function() {
$("#ed-body").removeClass("bg-img" + picNum);
picNum++;
if (picNum > count_slide) {
picNum = 0;
}
$("#ed-body").addClass("bg-img" + picNum);
});
$(".carousel-control-prev").click(function() {
$("#ed-body").removeClass("bg-img" + picNum);
picNum--;
if (picNum < 0) {
picNum = count_slide;
}
$("#ed-body").addClass("bg-img" + picNum);
});.bg-img0 {
background-image:url("https://cdn.pixabay.com/photo/2017/07/03/20/17/abstract-2468874__340.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
z-index: -1;
}
.bg-img1 {
background-image:url("https://img5.goodfon.ru/wallpaper/nbig/f/96/blue-luxury-background-sparkle-fon-sinii-blestki.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
}
.bg-img2 {
background-image:url("https://image.freepik.com/free-photo/red-blue-smoke-on-background_36326-1255.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
}
.bg-img3 {
background-image:url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #000;
}
.college1-seal {
max-height: 12em;
max-width: 12em;
text-align: center;
align-items: center;
float: left;
display: inline-block;
}
.college2-seal {
border-radius: 50%;
background-color: #fff;
width: 100%;
height: 100%;
max-height: 12em;
max-width: 12em;
text-align: center;
align-items: center;
float: left;
}
.college3-seal {
border-radius: 50%;
width: 100%;
height: 100%;
max-height: 12em;
max-width: 12em;
text-align: center;
align-items: center;
float: left;
}
.college4-logo {
max-height: 12em;
max-width: 12em;
float: left;
}
.carousel-inner {
padding: 1.5em 10.65em;
font-size: 1.1em;
background-filter:blur(50px);
}
.slide-box {
position: relative;
padding: 1.25em;
box-shadow: 0 .5em .333em rgba(0,0,0,.8);
overflow: hidden;
border-radius: 2em;
z-index: 1;
}
.slide-title {
color: #000;
font-size: 2em;
padding: 0 0 .75em;
}
.slide-text {
margin: 1.5em 0 0 12em;
padding: 0 0 0 2em;
height: 12em;
}
.slide-details {
text-align: left;
}
.slide-info {
padding: 0 0 1em;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My name</title>
<!-- bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="public/css/styles.css">
<!--- Font Awesome ------->
<!-- bootstrap script -->
<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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body id="ed-body" class="bg-img0">
<section id="education">
<div class="container-fluid">
<div class="ed-carousel">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="slide-box">
<h3 class="slide-title">college 1</h3>
<img class="college4-seal" src="public/images/college1-seal.png" alt="college 1 seal">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• Dates</p>
<div class="col-lg-9 slide-details">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-box">
<h3 class="slide-title">college 2</h3>
<img class="college2-seal" src="public/images/college2-seal.png" alt="college 2 seal">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• dates</p>
<div class="col-lg-9 slide-details">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-box">
<h3 class="slide-title">college 3</h3>
<img class="college3-seal" src="public/images/college3-seal.jpg" alt="college3 seal">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• dates</p>
<div class="slide-details col-lg-9">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="slide-box">
<h3 class="slide-title">college 4</h3>
<img class="slide-seal college4-logo" src="public/images/college4-seal.png" alt="college 4 logo">
<div class="slide-text">
<div class="slide-info row">
<p class="slide-year col-lg-3">• dates</p>
<div class="slide-details col-lg-9">
<p>degree</p>
</div>
</div>
<div class="slide-blurb">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis, nibh vestibulum fringilla mattis, nulla neque dignissim diam, quis maximus diam nunc at eros.</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<script src="index.js" charset="utf-8"></script>
</body>
</html>Upvotes: 3
Related Questions
- Darkening a background image on a bootstrap carousel
- How to change Image of Bootstrap Carousel on Mobile View?
- How to change slides using Bootstrap Carousel?
- Bootstrap Carousel's background not equal
- how to add background image to carousel in bootstrap
- Bootstrap 4 - Carousel with fixed background
- How to Use Background Image in BootStrap .carousel-control
- change carousel content from images to background images
- Styling bootstrap carousel navigation
- Twitter Bootstrap Carousel: Change background outside carousel-element