Revolution Responsive jQuery Slider Parametreleri

jquery-slider-revolutionRevolution Responsive jQuery Slider gerek HTML5 gerek Wordpres ve gerekse joomla sitelerinde en sık kullanılan esnek bir yapıya sahip, java tabanlı bir  slayt kodudur. Aşağıda bu kodun Themepunch tarafından sunulan versiyonundaki genel kullanımına ilişkin temel uygulamaları bulacaksınız.

00 Server’da çalışması için hangi dosyaları upload edeceksiniz?

rs-plugin klasörü içerisine aşağıdaki klasörleri içeriğindeki alt klasörlerle veya dosyalarla birlikte server’a yüklemelisiniz.

  • js
  • css
  • assets

Kendi jquery  modülünüzü kullanıyor olabilirsiniz. Fakat tavsiyemiz bu java modülünü direk Google kaynaklarından temin etmeniz.

01 Implement the jQuery

Aşağıdaki satırı HTML dosyanızın Head bölümüne yerleştirmelisiniz:

02 Revolution js ve css dosyalarının HTML sayfasına yerleştirilmesi

Yine  <HEAD> bölümüne java script ve css dosyalarının yerlerini giriyoruz:

03 Slaytınızı bir DIV tagı ile çevirmelisiniz (Responsive, Tam genişlikte olmayan)

HTML içerisine slaytınızı görüntülemek istediğiniz bir yere aşağıdaki div tagini giriyoruz:

03 B Create the surrounding DIV for your Slider (Responsive, Tam genişlikte)

Tam genişlikte bir slayt görünümü istiyorsanız bu div class tag i kullanacaksınız:

04 List taglari içerisine tek bir slayt için gerekli olan elementleri giriyoruz

 

05  jQuery Pluginini Slaytı oluşturmak için html içerisinden çağırıyoruz

 

Biçimlendirme


Slider biçimlendirme,  javascript / jQuery/  HTML5 veri özellikleri ve CSS kullanımının blok içerisinde tanımlanması ile yapılır .Biçimlendirmede HTML5 kuralları geçerlidir ve içerik tamamen arama motorları tarafından indexlenir. Biçimlendirme genel yapısı şu şekildedir:

 

01 İki DIV tagı ile Basit yer tutucu:

HTML içerisine Responsive fakat tam geniş olmayan (None FullWidth)  versiyonun yerleşimi:
HTML içerisine Responsive  ve tam geniş (FullWidth)  versiyonun yerleşimi:

 

02 Farklı slaytları tek bir list elementi arasına yerleştiriyoruz

Yerleşim


01 Eklentinin Standart parametreleri

  • delay slaytın ekranda kalış süresi Milisaniye cinsinsinden (Varsayılan: 9000)
  • startheight Pixel cinsinden slaytınızın masa üstünüzdeki yüksekliği, Diğer ekran çözünürlükler buna göre hesaplanacaktır. (Varsayılan: 490)    Eğer  fullwidth bannerkullanacaksanız maximum ayarlar geçerli olacaktır. Banner yüksekliği tarayıcınızın boyutuna göre belirlenecektir. Banner verdiğiniz değerden yüksek olmayacaktır.
  • startwidth Slaytınızın masaüstü ekranınıza göre pixel cinsinden  genişliği (Varsayılan: 890)   Aynen yükseklik gibi ayarlanacaktır
  • hideThumbs Belirtilen süre sonra küçük resim gizlenecektir (Varsayılan: 200),
  • navigationType  Navigasyon çubuğu tipi (Varsayılan:”none”)
  • Seçenekler:
    bulletthumb   ** Fullwidth versiyonda gösterilmeyecektir.
    none
    both
  • navigationArrows Navigation oklarının pozisyonu (Varsayılan: “nexttobullets”)
    Options:
    nexttobulletsverticalcenterednone
  • navigationStyle Navigasyon başlıklarının stili (Varsayılan: “round”)
    Options:
    roundsquarenavbar   ** Eğer  navbar seçmişseniz, Navigation Arrows ‘u  nexttobullets olarak bırakın
  • touchenabled Dokunmatik cihazların kaydırma işlemini etkinleştirme (Default: “on”)
    Options:
    on
    off
  • navOffsetHorizontal Navigasyon çubuğu ortalıdır fakat pixel sayısı kadar soldan (e.g. -10) veya sağdan (Default: 0) yerini ayarlayabilirsiniz
  • navOffsetVertical Alttan veya üssten nav çubuğunun yerini ayarlayabilirsiniz  üstten ( -20) veya alttan (Default: 20)
  • shadow Slayt perdesinin altında gölge olup olmayacağını ayarlayabilirsiniz
    Options:
    0 Gölge Yok
    1
    2
    3
  • onHoverStop Mous üzerine geldiğinde zamanlamayı durdurup durdurmayacağınızı belirler
    Options:
    on
    off
  • thumbWidth Küçük resim genişliği  (Eğer thumb Seçili ise. Default:100)
  • thumbHeight Küçük resim yüksekliği (Eğer thump seçili ise Default 50)
  • thumbAmount Aynı anda görüntülenecek küçük resim adedi(Eğer thump seçili ise)**küçük  Responsive seviyelerde bu thumbs lar gizlenecektir. Küçük seviye varsayılan olarak 60x30px. bunu css dosyasından ayarlayabilirsiniz.
  • fullWidth on/off Tam geniş versiyonda resmi yatay olarak ortalamayı açıp kapatır. Eğer image slayt containerinden büyük ise kutu içine ortalanır.

02 Slider öğeleri

<li> – Every list item represents a new banner/slider item.
Transition effects and a possible slide link are defined here:
  • data-transition The appearance transition of this slide
    Options:
    boxslide
    boxfade
    slotzoom-horizontal
    slotslide-horizontal
    slotfade-horizontal
    slotzoom-vertical
    slotslide-vertical
    slotfade-vertical
    curtain-1
    curtain-2
    curtain-3
    slideleft
    slideright
    slideup
    slidedown
    fade
  • data-slotamount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
  • data-link A link on the whole slide pic
  • data-delay A new Dealy value for the Slide. If no delay defined per slide, the dealy defined via Options will be used
  • data-thumb An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form
Each List item must include:
  • an image <img> as Background Image / Main Image with Data of the thumbOR
  • a colored background image AND a coloredbg caption which is full width/height defined !!

Each List item can include:

  • some <div>s containing captions (class=”caption”), this could contain embedded video iframes also

03 Captions

Captions are Containers which can be customized via CSS, classes for the start animation and some data options.
The CSS for the caption added in the settings.css file because it depends strongly on the responsive Sizing.
There are 4 Steps of Responsive Contents which are written later below under the Responsive Dependencies Caption.
You find an example in the settings.css of our item download.
The options are in detail:
  • color class example big_white, big_orange, medium_grey (check the style.css of the example for details)
  • animation class
    Options:
    sft – Short from Top
    sfb – Short from Bottom
    sfr – Short from Rightsfl – Short from Leftlft – Long from Toplfb – Long from Bottomlfr – Long from Rightlfl – Long from Left

    fade – fading

  • data-x The horizontal position in the standard (via startwidth option defined) screen size (other screen sizes will be calculated)
  • data-y vertical position in the standard (via startheight option defined) screen size (other screen sizes will be calculated)
  • data-speed duration of the animation in milliseconds
  • data-start after how many milliseconds should this caption start to show
  • data-easing special easing effect of the animation
    Options:
    easeOutBack
    easeInQuad
    easeOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuart

    easeOutQuart

    easeInOutQuart

    easeInQuint

    easeOutQuint

    easeInOutQuint

    easeInSine

    easeOutSine

    easeInOutSine

    easeInExpo

    easeOutExpo

    easeInOutExpo

    easeInCirc

    easeOutCirc

    easeInOutCirc

    easeInElastic

    easeOutElastic

    easeInOutElastic

    easeInBack

    easeOutBack

    easeInOutBack

    easeInBounce

    easeOutBounce

    easeInOutBounce

04 Videos

In order to embed videos in the slider you can embed videos via iframe of your favorite video site that allows this kind of embedding. An example with Vimeo:

 

 

05 Banner Timer

In order to use a banner timer, you will need to add the markup within the banner or fullwidthbanner divs.
The markup should look like :
<div class=”tp-bannertimer”></div>
To remove this timer just simple remove the markup from the container, and that is it.

Responsive Basic


Responsive means that the slider will adjust to every screen width.

To achieve that you have to set a bunch of mediaqueries that will adjust the whole slider when a certain window size is used, or you will need to use our fullwidth style version, to let the banner always resize itself.
The basic containers are build like this ( in none Fullwidth, but 4 Level Responsive Version):
The media queries that build the screen dependend container sizes:

 

Fullwidth


This slider can go fullwidth too. We have added an index-fullwidth.html example for you in the zip.

Please note the basic change in the markup.

The surrounding containers are:

 

The CSS is not splitted with Media-Queries but has a basic 100% value for width:

 

 

Licenses


Used Assets

 

Check Also

SEO-SPAM / BLACK HAT SEO Nedir nasıl temizlenir.

 Black Hat SEO Nedir? “Black Hat SEO”, arama motorlarının hizmet şartlarını ihlal etmek yoluyla arama …

Bir Cevap Yazın