在多个画廊/滑块之间切换的更好方法？

Question

是否有更好的方法在同一位置的WordPress MetaSlider插件中内置的4个不同的图像滑块之间切换，并使用PHP用短代码回显？

目前，我正在使用jQuery在滑块之间进行切换，但是以某种方式只在它们之间切换时才显示第一个滑块，在我调整窗口大小之前，其他滑块是不可见的。然后另一个图库/滑块出现在视图中。

<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

我将jQuery更改为不透明度而不是显示：块/无。 位置：将每个滑块绝对放在其相对父div内，使它们彼此重叠。 当我检查第一个解决方案时，图像的宽度和高度均为0px，直到调整窗口大小为止。因此，我认为在图像上强制宽度/高度不是imo的好选择，而且对响应性也不利。

/* 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');
}

}）;