Bootstrap Carousel Sonraki Fotoğrafa Geçmiyor r10+

01-02-2022, 10:56:15

Kimlik doğrulama veya yönetimden onay bekliyor.

Arkadaşlar merhaba. Bir problem var. Carousele veritabanından fotoğraf verip döngüye alıyorum. Ancak sadece 1 fotoğraf geliyor. Next Previous butonları çalışmıyor. Kod örnekleri aşağıda. Şimdiden teşekkürler.

<section>
<div class="w-100 position-relative">
<div class="container">

<div class="feat-wrap position-relative w-100 mt-70">

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<?php
$ssql = $db->read("sliders");
while ($srow = $ssql->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="ornekdosyayolu/<?php echo $srow['sliders_file'] ?>"
alt="xxxx">
</div>
<?php }; ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div><!-- Featured Area Wrap -->
</div>
</div>
</section>

01-02-2022, 11:02:41

#2

Riga

<?php
$ssql = $db->read("sliders");
while ($srow = $ssql->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="ornekdosyayolu/<?php echo $srow['sliders_file'] ?>"
alt="xxxx">
</div>
<?php }; ?>

Bu kısma dikkatli bakarsanız döngü içerisinde kapatılmamış divler mevcut. Ayrıca döngüye carousel-item divini almalısınız sadece. Ayrıca sadece ilk dive "active" vermelisiniz burada hepsine vermişsiniz.

01-02-2022, 11:09:26

#3

finansmuhendisi

Riga adlı üyeden alıntı: mesajı görüntüle

<?php
$ssql = $db->read("sliders");
while ($srow = $ssql->fetch(PDO::FETCH_ASSOC)) {
?>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="ornekdosyayolu/<?php echo $srow['sliders_file'] ?>"
alt="xxxx">
</div>
<?php }; ?>

Bu kısma dikkatli bakarsanız döngü içerisinde kapatılmamış divler mevcut. Ayrıca döngüye carousel-item divini almalısınız sadece. Ayrıca sadece ilk dive "active" vermelisiniz burada hepsine vermişsiniz.

Döngüyü bir alt divden sonlandırınca carousel bozuluyor. Bir de döngüye sadece bir div aldığım için active özelliğini silince carousel comple kayboluyor. O zaman 2 div açıp 1'ine active verip sabit bir eleman seçip diğerlerini mi döngüye almalıyım?

01-02-2022, 11:13:24

#4

umityildrim

Bootstrap.min.css dosyasını çağırmanız lazım. Yalnız bunu Php'den neden yaptınız ki? 🤔 Php'den zor olur. Css ve js den yapmanız daha kolay olur. 🙂

01-02-2022, 11:17:50

#5

Riga

finansmuhendisi adlı üyeden alıntı: mesajı görüntüle

Döngüyü bir alt divden sonlandırınca carousel bozuluyor. Bir de döngüye sadece bir div aldığım için active özelliğini silince carousel comple kayboluyor. O zaman 2 div açıp 1'ine active verip sabit bir eleman seçip diğerlerini mi döngüye almalıyım?

<section>
<div class="w-100 position-relative">
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
  	<?php
    $ssql = $db->read("sliders");
    $n=0;
    while ($srow = $ssql->fetch(PDO::FETCH_ASSOC)) {
    
    $active = '';
    if($n==0)
    {
    	$active = 'active';
    }
    ?>
    <div class="carousel-item <?php echo $active; ?>">
      <img src="<?php echo $srow['sliders_file']; ?>" class="d-block w-100" alt="...">
    </div>
    <?php
      $n++;
    }
    ?>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

</div>
</div>
</section>

01-02-2022, 11:21:43

#6

finansmuhendisi

Riga adlı üyeden alıntı: mesajı görüntüle

<section>
<div class="w-100 position-relative">
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
      <?php
    $ssql = $db->read("sliders");
    $n=0;
    while ($srow = $ssql->fetch(PDO::FETCH_ASSOC)) {
    
    $active = '';
    if($n==0)
    {
        $active = 'active';
    }
    ?>
    <div class="carousel-item <?php echo $active; ?>">
      <img src="<?php echo $srow['sliders_file']; ?>" class="d-block w-100" alt="...">
    </div>
    <?php
      $n++;
    }
    ?>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

</div>
</div>
</section>

Malesef bu kodu kullanınca carousel komple kayboluyor

01-02-2022, 11:22:03

#7

Riga

finansmuhendisi adlı üyeden alıntı: mesajı görüntüle

Malesef bu kodu kullanınca carousel komple kayboluyor

Kodu güncelledim tekrar deneyin.

01-02-2022, 11:32:53

#8

finansmuhendisi

Riga adlı üyeden alıntı: mesajı görüntüle

Kodu güncelledim tekrar deneyin.

Carousel aktif fakat şu an next, previous butonları çalışmıyor. Tek fotoğraf var sadece. Hakkınızı helal edin yordum sizi

01-02-2022, 11:34:44

#9

Riga

finansmuhendisi adlı üyeden alıntı: mesajı görüntüle

Carousel aktif fakat şu an next, previous butonları çalışmıyor. Tek fotoğraf var sadece. Hakkınızı helal edin yordum sizi

Problem yok, bu kodlar bootstrap 5 içindir alt versiyon kullanıyorsanız o yüzden çalışmıyor olabilir. Ayrıca bootstrap bundle js dosyanın sayfaya dahil edildiğinden emin olun.