Bootstrap Ders-17 Slider Yapımı - Carousel
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-17 Slider Yapımı - Carousel

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(6172)
RAPOR ET
Bootstrap derslerimize devam ediyoruz.Bu dersimiz de carousel özelliğini işleyeceğiz.Carousel slider yapmamızı sağlıyor.Her cihaza uygun şekil de plugin kullanmadan responsive sliderlarımızı ekleyebiliyoruz carousel sayesinde.Kullanımına geçelim.

İndir : http://ustaderslik.com/dosya/bootstrap-carousel.zip

İncele : http://ustaderslik.com/ornek/bootstrap-carousel/

Öncelikle bir div yaratım id atayalım.Bu id slider için etkileşimi için kullanacağız.Bu divin cssine carousel slide classlarını veriyoruz.Sliderin otomatik geçiş süresini de data-interval parametresi ile yapıyoruz.Buna milisaniye cinsinden süreyi atıyoruz.

Bu şekil de slider hazır.Şimdi İçine 3 alan yerleştiriyoruz.Bunların ikisi,ileri geri hareket için,diğeri ise içerik için.İçerikten başlayalım.

Ana divimizin içine diz oluşturup classına carousel-inner verelim.Bu divin içine ise divler açıp classlarına item verelim.Bu itemların içine verileri gireceğiz.İçerik kısmı bu kadar.

Alt ortada dairesel şekil de slider kontrol paneli eklemek için
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>

Bu şekil de yapı oluşturuyoruz.İtem kadar li koyuyoruz ve data-slide-to ya 0-1-2-3... sekil de numaranlandırıyoruz.

Sağa ve sola ok kontrol paleti koymak istiyorsak
<a class="carousel-control left" href="#slider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#slider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>


Alanlarını ekliyoruz.

Bu şekil de 3 alanı da ekleyebiliriz.İsterseniz kontrol panellerini eklemeyebiliriz.Css ile renkleri veya diğer özellikleri istediğimiz gibi değiştirebiliriz veya içeriğe resim,video koyabiliriz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{max-width:960px;margin:auto;margin-top:50px;}
h2{margin:0;color:#fff;padding-top: 90px;font-size: 52px;font-family: "trebuchet ms", sans-serif; }
.item{background:#999;text-align: center;height:300px !important;}
</style>
</head>
<body>

<div class="ortala">
<div id="slider" class="carousel slide" data-interval="1000" >

<div class="carousel-inner">
<div class="active item"><h2>Slide-1</h2> <h3>1-Slider Alanı.</h3></div>
<div class="item"><h2>Slide-2</h2> <h3>2-Slider Alanı.</h3></div>
<div class="item"><h2>Slide-3</h2><div class="carousel-caption"><h3>3-Slider Alanı.</h3><p>Açıklama alanı.</p></div></div>
<div class="item"><h2>Slide-4</h2><div class="carousel-caption"><h3>4-Slider Alanı.</h3><p>Açıklama alanı.</p></div></div>
<div class="item"><h2>Slide-5</h2> <h3>5-Slider Alanı.</h3></div>
</div>

<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
<li data-target="#slider" data-slide-to="3"></li>
<li data-target="#slider" data-slide-to="4"></li>
</ol>

<a class="carousel-control left" href="#slider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="carousel-control right" href="#slider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/Adsd12sısd2z.png




davmaneydi
davmaneydi 2 Yıl Önce Cevaplandı
Genel örnekte ki kodun aynısını deniyorum.
Çıktı:
http://ustaderslik.comxa.com/resimler/c08b6fb85a.png
cArleone
cArleone 2 Yıl Önce Cevaplandı
Dosyalar eksiktir.Genel örneği indirip o şekilde deneyin.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol