Как получить активный класс только в первом разделе карусели? - PullRequest
Новая
       4

Как получить активный класс только в первом разделе карусели?

1 голос
/ 01 мая 2019

Попытка динамической карусели bootstrap-4, в которой изображения поступают из базы данных.Но только один div может быть активным в карусели, так как я могу достичь этого?Как я могу стать активным в первом div в цикле foreach. 

<?php 
    include '../employee.php';
    $obj= new employees();
    $result=$obj->select_image();
 ?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  <?php 
    foreach ($result as $values){
  ?>
  <?php echo $values['profile_pic']; ?> 
    <div class="carousel-item active" data-interval="2000">
      <img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
    </div>
    <?php 
    }
    ?>

   </div>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

Ответы [ 4 ]

1 голос
/ 01 мая 2019

Простой метод в php будет иметь логическое значение и использовать его, чтобы определить, является ли это первой итерацией вашего цикла. 

<?php
    $isFirst = True;

    foreach ($result as $values){
        echo $values['profile_pic']; 

        if ($isFirst == True) {
            $isFirst == False;
?>  
    <div class="carousel-item active" data-interval="2000">
    <?php
        } else {
    ?>
    <div class="carousel-item" data-interval="2000">
    <?php
        }
    ?>
      <img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
    </div>
<?php 
    }
?>
0 голосов
/ 01 мая 2019

Я ценю все усилия, которые все возможны, но я нашел еще одно решение, которое, я думаю, самое простое.

Я просто использовал здесь $ count! 

<?php 
    include '../employee.php';
    $obj= new employees();
    $result=$obj->select_image();
 ?>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Dhruv</title>
  </head>
  <body>

<div class="container-fluid">
    <div class="row">
            <div class="col-lg-12">
                <div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
                      <div class="carousel-inner">
                      <?php 
                      $count = 0;
                        foreach ($result as $values){
                      ?>
                        <div class="carousel-item <?php 
                            if($count==0){
                              echo "active";  
                            }
                            else{
                                echo " ";
                            }
                        ?>" data-interval="2000">
                          <img src="<?php echo $values['profile_pic']; ?>" class=" w-100 d-block " alt="...">
                        </div>
                        <?php 
                        $count++;
                        }
                        ?>
                       </div>
                      <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                      </a>
                    </div>
            </div>
    </div>
</div>
</div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
0 голосов
/ 01 мая 2019

Есть несколько вариантов решения этой проблемы.Я опишу самый простой способ ее решения, но дайте мне знать, если ваш массив не соответствует моему состоянию.

1.Если ключи вашего массива числовые, вы можете использовать этот тип условия

  • PHP 7,3 

<?php
foreach ($result as $key =>  $values) {
    ?>
    <?php echo $values['profile_pic']; ?>
    <div class="carousel-item <?php if ($key === array_key_first($result)): ?>active<?php endif;?>" data-interval="2000">
        <img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
    </div>
    <?php
}
?>

Я добавил php <?php if ($key === array_key_first($result)): ?>active<?php endif; ?> что означает, что active класс должен быть помещен только в первый элемент вашего массива

  • PHP <= 7.3 </h3>

<?php
foreach ($result as $key => $values) {
    ?>
    <?php echo $values['profile_pic']; ?>
    <div class="carousel-item <?php if ($key === key($result)): ?>active<?php endif; ?>"
         data-interval="2000">
        <img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
    </div>
    <?php
}

Ключевое условие: php <?php if ($key === key($result)): ?>active<?php endif; ?>

  • Все версии PHP (самый простой) 

<?php
foreach ($result as $index => $values) {
    ?>
    <?php echo $values['profile_pic']; ?>
    <div class="carousel-item <?php if ($index === 0): ?>active<?php endif; ?>"
         data-interval="2000">
        <img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
    </div>
    <?php
}

Здесь вы проверяете только index, который является числовым иПоместите active class только в первый ([0]) элемент вашего массива

0 голосов
/ 01 мая 2019

Вы можете использовать индекс в вашем цикле for и проверить, равен ли он 0 (первый цикл). 

<?php
    foreach ($result as $index => $values) {
?>
<?php echo $values['profile_pic']; ?>
    <div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>" data-interval="2000">
        <img src="<?php echo $values['profile_pic']; ?>" class="d-block w-100" alt="...">
    </div>
<?php 
    }
?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...