Hey there! So, I've got this cool interactive banner on my website. It features 2 slider sections with some awesome products on the right side.
The layout is responsive, meaning that when you switch to a mobile screen size (around 515px or less), the sliders disappear using some neat CSS media queries, and instead, buttons appear in their place. By clicking these buttons, you can toggle between the different sliders.
The issue I'm facing is that it seems like the parent div is somehow blocking the functionality of the sliders once they reappear. I can't interact with or click on any of the content within the sliders when they are shown after clicking the button to display them again by changing from (display:none;) to (display:block;)
Here's the script for the buttons:
<script>
$('.mobileAdultBtn').on('click', function () {
$('#vContentLeft').css('display', 'block');
$('.vSlide-markersWrapper').css('margin-left', '-80px');
$('.backBtn').css('display', 'block');
$('.mobileAdultBtn').css('display', 'none');
$('.mobileYoungAdultBtn').css('display', 'none');
$('.productInfo_mobile').css('visibility', 'hidden');
});
$('.mobileYoungAdultBtn').on('click', function () {
$('#vContentRight').css('display', 'block');
$('.vSlide-markersWrapper').css('margin-left', '-43px');
$('.backBtn').css('display', 'block');
$('.mobileAdultBtn').css('display', 'none');
$('.mobileYoungAdultBtn').css('display', 'none');
$('.productInfo_mobile').css('visibility', 'hidden');
});
$('.backBtn').on('click', function () {
$('#vContentRight').css('display', 'none');
$('#vContentLeft').css('display', 'none');
$('.vSlide-markersWrapper').css('margin-left', '-19px');
$('.backBtn').css('display', 'none');
$('.mobileAdultBtn').css('display', 'block');
$('.mobileYoungAdultBtn').css('display', 'block');
$('.productInfo_mobile').css('visibility', 'visible');
});
</script>
If you want to check out the project, here's the link:
I'd really appreciate any help or suggestions you might have!