Carousel Slider'a Otomatik Olarak Ekleme Yapma

Bu konuyu görüntüleyen kullanıcılar Konu (Kayıtlı: 0, Misafir: 1)

mali2012

Asistan
Arkadaşlar merhaba. Şöyle bir problemim var. Carousel slider'ın ikinci ve üçüncü slayt kısımlarını sildim. İlk resimdeki başlık ve editör ile carousel slider'a ekleme yapıyorum. Ama İlk slaytın altına ekleme yapıyor. Nasıl düzenleyebilirim bunu acaba. Resiimde görüldüğü üzere.
Mesaj otomatik birleştirildi:

<div id="demo" class="carousel slide" data-ride="carousel">

<ul class="carousel-indicators">

<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>

</ul>

<div class="carousel-inner">

<div class="carousel-item active">
<img src="images/buyuk-slider/slider-11.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3> <?php echo $row['haberekle_baslik']; ?> </h3>
<p> <?php echo $row['haberekle_konu']; ?> </p>
</div>
</div>

</div>

<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>

</div>
--------------------
Slider kodları da bunlar.
Mesaj otomatik birleştirildi:

haberekle.jpg
 

Ekli dosyalar

CapScroLL

Profesör
Yasaklı
Sanırım foreach döngüsünde carousel-item divi yerine direkt carousel divini eklettiriyorsunuz.

PHP:
<div id="controls" class="carousel slide" data-ride="carousel" data-pause="true" data-interval="false">
    <div class="carousel-inner">
      <ol class="carousel-indicators">
    <?php for ($i = 0;$i < $gosterilecekpost; $i++) { //Slider'da ne kadar post gösterilecekse o kadar dot ekliyoruz ki kullanıcılar bu butonları kullanarak ileri geri yapabilsinler ?>
    <li data-target="#controls" data-slide-to="<?=$i ?>"></li> <!-- Dotlara kullanıcıları göndereceği sayfaları veriyoruz  -->
  <?php
} //For döngüsünü kapatıyoruz ?>
</ol>

<?php foreach ($makaleal as $post) { //Makaleleri çekiyoruz ?>
        <a class="carousel-item" href="/makale/<?=$post['sefurl'] ?>"> <!-- URL veriyoruz -->
          <img src="<?=$post['fotograf'] ?>" alt="<?=$post['baslik'] ?>" /> <!-- Fotoğraf ekliyoruz -->
      </a>
    <?php
} //Foreach döngüsünü bitiriyoruz ?>
   
    </div>
    <a class="carousel-control-prev" href="#controls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Geri</span>
    </a>
    <a class="carousel-control-next" href="#controls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Ileri</span>
    </a>
</div>
 

mali2012

Asistan
Capscroll kardeş benim size verdiğim kodlar arasında "gosterilecekpost" diye bir şey yok. Onun oradaki görevini anlayamadım.
Mesaj otomatik birleştirildi:

Tamam anladım. şimdi sizin dediğiniz gibi yaptığımda şöyle bir şey oldu. Ekteki resme bakabilirsiniz. 2. slayt 1. slaytın üstüne geldi.
 

Ekli dosyalar

Son düzenleme:

CapScroLL

Profesör
Yasaklı
Capscroll kardeş benim size verdiğim kodlar arasında "gosterilecekpost" diye bir şey yok. Onun oradaki görevini anlayamadım.
Mesaj otomatik birleştirildi:

Tamam anladım. şimdi sizin dediğiniz gibi yaptığımda şöyle bir şey oldu. Ekteki resme bakabilirsiniz. 2. slayt 1. slaytın üstüne geldi.
$gosterilecekpost değişkenini site ayarlarınıza bağlayabilirsiniz, mesela "Slider'da gösterilecek post sayısı" şeklinde ardından oraya hangi değer girilirse o kadar post yayınlanacaktır. Bunu isterseniz "$gosterilecekpost = 10" şeklinde de yaparsınız, aslında tek amaç post limiti değil bir yandan dotlar için işlev vermek.

Kodlarınızı atarsanız kontrol edebilirim.
 

mali2012

Asistan
PHP:
<div id="demo" class="carousel slide" data-ride="carousel">   
    <?php
   
    $veriler = $db->query("SELECT * FROM haberlerekle",PDO::FETCH_ASSOC)->fetchAll();
   
    foreach ($veriler as $row) {  ?>
   
    <ul class="carousel-indicators">
   
    <li data-target="#demo" data-slide-to="0"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
   
    </ul>

    <div class="carousel-inner">
      
    <div class="carousel-item active">
    <div style="max-width:1100px; max-height:500px;"> <?php echo $row['haberekle_konu']; ?> </div>
    <div class="carousel-caption">
    <h3> <?php echo $row['haberekle_baslik']; ?> </h3>
    </div>
    </div>
   
    <?php  }  ?>
       
    </div>

    <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
    </a>
    </div>
Sizin yaptığınız şekilde yaptığımda sayfamda hiç bir şekilde slider çıkmadı. Ben de Şu şekilde bir şey denedim ama bu seferde üstüste bindi resimler. Yandaki dot'a geçmedi slayt.
 
Son düzenleme:

CapScroLL

Profesör
Yasaklı
Indicators divini for döngüsüne bağlamalısın ki belirli bir post sayısı elde tutulsun. Örneğin for ile 10 tane dot eklettirirsiniz slider'da 10 tane post olur, bu tip durumlar çok önemli çünkü sildera tüm postları eklersek hem sayfanın açılması zaman alacaktır hem de host trafiğinizden zarar edeceksiniz. Bunun yerine 10 tane dot atıp son 10 tane postu çekersiniz, foreach döngüsü için veriler sorgusuna son 10 tane veriyi de atarsak dotlar ile uyumlu şekilde son 10 tane postu çekecektir.

Problem ise döngüde her post eklenmesine "carousel-item classından sonra active" classını vermenizdir, ilk uygulamamda ben de bu hataya düşmüştüm :) Problemin çözümü ise "active" classını kaldırmak.

PHP:
        <?php
        $veriler = $db->query("SELECT * FROM haberlerekle ORDER BY id DESC LIMIT 10",PDO::FETCH_ASSOC)->fetchAll();
    ?>

<div id="demo" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
        <ul class="carousel-indicators">
    <? for ($i=0;$i<10;$i++){ ?>
        <li data-target="#demo" data-slide-to="<?=$i ?>"></li>
    <? } ?>
        </ul>

     <?  foreach ($veriler as $row) {  ?>
        <div class="carousel-item">
        <div style="max-width:1100px; max-height:500px;"> <?php echo $row['haberekle_konu']; ?> </div>
        <div class="carousel-caption">
        <h3> <?php echo $row['haberekle_baslik']; ?> </h3>
        </div>
        </div>

        <?php  }  ?>

        </div>

        <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
        </a>
        </div>
 

mali2012

Asistan
Bu verdiğiniz son kodda da aynı şekilde sorun devam ediyor. Veritabanında veri olmasına rağmen slider alanına veri çekmiyor. Resmini koyuyorum.
Mesaj otomatik birleştirildi:

Activ e class'ını kaldırdığım vakit ekrana veri çekmiyor.
Mesaj otomatik birleştirildi:

Kaldırmadığımda ise ikinci resim, birinci resmin üzerine geliyor.
 

Ekli dosyalar

Son düzenleme:

CapScroLL

Profesör
Yasaklı
Pardon JS kodlarını eklemeyi unutmuşum :) Şunları JS kodu olarak ekleyin;
JavaScript:
$('.carousel-inner div:first').addClass('active');
$('.carousel-indicators li:first').addClass('active');
Bu JS kodları sayesinde ilk dot ve ilk div için "active" classı eklenecektir.
 

mali2012

Asistan
CapScroll seni de bayağı bir uğraştırdım kusura bakma. Benim "js" isimli bir klasörüm var. Bu "js" isimli klasörümün içinde de "jquery-3.4.1.slim.min.js " isimli bir dosya var.

Birinci olarak sorum şu: "<head></head>" tag'lerinden önce bu dosyayı mı göstereyim,

yoksa internette "jquery cdn uncompressed" linki altındaki
JavaScript:
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
bu kodu mu göstereyim.

İkinci olarak sorum şu: "body" tag in den önce de senin şu kodu koydum.
JavaScript:
<script>$('.carousel-inner div:first').addClass('active');
        $('.carousel-indicators li:first').addClass('active');
        </script>
Doğrudur inşallah.
Yani "jquery-3.4.1.slim.min.js" yerine "jquery cdn uncompressed" kodlarını koyduğumda da olmadı. Her iki durumda da olmadı.
 

CapScroLL

Profesör
Yasaklı
İsterseniz özel mesajdan index dosyanızı gönderin ben hatalarınızı belirterek düzenleyip size tekrar göndereyim.
 

mali2012

Asistan
Ben bu aşağıdaki kodları tam anlayamadım. Nasıl çalıştığını anlayamadım yani.
PHP:
<div id="demo" class="carousel slide" data-ride="carousel">
  
    <?php $count = count($veriler);?>
    <ul class="carousel-indicators">

    <?PHP
     $i=0;
    for ($i=0;$i<$count;$i++) { ?>
        <li data-target="#demo" data-slide-to="<?php echo $i; ?>"></li>
    <?php }  ?>
    </ul>
  
    <div class="carousel-inner">
  
    <?php
    $j=0;

    foreach ($veriler as $row) {  ?>

     <div class="item <?php if($j==0) { echo "active"; } ?>">
  
            <div style="max-width:1100px; max-height:500px;">
  
    <img src="upload/images/<?php echo $row['haberekle_konu']; ?>" />
            </div>
     <div class="carousel-caption">
            <h3> <?php  echo $row["haberekle_baslik"];   ?> </h3>
            </div>
        </div>
        <?php $j++; } ?>
    </div>
  
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
Şimdi veritabanına resim kayıt edip, resmi listelemeye çalışmaktan vazgeçtim. Resmi bir klasöre gönderip; adını veritabanına yazdırıp sonra da veritabanından listelettiriyorum. Sormak istediğim şu: Resimler yine alt alta çıkıyor. Slider oluşturacak şekilde eklenme yapmıyor. Bu arada şu kodu tam olarak bir yere koyacağız. Bütün Carousel değil sadece yan oklarla ilerlediğimizde ikinci resme geçecek şekilde ayarlayabiliriz doğru yere koyabilirsek.
PHP:
$veriler = $db->query("SELECT * FROM haberlerekle",PDO::FETCH_ASSOC)->fetchAll();
 
Son düzenleme:

CapScroLL

Profesör
Yasaklı
PHP:
<div id="demo" class="carousel slide" data-ride="carousel">

    <?php $count = count($veriler); //Kaç tane veri çekildiği alınmış. (Sorguda LIMIT kullanılırsa buna gerek kalmaz)
?>
    <ul class="carousel-indicators">

    <?PHP
     $i=0;
    for ($i=0;$i<$count;$i++) {  //Çekilen verinin sayısına göre dot eklemiş yani ne kadar slider varsa o kadar dot olmalı.
?>
        <li data-target="#demo" data-slide-to="<?php echo $i; ?>"></li>
    <?php }  ?>
    </ul>

    <div class="carousel-inner">

    <?php
    $j=0; //Son paylaşılan postu active yapmak için yani sayfa açıldığında slider'da son eklenen postun görünmesini sağlamak için değişken belirlenmiş.

    foreach ($veriler as $row) {  // ?>

     <div class="item <?php if($j==0) { echo "active"; } //İlk çekilen yani son eklenen posta active değeri verilmiş.
?> ">

            <div style="max-width:1100px; max-height:500px;">

    <img src="upload/images/<?php echo $row['haberekle_konu']; ?>" />
            </div>
     <div class="carousel-caption">
            <h3> <?php  echo $row["haberekle_baslik"];   ?> </h3>
            </div>
        </div>
        <?php $j++; } //Her döngü sonunda J değişkeninin değeri artırılmış.
?>
    </div>

    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>
PHP:
<?php
$veriler = $db->query("SELECT * FROM haberlerekle ORDER BY id DESC LIMIT 10",PDO::FETCH_ASSOC)->fetchAll(); //ORDER BY id DESC ile en yeni satırdan en eskiye doğru listeleme yapılmış, LIMIT 10 eklemesi ile son eklenen 10 satır seçilmiş.
?>
 

mali2012

Asistan
Sonunda aradığım kodları buldum. Yapmak istediğim slider kodları aşağıda. İnternetten bulduğum adresi de koyayım, arayan bulabilsin. Yardımcı olan herkese teşekkür ederim.
Dinamik Carousel Slider Yapma - Youtube
slider.php
PHP:
    <?php
    $veriler = $db->query("SELECT * FROM haberlerekle",PDO::FETCH_ASSOC)->fetchAll();
    ?>
   
    <div id="demo" class="carousel slide" data-ride="carousel">
    <ul class="carousel-indicators">
    <?php
    $i = 0;
    foreach ($veriler as $row) {
        $actives = '';
        if($i == 0) {
            $actives = 'active';
        }
    ?>
    <li data-target="#demo" data-slide-to="<?php echo $i; ?>" class="<?php echo $actives; ?>"></li>
    <?php $i++; } ?>
    </ul>
    <div class="carousel-inner">
       
      <?php
        $i = 0;
        foreach ($veriler as $row) {
        $actives = '';
            if($i == 0) {
            $actives = 'active';
            }
      ?>

      <div class="carousel-item <?php echo $actives; ?>">
      <img src="upload/images/<?php echo $row['haberekle_konu']; ?>" width="832" height="502">
      <div class="carousel-caption">
      <p><?php echo $row["haberekle_baslik"]; ?></p>
      </div>  
      </div>
   
      <?php $i++; } ?>
   
      </div>
      <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
      </a>
      <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
      </a>
      </div>
admin.php
PHP:
        <?php
        if(isset($_POST['resimyukle'])) {
        $yazi = $_POST['haberekle_baslik'];
        $yukleklasor  = "../../../upload/images";
        $tmp_name     = $_FILES['yukle_resim']['tmp_name'];
        $name         = $_FILES['yukle_resim']['name'];
        $boyut        = $_FILES['yukle_resim']['size'];
        $tip          = $_FILES['yukle_resim']['type'];
        $uzanti       = substr($name,-4,4);
        $rasgelesayi1 = rand(10000,50000);
        $rasgelesayi2 = rand(10000,50000);
        $resimad      = $rasgelesayi1.$rasgelesayi2.$uzanti;
       
        //dosya var mı kontrol
        if(strlen($name) == 0) {
            echo "Bir Dosya Seçiniz";
            exit();
        }
       
        //boyut kontrol
        if($boyut > (1024*1024*3)) {
            echo "Dosya Boyutu Çok Fazla";
            exit();
        }
       
        //tip kontrol
        if($tip != 'image/jpeg' && $tip != 'image/png' && $uzanti != '.jpg') {
            echo "Yalnızca jpeg veya png formatında olabilir";
        }
       
        move_uploaded_file($tmp_name, "$yukleklasor/$resimad");
       
        $resimsor = $db->prepare("INSERT INTO haberlerekle set haberekle_konu=:ad, haberekle_baslik=:baslik");
        $resimyukle = $resimsor->execute(array('ad'=> $resimad, 'baslik'=> $yazi));
       
        }

        ?>
       
        <form action="" method="post" enctype="multipart/form-data">
        <input type="text" name="haberekle_baslik" size="100"></input><br><br>
        <input type="file" name="yukle_resim" /><br>
        <input type="submit" value="Yükle" name="resimyukle" />
        </form>
 

Son mesajlar

Üst