Better way to switch between multiple galleries/sliders? - php

Question

Is there a better way to switch between 4 different image sliders in the same place, that are built in WordPress MetaSlider plugin and echo'ed with shortcodes using PHP?
At the moment i'm using jQuery to switch between the sliders, but somehow it only shows the first slider when switching between them, the others are invisible until i resize the window.. then the other gallery/slider appears on view.
<div id="slider2">
<div class="slider-links">
<p class="slider-link hotel active">
<?php the_field("link1"); ?>
</p>
<p class="slider-link living">
<?php the_field("link2"); ?>
</p>
<p class="slider-link retail">
<?php the_field("link3"); ?>
</p>
<p class="slider-link office">
<?php the_field("link4"); ?>
</p>
</div>
<div class="img hotel">
<?php echo do_shortcode('[metaslider id="72"]'); ?>
</div>
<div class="img living">
<?php echo do_shortcode('[metaslider id="96"]'); ?>
</div>
<div class="img retail">
<?php echo do_shortcode('[metaslider id="98"]'); ?>
</div>
<div class="img office">
<?php echo do_shortcode('[metaslider id="103"]'); ?>
</div>
</div>
/* CHANGE SLIDERS ON CLICK */
var slider2img = $('#slider2 .img');
var sliderLink = $('#slider2 .slider-link');
sliderLink.click(function() {
sliderLink.removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('hotel')) {
slider2img.hide();
$('#slider2 .img.hotel').show();
} else if ($(this).hasClass('living')) {
slider2img.hide();
$('#slider2 .img.living').show();
} else if ($(this).hasClass('retail')) {
slider2img.hide();
$('#slider2 .img.retail').show();
} else if ($(this).hasClass('office')) {
slider2img.hide();
$('#slider2 .img.office').show();
}
});

Answer 1

I changed the jQuery to switch opacity instead of display: block/none. And position: absolute each slider inside their relative parent div so they would be on top of each other. When I examined the first solution, the images had 0px width & height until resizing the window.. so i thought forcing width/height on the images wasn't a good option imo and bad for responsiveness too.
/* CHANGE SLIDERS ON CLICK */
var slider2img = $('#slider2 .img');
var sliderLink = $('#slider2 .slider-link');
sliderLink.click(function() {
sliderLink.removeClass('active');
$(this).addClass('active');
if ($(this).hasClass('hotel')) {
slider2img.css('opacity', '0');
$('#slider2 .img.hotel').css('opacity', '1');
} else if ($(this).hasClass('living')) {
slider2img.css('opacity', '0');
$('#slider2 .img.living').css('opacity', '1');
} else if ($(this).hasClass('retail')) {
slider2img.css('opacity', '0');
$('#slider2 .img.retail').css('opacity', '1');
} else if ($(this).hasClass('office')) {
slider2img.css('opacity', '0');
$('#slider2 .img.office').css('opacity', '1');
}
});