Hello.
I created a list containing 4 items:
<body class="body">
<div class="carousel-container">
<ol class="carousel">
<li id="fire" class="carousel-item"><a href="#">Fire</a></li>
<li id="ice" class="carousel-item"><a href="#">Ice</a></li>
<li id="wind" class="carousel-item"><a href="#">Wind</a></li>
<li id="darkness" class="carousel-item"><a href="#">Darkness</a></li>
</ol>
</div>
</body>
I want each item click changes background images, but the way I did it in JQuery is bad:
$(document).ready(function(){
$('#fire').on("click", function(){
$('.body').addClass("fire");
});
$('#ice').on("click", function(){
$('.body').addClass("ice");
});
$('#wind').on("click", function(){
$('.body').addClass("wind");
});
$('#darkness').on("click", function(){
$('.body').addClass("darkness");
});
});
CSS
body {
height: 100vh;
overflow: hidden;
}
.carousel-container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
height: 97%;
}
.carousel-item {
display: inline;
border: 1px solid green;
padding: 10px;
}
.carousel-item a {
text-decoration: none;
color: black;
}
.carousel-item a:hover {
color: white;
}
.fire, .ice, .wind, .darkness {
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
}
.fire {
background-image: url('https://honeysanime.com/wp-content/uploads/2015/01/Portgas-D.-Ace-595x500.jpg');
}
.ice {
background-image: url('http://img1.wikia.nocookie.net/__cb20121210214959/magi/images/d/dd/Ice_Magic_anime.png');
}
.wind {
background-image: url('https://cdna.artstation.com/p/assets/images/images/015/320/476/large/filipe-emerson-aang.jpg?1547915445');
}
.darkness {
background-image: url('http://img15.deviantart.net/8b13/i/2013/243/0/8/purple_flame_by_dark_spine_dragon-d6ki5m2.png');
}
#fire:hover {background: rgb(226, 88, 34);}
#ice:hover {background: rgb(109,155,195);}
#wind:hover {background: #8cc5f2;}
#darkness:hover {background: rgb(85,26,139);}
It’s like it’s creating layers, so when I click the button again the background image doesn’t change.
May you please give me a better function to do this?
Thank you
Working Code: Codepen