Ambilight ile Bootstrap Slider Kullanımı

Bootstrap üzerine konuşmaya devam ediyoruz. Bugün Bootstrap Slider‘ı (bilinen adıyla Carousel) Ambilight tasarımıyla özgün ve şık hale getireceğiz. Oluşturacağımız yenilikçi tasarım, Bootstrap varolan işlevsel sliderını bir adım daha öteye taşıyacak.

ÖRNEĞİ GÖRÜNTÜLE

Bootstrap Slider

Bootstrap Slider kullanımı gayet basit olan, tasarımının bootstrap.css ile, fonksiyonelitesinin de bootstrap.js ile işlediği yapıdır. Eğer bu CSS ve JS dosyalarına sahip değilseniz sizi birinci adıma, Bootstrap’e giriş dersimize alalım.

Tasarımımıza ilham veren teknolojiyi kısaca tanıyalım.

Ambilight

Ambilight (ambient lighting), ambiyans veya ortam aydınlatması şeklinde dilimize çevrilebilir. Televizyon sektöründe kullanılan bu tanım, izlemekte olduğumuz görüntünün, cihazın arkasındaki ışık panelleriyle duvara yansıtılmasına deniyor. Günümüzde, televizyon sektörünün önde gelen firmaları birer birer Ambilight modellerini piyasaya sürmekte. Örnek video için buraya bakabilirsiniz.

Bootstrap Slider ve Ambilight Nasıl Kullanılır?

Yapacağımız tasarımın örneği yukarıda yerini aladursun, biz kodlarımızı yazmaya başlayalım. Önceden de belirttiğimiz gibi Bootstrap’in kendi CSS ve JS dosyalarını yüklüyoruz, yine Bootstrap’in resmi sitesindeki Carousel kodlarını kullanarak bir slider oluşturuyoruz.

---

HTML Kodları

HTML kodlarımıza sadece awSlider classına sahip bir section ekleyelim. Bu da yapının, sitedeki diğer sliderları değiştirmesini engelleyecek filtreyi oluşturacak.

<section class="awSlider">
  <div  class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target=".carousel" data-slide-to="0" class="active"></li>
      <li data-target=".carousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="resim1.jpg">
        <div class="carousel-caption">Görsel #1</div>
      </div>
      <div class="item">
        <img src="resim12.jpg">
        <div class="carousel-caption">Görsel #2</div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Geri</span>
    </a>
    <a class="right carousel-control" href=".carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">İleri</span>
    </a>
  </div>
</section>

---

CSS Kodları

Ek olarak belirttiğimiz section‘a özgü kodlarımızı hazırlayalım. İlk olarak carousel’i tablo yapısına çevirip gölge ile saralım.

section.awSlider .carousel{
  display:table;
  z-index:2;
  -moz-box-shadow: 0 0 4px #444;
  -webkit-box-shadow: 0 0 4px #444;
  box-shadow: 0 0 15px rgba(1,1,1,.5);
}

Daha sonra resimlerin seçilip sürüklenmesini de engelleyen filtremizi, awSlider’ı tasarlayalım.

section.awSlider{
  margin:30px auto;
  padding:30px;
  position:relative;
  display:table;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Şimdi awSlider içerisindeki resimleri yönetelim. Burada hazırladığımız absolute img elemanları arkaplandaki bulanık yapıyı oluşturacaklar.

section.awSlider:hover > img{
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity:1;
}

section.awSlider img{
   pointer-events: none;
}

section.awSlider > img{
  position:absolute;
  top:30px;
  z-index:1;
  transition:all .3s;
  filter: blur(1.8vw);
  -webkit-filter: blur(2vw);
  -moz-filter: blur(2vw); 
  -o-filter: blur(2vw); 
  -ms-filter: blur(2vw);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity:.5;
}

---

jQuery Kodları

Geriye son olarak Slider’ı özgünleştiren, arkaplandaki ambilight görüntüsünü oluşturup sürekli kılan jQuery kodları kaldı. İlk olarak sliderı tanımlayalım. Üzerine gelindiğinde durmasını ve her iki saniyede bir görüntü değişmesini belirliyoruz.

$('section.awSlider .carousel').carousel({
	pause: "hover",
  interval: 2000
});

Şimdi ilk görselin arkaplanındaki ambilight ile başlayalım.

var startImage = $('section.awSlider .item.active > img').attr('src');
$('section.awSlider').append('<img src="' + startImage + '">');

Geriye kalan tüm görselleri de okuyup onlara da özgü ambilight effect oluşturalım.

$('section.awSlider .carousel').on('slid.bs.carousel', function () {
 var bscn = $(this).find('.item.active > img').attr('src');
	$('section.awSlider > img').attr('src',bscn);
});

Kapanış

Bu kez fiziksel bir tasarım teknolojisi verdiği ilham ile kendine bir web sliderı üzerinde yer buluyor. Bu tip etkileşimler tasarımın tüm dallarını birbirine bağlayan en güçlü yapılar olmakla beraber, trendlerin her alanda, aynı anda yer bulmasına sebepler.

Ambilight teknolojisini bizlere kazandıran mühendisler, bu yenilikçi tasarımlarıyla daha birçok farklı yapıya ilham vermeye devam edeceklerdir.

İyi çalışmalar.