Карусель фото, как сделать?

Question

[opsimecom]

Здравствуйте! Есть код

<?php
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) : ?>
      <div class="col-sm-12 card2 card-body card-blog card-border mb-4 card-teaser  col-md-6 col-lg-4 col-xl-3">
          
      <?php
        if($row['product_video_link'] == '0'):
      ?>
       
        <div> 
        
        
          <div id="sliderBigImages" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image_link']?>" alt="" style="width: 100%;">
        </div>
        <div class="carousel-item">
            <img src="https://275129.selcdn.ru/macaw/193728d2f5bb9d2cf8f7.jpeg" class="d-block w-100" alt="Природа">
        </div>
        <div class="carousel-item">
           <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image_link']?>" alt="" style="width: 100%;">
        </div>
    </div>
    <a class="carousel-control-prev" href="#sliderBigImages" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#sliderBigImages" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        
    </a>
</div>

он создает много рамок с картинками, я хочу чтобы при выгрузке фото работала карусель на всех рамках, но щас работает только на одной тоесть появляется на всех но переключение работает только на одной. Я грешу на это (sliderBigImages) как сделать так чтобы работало для всех рамок своя карусль?

У каждой рамки есть свой уникальный код из бд
<?=$row['product_id']?> как правильно подвязать все это ?

Answer 1

[Даниил]

<div id="sliderBigImages<?=$row['product_id']?>" class="carousel slide" data-ride="carousel">

<a class="carousel-control-prev" href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="prev">    </a>
<a class="carousel-control-next" href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="next">   </a>

Comments

[opsimecom]

Спасибо! Работает сделал так :

<!-- Bootstrap 4 -->
  <div id="sliderBigImages<?=$row['product_id']?>" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image_link']?>" alt="" style="width: 100%;">
        </div>
       
        <div class="carousel-item">
           <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image2_link']?>" alt="" style="width: 100%;">
        </div>
    </div>
    
    
    <a class="carousel-control-prev" href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next"href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        
    </a>
</div>

добавил переменную новую, скажите а если product_image2_link эта переменная будет пустая как отображать только первую ?

[opsimecom]

Вот не понимаю как сделать чтобы если одна переменная заполнена, то другие не показываем, а если все заполнены то показываем. Помогите н

[Даниил]

Перед выполнением while соберите все ссылки в массив, а затем в цикле введите. Например:

foreach ($arrayLinks as $link) {
    <div class="carousel-item">
            <img src="https://275129.selcdn.ru/macaw/<?=$link?>" alt="" style="width: 100%;">
        </div>
}

[opsimecom]

Даниил,

<div class="card-border mb-4 card-teaser">
    <div class="row2">
     
      <?php
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) : ?>
      <div class="col-sm-12 card2 card-body card-blog card-border mb-4 card-teaser  col-md-6 col-lg-4 col-xl-3">
          
      <?php
        if($row['product_video_link'] == '0'):
      ?>
       
        <div> 
        
       <!-- Bootstrap 4 -->
  <div id="sliderBigImages<?=$row['product_id']?>" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image_link']?>" alt="" style="width: 100%;">
        </div>
        
       <div class="carousel-item">
           <img src="https://275129.selcdn.ru/macaw/<?=$row['product_image2_link']?>" alt="" style="width: 100%;">
        </div>
    </div>
    <a class="carousel-control-prev" href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next"href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        
    </a>
</div> 
        
<!--class='lazyload' data-src=-->
        </div>
        
      <?php
        else:
      ?>
      
        <video class ="img-fluid"  controls="controls">
          <source src = "https://275129.selcdn.ru/macaw/<?=$row['product_video_link']?>">
        </video>
      <?php
        endif;
      ?>
         <div class ="brd2">
          <a title="Наведите курсор мышки на макет и нажмите правую кнопку мыши, и сохранить изображение/видео как" href="https://275129.selcdn.ru/macaw/<?=((!empty($row['product_video_link']))?$row['product_video_link']:$row['product_image_link'])?>">&#128190; Скачать макет &#128190;</a>
         </div>
         <div class ="brd2">
          <?=$row['product_id']?>
         </div>
         <div class ="brd2"> 
          &#127915; <?=$row['product_name']?> &#127915;
         </div>
         <div class ="brd2">
          <a>
            &#127757; <?=$row['price'] ?> &#127757;
          </a>
         </div>
         <div class ="brd2">
          <article>
            <h2></h2>
            <p>
              &#128172; <?=$row['opis']?> &#128172;
            </p>
          </article>
         </div>       
         <div class ="brd2 ">
          &#128187; <?=$row['socs']?> &#128187;
         </div>
         <div class ="brd2">
          <a href="<?=$row['link']?>">
            &#128073; <?=$row['link']?>
          </a>
         </div>
        </div>
      <?php
      endwhile;
      ?>
      </div>
    </div>

Вот у меня код отображения всех рамок и картинок , не понимаю куда вписать перепробовал все уже...

[Даниил]

а если product_image2_link эта переменная будет пустая как отображать только первую ?

Сколько всего переменных со ссылками на изображения? Если переменных несколько, то можно сделать типа такого:

// n количество переменных 
for ($i = 1; $i <= $n; $i++) {
    if ($row[‘product_image’ . $i . ‘_link’] !== null) {
        $links[] = $row[‘product_image’ . $i . ‘_link’];
    }
}

Далее выводить как я описывал выше:

foreach ($arrayLinks as $link) {
    <div class="carousel-item">
            <img src="https://275129.selcdn.ru/macaw/<?=$link?>" alt="" style="width: 100%;">
        </div>
}

[opsimecom]

Даниил,

for ($i = 1; $i <= $n; $i++) {
    if ($row[‘product_image’ . $i . ‘_link’] !== null) {
        $links[] = $row[‘product_image’ . $i . ‘_link’];
    }
}

Вот у меня будет 3 переменных
product_image_link
product_image2_link
product_image3_link
Как их сюда вписать ?

[Даниил]

opsimecom, так они уже вписаны. Осталось код записать с тэги

<?php 
// сюда 
//вместо $n поставить 3
?>

И вставить в скрипт после while

[opsimecom]

Даниил, так ?

<div> 
        
       <!-- Bootstrap 4 -->
       <?php
       for ($i = 1; $i <= $n; $i++) {
    if ($row[‘product_image_link’ . $i . ‘_link’] !== null) {
        $links[] = $row[‘product_image_link’ . $i . ‘_link’];
         $links[] = $row[‘product_image2_link’ . $i . ‘_link’];
          $links[] = $row[‘product_image3_link’ . $i . ‘_link’];
    }
}

       ?>
       
  <div id="sliderBigImages<?=$row['product_id']?>" class="carousel slide" data-ride="carousel">
      
      
    <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://275129.selcdn.ru/macaw/<?=$link?>" alt="" style="width: 100%;">
        </div>
        
       <div class="carousel-item">
          <img src="https://275129.selcdn.ru/macaw/<?=$link?>" alt="" style="width: 100%;">
        </div>
         <div class="carousel-item">
          <img src="https://275129.selcdn.ru/macaw/<?=$link?>" alt="" style="width: 100%;">
        </div>
    </div>
    <a class="carousel-control-prev" href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next"href="#sliderBigImages<?=$row['product_id']?>" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
        
    </a>
</div> 
        
<!--class='lazyload' data-src=-->
        </div>

[Даниил]

Конечно же нет

<?php
      while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) : ?>
      <div class="col-sm-12 card2 card-body card-blog card-border mb-4 card-teaser  col-md-6 col-lg-4 col-xl-3">
          
      <?php
        if($row['product_video_link'] == '0'):
            $links[] = $row['product_image_link'];
            for ($i = 2; $i <= 3; $i++){
                if ($row['product_image' . $i . '_link'] !== '') {
                    $links[] = $row['product_image' . $i . '_link'];
                } 
           } ?>
        <div> 
        
       <!-- Bootstrap 4 -->
  <div id="sliderBigImages<?=$row['product_id']?>" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
    <?php foreach ($links as $link) {
         echo '<div class="carousel-item active">
            <img src="https://275129.selcdn.ru/macaw/' . $link . ' " alt="" style="width: 100%;">
        </div>';
    }?>

</div>
<a ....

P.S. Это очень плохое решение и так лучше не делать