Carousel Slider'a Otomatik Olarak Ekleme Yapma

mali2012 · 23 Temmuz 2020

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: 23 Temmuz 2020

<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: 23 Temmuz 2020

CapScroLL · 24 Temmuz 2020

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 · 24 Temmuz 2020

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

Mesaj otomatik birleştirildi: 24 Temmuz 2020

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.

CapScroLL · 25 Temmuz 2020

mali2012 dedi ki:
Capscroll kardeş benim size verdiğim kodlar arasında "gosterilecekpost" diye bir şey yok. Onun oradaki görevini anlayamadım.

Mesaj otomatik birleştirildi: 24 Temmuz 2020

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 · 27 Temmuz 2020

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.

CapScroLL · 28 Temmuz 2020

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 · 28 Temmuz 2020

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: 28 Temmuz 2020

Activ e class'ını kaldırdığım vakit ekrana veri çekmiyor.

Mesaj otomatik birleştirildi: 28 Temmuz 2020

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

CapScroLL · 28 Temmuz 2020

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 · 28 Temmuz 2020

.js dosyasını ekledim. Aynı şekilde boş geliyor ekran.

CapScroLL · 29 Temmuz 2020

mali2012 dedi ki:
.js dosyasını ekledim. Aynı şekilde boş geliyor ekran.

Jquery var mı? </head> etiketinden hemen önce JQuery'i daha sonra </body> etiketinden hemen önce de belirttiğim Js kodunu ekleyin.

mali2012 · 30 Temmuz 2020

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 · 30 Temmuz 2020

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

mali2012 · 1 Ağustos 2020

Forum üzerinden mi? Özel mesaj nasıl gönderiliyor forum üzerinden.

CapScroLL · 1 Ağustos 2020

mali2012 dedi ki:
Forum üzerinden mi? Özel mesaj nasıl gönderiliyor forum üzerinden.

mali2012 · 11 Ağustos 2020

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();

CapScroLL · 11 Ağustos 2020

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 · 15 Ağustos 2020

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>

Asuna-san · 7 Ekim 2020

Bunlarla uğraşacağınıza bootstrap kullanın hazır slider var sizin için daha iyi olurdu.

Carousel Slider'a Otomatik Olarak Ekleme Yapma

Asistan

Ekli dosyalar

Müdavim

Asistan

Ekli dosyalar

Müdavim

Asistan

Müdavim

Asistan

Ekli dosyalar

Müdavim

Asistan

Ekli dosyalar

Müdavim

Asistan

Müdavim

Asistan

Müdavim

Asistan

Müdavim

Asistan

Öğrenci

Benzer konular