Question

如果用户只选择9个图像并且我想要的是隐藏其他图像div，如何隐藏div，否则如果没有添加图像，它将显示为空白框。这是一个旋转木马。

<h2><?php echo $title ?></h2>

<!-- Swiper -->

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img style="width:100%; height:100%" src="
<?php echo $Image_Input_1 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" src="
<?php echo $Image_Input_2 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_3 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_4 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_5 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_6 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_7 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_8 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_9 ?>"></div>

<div class="swiper-slide"><img style="width:100%; height:100%" 
src="<?php echo $Image_Input_10 ?>"></div>
</div>

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

Answer 1

只需将图像放入数组并使用foreach

将其循环播放

以下是您的工作方式：

将图片放入数组

$image_inputs = array(
    $Image_Input_1,
    $Image_Input_2,
    $Image_Input_3,
    $Image_Input_4,
    $Image_Input_5,
    $Image_Input_6,
    $Image_Input_7,
    $Image_Input_8,
    $Image_Input_9,
    $Image_Input_10
);

使用foreach循环

<?php foreach($image_inputs as $image):?>
<div class="swiper-slide">
    <img style="width:100%; height:100%; <?php echo (empty($image) ? 'display:none;' : ''); ?> " src="<?php echo $image; ?>">
</div>
<?php endforeach; ?>

以下是整个代码

<?php 

$image_inputs = array(
    $Image_Input_1,
    $Image_Input_2,
    $Image_Input_3,
    $Image_Input_4,
    $Image_Input_5,
    $Image_Input_6,
    $Image_Input_7,
    $Image_Input_8,
    $Image_Input_9,
    $Image_Input_10
);
?>

<div class="swiper-container">
<div class="swiper-wrapper">


  <?php foreach($image_inputs as $image):?>
  <?php if(empty($image)){ }else{ ?>
  <?php echo '<div class="swiper-slide"><img style="width:100%; 
  height:100%" src="'.$image.'"></div>';}  ?>

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

Answer 2

您可以检查$ Image_Input_10是否有值。如果没有，则隐藏div。请参阅下面的代码，该代码将添加到您的swiper-container div

上

 <div class="swiper-container" <?php if(isset($Image_Input_10)){ echo 'style="display:none;"';} ?>>

如果为空，请隐藏img carousel框

2 个答案: