Как сделать мою карусель активной для каждого элемента? - PullRequest
Новая
       75

Как сделать мою карусель активной для каждого элемента?

0 голосов
/ 08 июля 2020

Я хочу, чтобы каждое изображение было активным, когда оно выбрано, но сейчас все элементы активны 

<?php foreach($project_images as $image) {?>

    <?php
        if($image['project_image_name'] != '') {
            $images = '<img src="'.base_url().'public/uploads/project_images/'.$image['project_category'].'/'.$image['project_id'].'/'.$image['project_image_name'].'" >';
        } else {
            $images = '<img src="'.base_url().'public/uploads/project_images/default/default-project-image.jpg'.'" ';
        }
    ?>

    <div class="carousel-item active">
        <?php echo $images; ?>
    </div>

<?php }?>

1 Ответ

1 голос
/ 09 июля 2020

Звучит как работа для JavaScript, а не PHP.

Я предполагаю, что PHP не знает, активно изображение или нет, он просто отображает изображение.

Я предполагаю, что вы хотите, чтобы изображение было активным при нажатии. Это JavaScript.

Шаг 1. Не делайте ничего активным.

Удалите «активное» из div. 

<div class="carousel-item">
    <?php echo $images; ?>
</div>

Шаг 2. Дайте каждому div уникальный идентификатор , чтобы JavaScript знал, о каком элементе вы имеете в виду. 

<?php 
   $id = 0;
   foreach($project_images as $image) {
     $id++;
 ?>

    <?php
         // .. code is the same
    ?>

    <div id="carousel_<?php echo $id ?>" class="carousel-item">
        <?php echo $images; ?>
    </div>

<?php }?>

Это должно дать каждому div уникальный идентификатор.

Шаг 3: Создайте функцию JavaScript , которая будет переключать «активный» класс выбранного элемента.

Пример: 

function ToggleClass(elemID){
  // Get selected element
  selElement = document.getElementById(elemID);

   //Use selElement to change class.  Code goes here
}

Шаг 4: Добавьте функцию JavaScript в div.

Обратите внимание на кавычки - при необходимости используйте двойные и одиночные числа.

Пример: 

<div id="carousel_<?php echo $id ?>" class="carousel-item active" onclick="ToggleClass('carousel_<?php echo $id ?>')">
      <?php echo $images; ?>
 </div>
...