As I created a slider that changes the background when clicked, I encountered an issue where the initial background is white. How can I incorporate a background image at the start of the page?
My goal is to have a background image on the first page. Subsequently, clicking on a feature icon should trigger a change in the background image:
https://i.sstatic.net/Rr9eA.png
https://i.sstatic.net/WSS1y.jpg
However, after clicking the icon, the intended image swap does not happen. What I desire is for a background image to be displayed when the page is initially opened and then replaced upon clicking the icon.
https://i.sstatic.net/PN83m.jpg
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 6,
speed: 300,
focusOnSelect: true,
variableWidth: true,
variableHeight: true,
adaptiveHeight: true,
arrows: false,
responsive: [{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$(document).on('click', '.sg-feature', function() {
$('.sg-feature-desc').addClass('hidden');
$(this).find('div').removeClass('hidden');
});
// Event listeners for each clickable image
let gambar1 = document.querySelector('#gambar1');
let gambar2 = document.querySelector('#gambar2');
// Add more event listeners for remaining images...
/* CSS styles for the layout */
body {
// Insert relevant CSS properties
}
.slider {
// Insert relevant styling
}
.center .slick-center h3 {
// Modify the style as needed
}
.hidden {
display: none;
}
// Additional hidden classes for other elements