Oklar ve gezinme ile Jquery dikey kaydırıcı. Bir dizi duyarlı kaydırıcı

> >

Kaydırıcı stilleri

.slider-box( genişlik : 320 piksel ; yükseklik : 210 piksel ; taşma : gizli ; ) .slider( konum : göreceli ; genişlik : 10000 piksel ; yükseklik : 210 piksel ; ) .slider img( kayan nokta : sol ; z-endeksi : 0 ; )

container.slider-box, kaydırıcının boyutunu belirtir. overflow:hidden özelliği, kapsam dahilinde olmayan tüm öğeleri öğenin içinde gizler.

container.slider geniş bir genişliğe ayarlanmıştır. Tüm slaytları içine sığdırmak için bu gereklidir.

Slaytlar, float:left özelliği kullanılarak hizalanır.

Sürgü bloklarının şematik yerleşimi aşağıda gösterilmiştir.

Senaryo

Slaytların hareketi, container.slider öğesinin margin-left özelliği sorunsuz bir şekilde değiştirilerek yapılacaktır.

$(işlev () ( var genişlik= $(".slider-box" ) .width () ; // Kaydırıcı genişliği. aralık = 4000 ; // Slaytları değiştirme aralığı.$(".slider img:last") .clone() .prependTo (".slider" ) ; // Son slaydın bir kopyası başa yerleştirilir.$() .eq (1) .clone() .appendTo (".slider" ) ; // İlk slaydın bir kopyası sona yerleştirilir. // Container.slider, bir slayt genişliği kadar sola kaydırılır. setInterval("animasyon()" , aralık) ; // Slayt geçişini gerçekleştirmek için animasyon() işlevini çalıştırır.) ) ; function animasyon() ( var margin = parseInt($(".slider") ) .css ("marginLeft" ) ) ; // Geçerli blok offset.slider genişlik= $(".slider-box" ).width() , // Kaydırıcı genişliği. slidersAmount= $(".slider" ) .children() .length ; // Kaydırıcıdaki slayt sayısı. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Geçerli slayt son slayt değilse,( kenar boşluğu= kenar boşluğu genişliği; // daha sonra kenar boşluğu değeri, slaydın genişliği kadar azaltılır.) başka ( // Son slayt gösteriliyorsa,$(".slider") .css("sol kenar boşluğu", -width) ; // ardından block.slider ilk konumuna döner, kenar boşluğu=- genişlik* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Block.slider 1 slayt sola hareket eder. } ;

Sonuç, sonsuz otomatik kaydırmalı basit bir kaydırıcıdır.

Bu yazıda, CSS Flexbox ve CSS dönüşümlerini kullanarak bir site için uyarlanabilir bir kaydırıcı oluşturmanın ne kadar kolay olduğunu analiz edeceğiz.

Kaynak kodları ve kaydırıcı demosu

ChiefSlider adlı kaydırıcı projesi GitHub'da barındırılıyor. Bu linkten ona gidebilirsiniz.

Bir etkin slaytlı kaydırıcı (döngü yok):

Üç aktif slaytlı kaydırıcı (döngü yok):

Makaleleri döndürmek için kaydırıcıyı nasıl kullanabileceğinizi gösteren bir örnek:

ChiefSlider'ın Faydaları

Bu kaydırıcının ana avantajlarını listeliyoruz:

• ilk o öğelerin klonlarını oluşturmaz (öğe)örneğin eklentilerde uygulandığı gibi döngüyü düzenlemek için BaykuşAtlıkarınca ve kaygan;
• ikincisi, kütüphaneye bağlı değildir jQuery; bu yalnızca ek gereksinimleri ortadan kaldırmakla kalmaz, aynı zamanda kolaylaştırır;
• üçüncüsü, pratik olarak belgenin DOM'sinde herhangi bir değişiklik yapmaz; yaptığı tek şey, kaydırıcı öğelerinin CSS dönüşüm değerlerini eklemek veya değiştirmek;
• Dördüncüsü, sadece içerir minimal özellik seti; göreve bağlı olarak ek işlevler eklenebilir;
• beşinci, uyarlanabilir, yani. herhangi bir sitede kullanılabilir; kaydırıcı uyarlanabilirliği CSS kullanılarak yapılandırılır;
• altıncı olarak, aktif elemanların sayısı CSS kullanılarak yapılandırılır; bu, bir aktif slayt veya herhangi bir sayıda aktif slayt içeren bir atlıkarınca oluşturmak için kullanılabileceği anlamına gelir.

ChiefSlider'ı yükleme

Kaydırıcının kurulumu 3 adımda yapılır:

• ChiefSlider'ın CSS'sini sayfaya veya sayfaya bağlı CSS dosyasına ekleyin;
• kaydırıcının HTML kodunu sayfada gerekli yere yerleştirin;
• JavaScript kodunu sayfaya veya sayfaya bağlı js dosyasına ekleyin.

CSS ve JavaScript kodunun minimize edilmesi arzu edilir, bu işlem sayfaların daha hızlı yüklenmesini sağlayacaktır.

Basit bir web sitesi kaydırıcısı nasıl tasarlanır (döngü yok)

Kaydırıcı oluşturma şefkaydırıcı HTML kodu, CSS ve JavaScript (jQuery olmadan) oluşturmaktan oluşacaktır.

Kaydırıcı HTML Kodu şefkaydırıcı:

Gördüğünüz gibi kaydırıcı çok basit bir HTML mimarisine sahip. Kaydırıcı sınıfına sahip ana blok ile başlar. Bu blok 3 elemandan oluşmaktadır.

İlk öğe .slider__wrapper'dır. .slider__item öğeleri (slaytlar) için bir sarmalayıcı görevi görür.

Diğer iki öğe (.slider__control) düğmeleri görsel olarak temsil eder. Slaytta gezinmek için kullanılacaklar, yani. önceki ve sonraki öğelere gidin.

ChiefSlider için css kodu:

/* TEMEL STİLLER */ .slider ( konum: göreli; taşma: gizli; ) .slider__wrapper ( görüntü: esnek; geçiş: 0,6 sn dönüştürme kolaylığı; /* saniye cinsinden 0,6 slayt geçiş süresi */ ) .slider__item ( esnek: 0 0 50%; /* aktif slaytların sayısını tanımlar (bu durumda 2 */ max-width: 50%; /* aktif slaytların sayısını tanımlar (bu durumda 2 */ ) /* GERİ VE İLERİ DÜĞMELER İÇİN STİLLER * / .slider__control ( konum: mutlak; görüntü: yok; üst: %50; dönüştürme: çevirY(-50%); hizalama öğeleri: merkez; yaslama içeriği: merkez; metin hizalama: merkez; genişlik: 40 piksel; / * düğme genişliği */ yükseklik: 50 piksel; /* düğme yüksekliği */ opaklık: .5; /* şeffaflık */ arka plan: #000; /* arka plan rengi */ ) .slider__control_show ( ekran: esnek; ) .slider__control:hover, . slider__control:odak ( metin dekorasyonu: yok; anahat: 0; opaklık: .9; /* şeffaflık */ ) .slider__control_left ( sol: 0; ) .slider__control_right ( sağ: 0; ) .slider__control::önce ( içerik: " "; ekran lay: satır içi blok genişlik: 20 piksel /* simge (ok) genişlik */ yükseklik: 20 piksel; /* simge (ok) yükseklik */ arka plan: şeffaf tekrarsız merkez merkez; arka plan boyutu: %100 %100 ) .slider__control_left::before ( arka plan resmi: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( arka plan resmi: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Gördüğünüz gibi, kaydırıcının CSS kodu da çok karmaşık değil. Kaydırıcının görünümünü özelleştirebileceğiniz ana tanımlar yorumlarla birlikte sağlanır.

tanımlayan CSS kodu aktif eleman sayısı:

/* aktif slaytların sayısını tanımlar (bu durumda 2) */ esnek: 0 0 %50; maksimum genişlik: %50

Bu kod, kaydırıcı için etkin öğelerin sayısını 2'ye ayarlar.

Örneğin, kaydırıcının olması için bir aktif eleman, bu tanımların aşağıdaki şekilde değiştirilmesi gerekir:

/* aktif slaytların sayısını tanımlar (bu durumda 1) */ flex: 0 0 %100; maksimum genişlik: %100

oluşturma uyarlanabilir kaydırıcı medya sorguları aracılığıyla yapılır.

Örneğin, küçük ekranlı cihazlarda bir etkin slayta sahip olması gereken bir kaydırıcı ve büyük cihazlarda - dört:

Slider__item ( esnek: 0 0 %100; maksimum genişlik: %100; ) @medya (min-genişlik: 980 piksel) ( .slider__item ( esnek: 0 0 %25; maks-genişlik: %25; ) )

ChiefSlider için JavaScript kodu:

"katı kullan"; var multiItemSlider = (function () ( dönüş işlevi (seçici) ( var _mainElement = document.querySelector(selektör), // ana öğeyi engelle _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // .slider-item için sarmalayıcı _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elemanlar (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // kontroller _sliderControlLeft = _mainElement.querySelector("_left")__kontrol "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // "SAĞ" düğmesi _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // sarmalayıcı genişliği _itemWidthyleth = parseFloat(s_get). / bir elemanın genişliği _positionLeftItem = 0, // sol aktif elemanın konumu _transform = 0, // dönüşüm değeri slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // adım boyutu (dönüşüm için) _items = ; // öğe dizisi // diziyi doldurma _items _sliderItems.forEach(işlev (öğe, dizin) ( _items.push(( öğe: öğe, konum: dizin, dönüşüm: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (yön) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= konum .getMax) ( dönüş; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider&__control_show") _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (direction === "left") ( if (_positionLeftItem)<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

JavaScript kodundaki ana eylem, _transformItem işlevi tarafından gerçekleştirilir. Bu işlev, kendisine iletilen yöne bağlı olarak element.slider__wrapper öğesini dönüştürür.

Kaydırıcı başlatma aşağıdaki gibi gerçekleştirilir:

Var kaydırıcı = multiItemSlider(".slider") Kaydırıcı demosu

Döngü kaydırıcısı nasıl oluşturulur?

Slaytlar, .slider__item öğeleri dönüştürülerek döngüye alınabilir.

Bunu yapmak için, mevcut konumunun ve dönüşümünün değerlerini her bir element.slider__item'e bağlamak gerekir.

En uygun şekilde, bu eylemler _items dizisi kullanılarak gerçekleştirilebilir:

var_items = ; // diziyi öğelerle doldurma.slider__item _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); ));

Ancak verileri yalnızca bir dizi aracılığıyla değil, örneğin veri öznitelikleri kullanarak öğelere bağlayabilirsiniz. Ancak DOM işlemleri en yavaş ve en yoğun kaynak gerektiren işlemlerdir, başka bir şekilde yapılabildiğinde kullanılmaları önerilmez.

Sonraki adım, minimum ve maksimum konumlu .slider__item öğelerini hesaplamak için işlevler oluşturmaktır.

var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(işlev (öğe, dizin) ( if (item.position)< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( indexItem = dizin; ) )); dönüş indexItem; ), getMin: function () ( _items.position; ), getMax: function () ( _items.position; ) döndür

Son temel adım yapılması gereken işlevi iyileştirmektir _transformItem. Yani, öğenin konumunu değiştirecek bir kod ekleyin. .slider_item ve dönüşümünü gerçekleştirin.

Var _transformItem = function (direction) ( var nextItem; if (direction === "right") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (yön === "sol") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

Aslında, burada her şey basit.
Örneğin, bir sonraki slayda geçmek için, öğeler dizisi önce en sağdaki öğe.slider_item'den daha büyük bir konuma sahip bir öğe için aranır.
Dizide böyle bir öğe varsa, .slider__wrapper öğesinin dönüşümü gerçekleştirilir (yani, algoritmada olduğu gibi döngü olmadan eylemler).
Ama eğer böyle bir unsur yok, daha sonra transform.slider__wrapper'a ek olarak, bir dizi başka eylem gerçekleştirilir.  İlk olarak, öğeler dizisi bir öğe için aranır. minimum pozisyon ile.  Bu elemanı aldıktan sonra, değeri mevcut sağ elemanın değerine eşit olacak konum ayarlanır + 1.  Ve tabii ki yapar onun dönüşümü, sonunda sona erecek bir yüzde ile, yani.  son elemandan sonra.

Bir önceki slayda gitmek için aynı adımlar gerçekleştirilir, ancak tersi yapılır.

Ek olarak, döngülü bir kaydırıcı için Sol ve Sağ düğmelerin görünürlüğünü değiştirmenize gerek yoktur.  Bu düğmeler her zaman kaydırıcının bu sürümünde görüntülenecektir.
Bunu yapmak için ihtiyacınız olan:
"Sağ" denetimden slider__control_show sınıfını kaldırın;
 
.slider__control seçicisi için CSS'de, display özelliğinin değerini flex olarak değiştirin.
 Kaydırıcı Demosu 
Döngü ve otomatik slayt geçişli bir kaydırıcı nasıl oluşturulur?
setInterval işlevini kullanarak slaytların belirli aralıklarla otomatik olarak değiştirilmesini programlayabilirsiniz.
Var _cycle = function (yön) ( if (!_config.isCycling) ( dönüş; ) _interval = setInterval(function () ( _transformItem(yön); ), _config.interval); )
Bu örnekteki setInterval işlevi, _config.interval değişkeninin değerine eşit düzenli aralıklarla _transformItem işlevini çalıştıracaktır.
Ayrıca, imleç kaydırıcıya getirildiğinde slaytların otomatik olarak değiştirilmesi için bir durak eklenmesi arzu edilir.
Bu işlevi aşağıdaki gibi uygulayabilirsiniz:
if (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.direction); )); )
Öğe kullanıcı tarafından görülmezse otomatik slayt geçişi nasıl durdurulur?
Otomatik slayt değiştirmeyi devre dışı bırakmak iki durumda yararlıdır:
(bu kaydırıcının bulunduğu) sayfa aktif olmadığında;
 
kaydırıcı sayfanın kapsamı dışında olduğunda.
İlk durum, görünürlük değişikliği olayı ile ele alınabilir.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Görünürlük değişikliği olay işleyicisi için işlev:
// "Belge görünürlük değişikliği" olayını işle var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Bir öğenin görünürlüğü, _isElementVisible işlevi kullanılarak hesaplanabilir:
İşlev _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPointy) (x, ) belgeyi döndür.elementFromPoint(x, y); if (rect.right< 0 || rect.bottom < 0 || rect.left >vGenişlik ||  rect.top > vHeight) ( false return; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
Örneğin, _transformItem işlevinin başlangıcında _isElementVisible öğesine bir çağrı yapabilirsiniz.  Bu eylem, kaydırıcı o anda görünümün dışındaysa otomatik slayt geçişini iptal edecektir.
Var _transformItem = function (yön) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Tarayıcı penceresinin yeniden boyutlandırılmasına tepki veren kaydırıcı
Uyarlanabilir kaydırıcının bu sürümü, izin vermesi nedeniyle öncekilerden farklıdır. tarayıcı penceresini yeniden boyutlandırırken aktif öğelerin (slaytların) sayısını değiştirin.  Genellikle kullanıcılar tarayıcıyı yeniden boyutlandırmaz, ancak yine de olabilir.
Bu, resize olayı ve _states dizisi kullanılarak uygulanır.  Dizi hesaplamalar için kullanılır.  Kullanımı, gerekli olmadığında kaydırıcıyı yeniden başlatmamaya izin verecektir.
Biri etkili yollar Site sayfasında kullanıcıların dikkatini çeken hareketli bir animasyon oluşturulmasıdır.  Animasyon öğeleri, kullanıcılara ürününüz hakkında daha görsel bilgi vermeye ve göstermeye yardımcı olur.  Son zamanlarda, kayan paneller çok popüler hale geldi ve ayrıca bir görüntüyü kaydırırken veya tıklatırken ortaya çıkan bir dizi başka efekt.  Sürgü, karusel ve sürgü olarak da bilinirler.  Bu yazıda, pürüzsüz bir otomatik kaydırma efektine sahip uyarlanabilir bir atlıkarınca tipi kaydırıcı oluşturmaktan bahsedeceğiz.
Bugüne kadar, web'de hazır çözümlere bağlantılar içeren yüzlerce inceleme var, ancak çoğu, kaydırıcının performansını önemli ölçüde azaltan ve sitenin bir bütün olarak yüklenmesini yavaşlatan birçok kullanılmayan işlev içeriyor.  Profesyonel web geliştiricileri, her zaman, ek kitaplıklar ve eklentiler eklemek için düşük bir eşik ile, özelleştirmede esnek yazılım ürünleri oluşturmaya çalışmışlardır.  Bu nedenle, komut dosyamız böyle bir kaydırıcıyı düzenlemek için minimum gereksinimleri kullanır.  Çalışmanın işlevselliği, anahtarlama aralığını, hızı ve belirli bir slayt seçimini ayarlamanıza olanak tanır.  Aşağıda, kaydırıcının çalışmasını kontrol eden bir dizi değişken bulunmaktadır.
zaman listesi- slayt değiştirme hızı
zaman görünümü- gösteri zamanı
radyobut- hızlı gezinme için slaytın altındaki düğmeler.  Varsayılan değer true'dur, false kullanırsanız düğmeler kaybolur.
Şimdi başlayalım!  Dosya oluştur ve aç index.htm 
 

 

 

 

 

 

 

 
 

 
Sunulan kodda, gördüğümüz gibi, karmaşık bir şey yok, kaydırıcı-sarma tanımlar genel konum ve kaydırıcıyı ekranın ortasına hizalar.  Parametre aktif slayt görüntünün boyutunu ve yüksekliğini uzunluğuna göre ayarlar.  Ve kaydırıcı sadece aktif görüntüyü gösterir.
Şimdi dosyayı oluşturalım ve açalım stil.css ve ihtiyacımız olan işaretlemeyi oraya yazın:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");  gövde ( color: #4f4f5a; yazı tipi ailesi: "Roboto", sans-serif; yazı tipi boyutu: 16 piksel; dolgu: 0; kenar boşluğu: 0; ) #slider-wrap( maksimum genişlik: 800 piksel; kenar boşluğu: 0 otomatik; margin-top: 80px; ) #active-slide ( genişlik: %100; görüntü: tablo; konum: göreli; taşma: gizli; -webkit-kullanıcı seçimi: yok; -moz-kullanıcı-seçimi: yok; -ms- kullanıcı-seçimi: yok; -o-kullanıcı-seçimi: yok; kullanıcı-seçimi: yok; ) #slider( konum: göreli; genişlik: hesap(100% * 4); üst: 0; sol: 0; kenar boşluğu: 0 ; dolgu: 0; -webkit-geçişi: 1s; -o-geçişi: 1s; geçiş: 1s; -webkit-geçiş-zamanlama-işlevi: girme kolaylığı; -o-geçiş-zamanlama-işlevi: giriş kolaylığı -out; geçiş-zamanlama-işlevi: içeri girme kolaylığı; ) .slide( genişlik: calc(100%/4); liste stili: yok; görüntüleme: satır içi; kayan nokta: sol; ) .slide img ( genişlik: %100; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; taşma :gizli;metin girintisi:-9999px;arkaplan:url(radioBg.p  ng) merkez alt tekrarsız;  ) .Radio-But .ctrl-select:hover ( imleç:işaretçi; arka plan-konumu:merkez merkez; ) .Radio-But .ctrl-select.active ( background-position:merkez üst; ) #prewbutton, #nextbutton ( ekran :block; genişlik:40px; yükseklik:100%; konum:mutlak; üst:0; taşma:gizli; metin girintisi:-999px; arka plan: url("arrowBg.png") sol merkez tekrarsız; opaklık:0.5 ; z-index:3; anahat:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( right:10px; background:url(arrowBg.png) right center tekrarsız; ) #prewbutton:hover, # nextbutton:hover ( opaklık:1; )
stil özelliği kaydırıcı-sarma yazmak Genişlik– resimlerinizin maksimum uzunluğu.
stil özelliği #kaydırıcı ( genişlik: calc(100% * 4); ) ve .slide ( genişlik: hesap (%100/4); ) kaydırıcınızdaki resim sayısını belirtin.  Örneğimizde 4 tane var.
İleri/geri okları kaydırıcınızın görünürlüğünü engelliyorsa, görünmez hale getirilebilirler ve üzerine gelindiğinde görünürler.  Bunu yapmak için, parametrelerde önAma ve sonrakiAma, opaklık özelliğini 0 olarak ayarlayın.
Şimdi dosyamızı oluşturalım ve açalım kaydırıcı.js, kaydırıcı kodunu içerecektir.  jQuery kitaplığını eklemeyi unutmayın.
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(ok == " prew") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) translateWidth = -$("#active-slide").width() * (slideNum - 1); $(" #slider").css(("dönüştür": "translate(" + translateWidth + "px, 0)")); )else( slideNum = ok; translateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) $(".ctrl-select.active" .removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function()( animSlide("next"); return false; )) $("#prewbutton").click(function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + dizin + "";
 });
 $("
"+toplayıcıSpan+"
").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("etkin"); $(".ctrl-select").click(function()( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var duraklama = yanlış; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide) ("sonraki")), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); duraklatma = doğru;), function()(duraklatma = yanlış; rotator() ; )); var tıklama = false; var prevX; $(".slide").mousedown(function(e)( tıklama = true; prevX = e.clientX; )); $(".slide").mouseup( function() ( tıklama = false; )); $(document).mouseup(function()( tıklama = false; )); $(".slide").mousemove(function(e)( if(tıklama == doğru) ) ( if(e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); }
 if(e.clientX >öncekiX) ( animSlide("prew"); clearTimeout(slideTime); ) tıklama = false;  ) ));  $(".slide").hover().css("imleç", "işaretçi");  döndürücü();  ));
İşlev animasyonSlideüç tür değeri kabul eder: next, prew, numeric value.  Sonraki parametre sonraki slayda geçiş yapar, prew öncekini döndürür ve sayısal değer, slaydın altındaki radyo düğmesi aracılığıyla seçilen belirli slayttır.
Sunulan kaydırıcı, https://pixabay.com/ web kaynağındaki resimleri kullandı.
Bu, jQuery ile yazılmış duyarlı bir dokunmatik kaydırıcıdır.  Bu eklentinin motoru CSS3 animasyonlarını kullanır, ancak aynı zamanda tarayıcıların eski sürümleri için geri dönüşler sağlanır.  Glide.js basit ve hafiftir.
kullanım
1. jQuery'yi dahil edin
Tek eklenti bağımlılığı, önce eklememiz gereken jQuery'dir:
 
2. Glide.js'yi dahil edin
 
3. HTML'yi ekleyin
Temel stilleri bağlayalım.
 
Kaydırıcının html yapısını toparlayalım.
 

 

4. Başlatma
Kaydırıcı varsayılan ayarlarla başlatılıyor...
 
... veya kendiniz için özelleştirin
 
Ayarlar
Mevcut seçeneklerin listesi:
Parametre
Varsayılan değer
Bir çeşit
Tanım
otomatik oynatma
4000

int/bool
Otomatik kaydırma (devre dışı bırakmak için yanlış)
hoverpause
doğru
bool
Fare kaydırıcının üzerine geldiğinde otomatik kaydırmayı duraklat
animasyonZaman
500

int
!!!  Bu seçenek, tarayıcı css3'ü desteklemiyorsa çalışır.  Tarayıcı css3'ü destekliyorsa, bu parametre .css dosyasında değiştirilmelidir!!!
oklar
doğru
bool/dize
Okları göster/gizle/ekle.  Kaydırıcı kapsayıcısında okları görüntülemek için doğrudur.  Gizlemek için yanlış.  Özel bir html kodu eklemek için sınıfın adını da belirtebilirsiniz (örnek: ".sınıf-adı")
oklarSarmalayıcıSınıfı
kaydırıcı oklar
sicim
Oklarla kapsayıcıya atanacak sınıf
okAnaSınıf
kaydırıcı ok
sicim
Tüm oklar için ana sınıf
okSağSınıf
kaydırıcı-ok-sağ
sicim
Sağ ok için sınıf
okSolSınıf
kaydırıcı-ok-sol
sicim
Sol ok için sınıf
okSağMetin
sonraki
sicim
Sağ ok için metin
okSolMetin
önceki
sicim
Sol ok için metin
gezinme
doğru
bool/dize
Slayt navigasyonunu göster/gizle/ekle.  Görüntülemek için doğru.  Gizlemek için yanlış
navCenter
doğru
bool
Merkez Navigasyonu
navClass
kaydırıcı-nav
sicim
Navigasyon konteyneri için sınıf
navItemClass
kaydırıcı-nav_item
sicim
Gezinme öğesi için sınıf
navCurrentItemClass
kaydırıcı-nav__item--geçerli
sicim
Geçerli gezinme öğesi için sınıf
tuş takımı
doğru
bool
Sol/sağ düğmelerine basarak slaytı kaydırın
Dokunma Mesafesi
60

int/bool
Dokunma desteği (dokunma).  Bu özelliği devre dışı bırakmak için False.
önceInit
işlev()()
işlev
Eklenti başlatmadan önce çalışacak geri arama
afterInit
işlev()()
işlev
Eklenti başlatıldıktan sonra çalışacak geri arama
önceGeçiş
işlev()()
işlev
Kaydırıcıyı kaydırmadan önce çalışacak geri arama
geçiş sonrası
işlev()()
işlev
Kaydırıcı kaydırıldıktan sonra çalışacak geri arama
API
API'yi kullanmak için bir değişkene kayma yazın.
var kayma = $(".slider").glide().data("api_glide");
API yöntemleri artık sizin için kullanılabilir.
Glide.jump(3, console.log("Woooo!"));
.current() - Geçerli yan numarayı döndürür
.play() - Otomatik kaydırmayı başlat
.pause() - Otomatik kaydırmayı durdur
.next(callback) - Kaydırıcıyı ileri kaydır
.prev(callback) - Kaydırıcıyı geri kaydır
.jump(distance, callback) - Belirli bir slayta atla
.nav(target) - Navigasyonu belirli bir öğeye ekleyin (ör. "body", ".class", "#id")
.arrows(target) - Okları belirli bir öğeye ekleyin (örneğin: "body", ".class", "#id")

1. jQuery Fresk Eklentisi
Küçük resimler ve resim başlıkları içeren bir açılır pencerede görüntülenen duyarlı jquery galerisi (ekran çözünürlüğü değiştiğinde yeniden boyutlandırılır).  jquery fresk galerisi, IE6+, Firefox 3+, Chrome 5+, Opera 9+ dahil olmak üzere çoğu tarayıcıda düzgün çalışır.  Bu eklentinin ücretsiz sürümü yalnızca ticari olmayan projelerde kullanılabilir.
2. "Adaptör" kaydırıcısı


Çeşitli geçiş efektlerine sahip kaydırıcı (3D dahil 7 farklı efekt).  Github'da proje.
3. Farklı efektlere sahip kaydırıcı eklentisi "jQ-Tiles"


Otomatik kaydırma işlevli, ayarlanabilir kaydırma hızına sahip çeşitli geçiş efektlerine sahip eklenti.
4. jQuery eklentisi "Sly"


Dikey ve yatay kaydırma çubuğunu uygulamak için eklenti.  Github'da proje.
5. Hareketli CSS3 Makisu Menüsü


6. Basit slayt gösterisi


7. İşlevsel jQuery kaydırıcısı "iView Slider v2.0"


İçerik kaydırıcısı / slayt gösterisi (slayt yalnızca resimler değil, aynı zamanda video klipler ve diğer HTML içeriği olabilir).  Navigasyon için şunları kullanabilirsiniz: küçük resimler, Sol / Sağ düğmeleri ve klavyeyi kullanma.  Github.com'da proje.
8. Bir dizi jQuery eklentisi "Vanity"


Sette 7 eklenti var: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder ve jCollapse.  Bu çözümlerden oluşan bir set, kaydırıcıları, araç ipuçlarını, sekmeleri, açılır görüntü pencerelerini ve daha fazlasını uygulamanıza yardımcı olacaktır.
9. Vurgulu CSS3 Etkisi


10. CSS3 Açılır Menüsü


11.iOS kaydırıcısı


Mobil cihazlarda çalışmak üzere tasarlanmış bir kaydırıcı.
12. CSS3 yükleme göstergesi


13. CSS3 üzerine gelme efekti


14. "Ürün Renklendirici" jQuery Eklentisi


Eklenti, ürünleri farklı renklerde görüntülemek için hafif bir çözümdür (örneğin, çevrimiçi giyim mağazaları için, ziyaretçilerin seçim yapmasına izin vermek için ilgili). renk uyumuçeşitli seçeneklerden ürün).  Eklenti, her ürün için yalnızca iki resim gerektirir (tüm renkler bir maske olarak üst üste bindirilir).  Eklenti, IE7+ dahil tüm büyük tarayıcılarda çalışır (PNG şeffaflık görüntüsünü düzeltirseniz IE6'da da çalışır).  GitHub'da proje.
15. CSS3 Animasyonlu Grafikler


16. Resme tıklandığında bindirme efekti oluşturma


Resmin üzerine tıkladığınızda kararır, arka plana gider ve altyazılı paragraflar görünür.  Böylece görüntü üzerinde yer alan unsurların kısa bir açıklamasını yapabilirsiniz.
17. Açılır menü şeklinde sayfa gezinme


Açılır menü şeklinde uygun belge navigasyonu uygulamak için bir çözüm.  İçerik ekranın üst kısmında sabitlenir ve her zaman ziyaretçinin görüş alanında kalır.  Menüde bir bölüm seçtiğinizde, sayfa, belgenin seçilen bölümüne sorunsuz bir şekilde kayar.
18. Fareyle üzerine gelme efektli CSS3 galerisi


Resmin üzerine geldiğinizde, fotoğraflarda hızlı bir değişiklik meydana gelir.  Galeri iki versiyonda uygulanır: ziyaretçi imleci galeriden uzaklaştırdıktan sonra görünen resimlerin açıklamasıyla ve açıklama olmadan.
19. jQuery Paralaks Kaydırıcısı


20. Bloklar üzerinde CSS3 fareyle üzerine gelme animasyonu


21. CSS3 jQuery açılır paneli
Açılır simgeleri görmek için demo sayfasında ekranın alt kısmındaki oka tıklayın.
22. Ücretsiz HTML5 resim galerisi "Juicebox Lite"


Site için çok işlevsel yeni bir resim galerisi.  Galeri, küçük resimli veya resimsiz olabilir, resmin açıklaması olsun veya olmasın, tam ekrana genişletilebilir veya sabit boyutlarda bir sayfada görüntülenebilir.  Demo sayfasında, beğendiğiniz galeri türünü seçebilirsiniz.  Galerinin ücretsiz bir sürümü indirilebilir.  Daha gelişmiş işlevsellik ve geliştirici logosunu kaldırmak için ödeme yapmanız gerekecektir.
23. "JQVMap" Eklentisi


24. CSS3 Paralaks Kaydırıcısı


25. Küçük resimlerle jQuery fotoğraf galerisi


Duyarlı galeri, resim ve küçük resim boyutları, tarayıcı penceresinin boyutuna göre değişir.
26. jQuery içerik kaydırıcı eklentisi "Horinaja"


Eklentinin kurulumu kolaydır, özelleştirilebilir, tarayıcılar arasıdır.  Herhangi bir HTML içeriği, yalnızca resimler değil, slayt işlevi görebilir.  İmleç slayt alanındayken fare tekerleğini kullanarak slaytlar arasında gezinebilirsiniz.
27. jQuery Pikachoose kaydırıcı eklentisi


Üç varyasyonda: açıklama ve küçük resimler olmadan basit bir görüntü değişikliğinin uygulanması;  resim başlıkları ve küçük resimler içeren kaydırıcı;  küçük resimlerle kaydırıcı ve FancyBox efektiyle açılır pencerede daha büyük bir resim açma eklendi.  En son sürüm her zaman Github'da bulunabilir.
28. Açılanlar için Bazı Özel CSS Stilleri


Farklı CSS teknikleri kullanan beş farklı açılır menü stili.
29. Animasyonlu 3D efektli restoran menüsü


Sayfadaki bilgilerin ilginç CSS jQuery sunumu.  Bağlantıya tıklandığında kitapçık menüsü açılır ve ziyaretçi açılır pencerede sunulan yemekler hakkında daha fazla bilgi edinebilir.  Animasyon, IE'de düzgün görüntülenmiyor.
30. Elastislide eklentisi


kauçuğun uygulanması uyarlanabilir atlıkarınca(dikey ve yatay atlıkarınca resimleri) ve resim galerileri.  Tarayıcı penceresi küçültüldüğünde, görüntü sayısı belirli bir minimum değere düşürülür ve ardından kalan görüntülerin boyutu ölçeklenir.  Github'da proje.
31. Taze CSS3 jQuery Yarık Kaydırıcısı


Duyarlı kaydırıcı eklentisi (genişlik yüzde olarak ayarlanabilir ve otomatik olarak ölçeklenir) slaytları değiştirirken ilginç bir animasyon efekti ile iki stilde (bir slayt yarıya kesilir ve farklı yönlere taşınır ve yenisi onun yerini alır).  Klavye navigasyonu mümkündür.  En son sürüm her zaman Github'dadır.
32. "Slicebox" 3D görüntü kaydırıcısının yeni versiyonu


Yeni bir versiyon yapılan değişiklikler ve yeni özelliklerin eklenmesiyle: artık 3D kaydırıcı ölçeklenebilir hale geldi, tarayıcı penceresini küçülttüğünüzde bunu görebilirsiniz;  Firefox için destek eklendi;  slayt açıklamasında, HTML içeriğini zaten kullanabilirsiniz (daha önce açıklama, HTML etiketlerini kullanma yeteneği olmadan link özelliğinden alındı).  Demo sayfasında, eklentiyi kullanmak için 4 seçenek görebilirsiniz. En son sürüm Github.com'da yaşıyor.
Efekt, 3D CU3ER Flash galerisine (demo , indirme) çok benzer, sadece bu 3D kaydırıcı flash teknolojilerinin yardımıyla değil, javascript yardımıyla yapılır.
33.jQuery Eklentisi "PFold"


Deneysel çözüm.  Eklenti, açılan bir notun taklidi ile bir 3D efekti uygular. Çeşitli seçenekler infazlar: üç dönüşlü, iki dönüşlü ve daha sonra genişletilmiş notun ortalanmasıyla bir dönüş.
34.jQuery Eklentisi "Rüzgarlı"


Resimler gibi içeriklerde gezinmek için bir eklenti.  Fotoğraflar arasında gezinirken, farklı yönlere dağılırlar (etki, bir şekilde kartların dağılımını anımsatır). kart oyunu poker).  Navigasyon için sol / sağ düğmelerini veya kaydırıcıyı kullanabilirsiniz (farklı seçenekler için demo sayfasına bakın).  Proje