Bootstrap to WordPress: Slider 48

Bootstrap to WordPress: Slider

Geoit Wordpress Temasını Satın Al

Temalarınızda bootstrap kullanıyorsanız güzel bir slider sizi bekliyor, bu yazımda Bootstrap framework’unda bulunan Slider diğer adıyla carousel’i wordpress’e entegre ettim.

Demo

İlk olarak slider’ımızın orjinal kodlarını vererek başlayalım, bu kod bootstrap tarafından veriliyor.

<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>

Şimdide wordpress’e göre düzenleyerek entegre edelim. showposts=5&cat=2' kodunu kendinize göre değiştirmeyi unutmayın.

Shotposts: Slider’da gözükmesini istediğiniz maksimum yazı sayısı
Cat: Kategori id’si

<?php
$number = 0;
query_posts('showposts=5&cat=2');
if(have_posts()):
?>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<?php while(have_posts()): the_post(); ?>
<li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
<?php endwhile; ?>
</ol>

<!-- Carousel items -->
<div class="carousel-inner">
<?php while(have_posts()): the_post(); ?>
<div class="item">
<?php the_post_thumbnail('large'); ?>
<div class="carousel-caption">
<h4><?php the_title(); ?></h4>
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
</div>

<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
<?php endif; wp_reset_query(); ?>

Şimdide aktif sınıfını ekleyelim.

<script>
jQuery(document).ready(function(){
$(".carousel-indicators li:first").addClass("active");
$(".carousel-inner .item:first").addClass("active");
});
</script>

Son olarak Bootstrap’ın css ve js dosyalarını temanıza eklediğinizden emin olun. Dosyalar için tıklayın.

Uckan

1995 doğumlu, balıkesirde yaşayan Fenerbahçeli kendi halinde bir yazar..

Bir Cevap Yaz

    8 Yorum

  1. hocam buradaki sliderin http://sevenx.de/demo/bootstrap-carousel/inc.carousel/product-slider.html
    entegresi wordprese entegresi nasıl olur?

    • Farklı bir işlem yapmanıza gerek yok linkteki kodları yukarıdaki işleme göre düzenlemeniz gerekiyor sadece.

  2. hocam ekledim fakat slider otomatik olmuyor nasıl yapabilirim

    • Tam olarak sorunun ne olduğunu anlayamadım ama bootstrap’ın js ve css dosyalarını çağırdınız mı?
      http://getbootstrap.com/getting-started/

    • Evet dosyaalrı çagırdım slider ben tıklamadan otomatik dönmüyor auto start nasıl verebilirim ?

      • sorunu çözdüm hocam araştırdım netten slider dosyasına bunu ekledim
        var $ = jQuery.noConflict();
        $(document).ready(function() {
        $(‘#myCarousel’).carousel({ interval: 3000, cycle: true });
        });
        oldu

  3. Verdiğiniz kodları ekledim ve kategori id düzenledim ama olmadı sadece alt alta 1 2 3 4 5 diye yazıyor.

    • Kodların çalışıp çalışmadığını kontrol etmek için tekrar denedim çalıştı. Kategori ayarlarını yapmayı unutmayın.