I am currently working on creating an image slider gallery displaying different years. However, I'm facing challenges in making it work properly. If I select a specific year like 2017, only the corresponding images should be displayed. Can someone assist me with this task? Despite following tutorials and videos, I haven't been able to complete it successfully yet. Your help is greatly appreciated as I continue to learn. Below are the sections of my HTML, CSS, and JavaScript code.
$(document).ready(function () {
$('#myCarousel').carousel({ interval: 3000 });
$('.multi-item-carousel .item').each(function () {
var itemToClone = $(this);
for (var i = 1; i < 6; i++) {
itemToClone = itemToClone.next();
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
itemToClone.children(':first-child').clone().addClass("cloneditem-" + (i)).appendTo($(this));
}
});
});
$(document).ready(function () {
$('#show').click(function () {
$('.menu').toggle("slide");
});
});
$(document).ready(function () {
$('#show1').click(function () {
$('.menu1').toggle("slide");
});
});
$(document).ready(function () {
$('#show2').click(function () {
$('.menu2').toggle("slide");
});
});#slider-text {
padding-top: 40px;
display: block;
text-align: center;
}
#slider-text .col-md-6 {
overflow: hidden;
}
#slider-text h2 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
font-size...