İçeriğe geç
ShiftDelete.Net
Haber ara/ SDN'ye SorGiriş
Haber Akışı SDNTV İnceleme Forum Yapay Zeka Akıllı Telefon Elektrikli Otomobil Oyun ShiftDelete.Net Global Teknoloji Haberleri Mobil Otomobil Donanım Savunma Bilim Sosyal Medya İnternet Giyilebilir Teknoloji Rehber Ürünler Son dakika Yazarlar
  1. Ana sayfa
  2. Topluluk
  3. Programlama
  4. Web Programlama (PHP, ASP, HTML, CSS, JavaScript)
Web Programlama (PHP, ASP, HTML, CSS, JavaScript)

Slider Yapma Problemi

mali201220.01.20211 cevap1.838 görüntüleme
2012'den beri157 mesaj
#1
Arkadaşlar merhaba. Daha önce Slider'a resim ve başlık ekleme özelliği ile ilgili bir soru sormuştum. Slaytta Caruosel Slider idi. Carousel'e nasıl ekleme yapabileceğimi sormuştum. Ve sonunda internetten de o sorunun cevabını bulup paylaşmıştım. Aynı problemle yine karşı karşıyayım. Ama bu sefer slaytın iskeletini kendim oluşturmaya çalışıyorum. Aşağıdaki kodlar ile şöyle bir sonuç alıyorum. Ekteki resme bakabilirsiniz. Yeniden bir resim eklediğimde mevcut resim siliniyor yerine yeni resim geliyor. Benim istediğim slaytın yan yana eklenmesi. Aşağıdaki kodlarla bu işi nasıl yapabilirim.
Sorduğum sorunun cevabı. Bunun gibi olması lazım
<?php $database = new PDO("mysql:host=localhost; dbname=deneme; charset=utf8", "root", "");  ?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style/slider.css">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
   
    <div class="Slider">
   
    <?php
    $indexresimcek = $database->query("SELECT * FROM indexhaberlerekle ORDER BY indexhaberekle_id DESC LIMIT 5");
    $indexresimal  = $indexresimcek->fetchAll(PDO::FETCH_ASSOC);
    ?>
   
    <div class="BuyukResimAlani">
    <div class="indexslidercubugu"></div>
   
    <?php
    if ($indexresimcek->rowCount()) {
        foreach ($indexresimal as $resimal) {
    ?>
   
    <div class="BuyukResimBaslik"><a href="#"><?php echo $resimal["indexhaberekle_baslik"]; ?></a> </div>
   
    <img <?php echo $resimal["indexhaberekle_resim"]; ?> class="BuyukResimler" src="./images/upload/<?php echo $resimal["indexhaberekle_resim"]; ?>" />

    <div class="KucukResimAlani">
    <img <?php echo $resimal["indexhaberekle_resim"]; ?> class="KucukResimlerBir" src="./images/upload/<?php echo $resimal["indexhaberekle_resim"]; ?>" />
    </div>
       
    </div>
    <?php  ?>        <?php $resimal++; } } ?>
    </div>

</body>
</html>
Cevaplar
2015'den beri1.159 mesaj
#2
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Yukarıdaki yapıya aşağıdaki kısmı eklediğinizde istediğiniz yapıyı elde edersiniz kodunuzun boostrap eksikleri var sanırsam

<div class="carousel-item">
<img src="..." alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>

Cevabını yaz

Cevap yazmak için giriş yap ya da üye ol. Eski forum kullanıcı adın ve parolanla girebilirsin.