WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

Full Width Slider 2

— Add- On do WorldWideScripts.net

Subskrybuj nasz kanał aby być na bieżąco!

Nowy! Dołącz do nas, jak chcesz!


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Pełna Szerokość suwak 2 jest łatwy w użyciu jQuery obrazu suwak zoptymalizowany do pełnej szerokości ekranu.

cechy

- JQuery napędzane.
- Elastyczny projekt.
- Regulowana prędkość przejścia.
- Auto pokaz slajdów z przerwą na aktywowaniu.
- Kompatybilny z większością przeglądarek (IE8 i powyżej, Chrome, Firefox, Safari i Opera)
- Można dodać tytuł, opis i przycisk Link do każdego slajdu.

Nowe metody:

addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

Nowe opcje:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

Przykład ze wszystkimi ustawieniami:

 <script type = "text / javascript"> $ (document).ready (function () { // Tworzymy nową instancję suwak var my_slider = $ ('. Przykład ") fws2 ().; // Ustaw suwak ustawień (opcja) można całkowicie zignorować ten blok my_slider.settings ({ cs: 0, // Aktualny slajdów; 0 - pierwszy, 1 - drugi itd... czas trwania: 750, // Czas trwania slajdu; milisekund hoverpause: 1, // Pauza przy aktywowaniu; 1 - tak, 0 - nie wstrzymać: 6000, // Pauza przed wyjazdem do następnego slajdu; milisekund Strzałki: 1, // Wyświetl strzały; 1 - tak, 0 - nie kule: 0, // Wyświetl kule; 1 - tak, 0 - nie expandDuration: 750, // Wyświetl strzały; 1 - tak, 0 - nie linktext: 'Czytaj więcej', // przycisk TEXT (ustawienie globalne) // Zaawansowane opcje titleHTML: "<h4>% title% </ h4> ', // klienta HTML dla tytule descriptionHTML: '<p>% malejąco% </ p>', // klienta HTML do opisu linkHTML: "<a href="%link%">% linktext% </a> ', // klienta HTML przycisk Link beforeInit: function () {} // Funkcja uruchomienia przed suwaka init, afterInit: function () {} // Funkcja uruchomić po suwaku init, slideStart: Funkcja (zjeżdżalnia) {} // Funkcja uruchomienia na początku slajdów, zwraca obiekt slajdów slideEnd: Funkcja (zjeżdżalnia) {} // Funkcja uruchomienia na koniec slajdów, zwraca obiekt slajdów }); // Slajdów Dodawanie my_slider.addSlide ({ obraz: "img / slide_1.jpg ', // Źródło zdjęcia Tytuł: "Slajd 1 ', // Tytuł Opis: "Opis", // Przesuń Opis linktext: '', // Przycisk Tekst (opcjonalne, będzie korzystać z globalnych ustawień inaczej) Link: http: // www "// Czytaj więcej link URL }); // Uruchomienie suwak my_slider.start (); }); </ script> 

Krótki przykład bez zmiennej, przy użyciu łańcuchowym:

 <script type = "text / javascript"> $ (document).ready (function () { $ ('. przykład1 ") .fws2 ({kule: 1, strzałki: 0}) .addSlide ({zdjęcie: "img / slide_1.jpg", tytuł: "Slajd 1", opis: "opis", Link: http: // www '}) .addSlide ({zdjęcie: "img / slide_2.jpg", tytuł: "Przesuń 2 ', opis:" opis ", Link: http: // www'}) .addSlide ({zdjęcie: "img / slide_3.jpg", tytuł: "Przesuń 3 ', opis:" opis ", Link: http: // www'}) .początek(); }); </ script> 

Przykład wykorzystania funkcji zwrotnej

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. przyklad2 ") fws2 ().; example_slider.settings ({ afterInit: function () { alert ("Slider gotowy!"); } slideEnd: Funkcja (zjeżdżalnia) { var title = slide.find ("title"). text ().; alert ("To" + nazwa); } }); example_slider.addSlide ({zdjęcie: "img / slide_1.jpg", tytuł: "Slajd 1", opis: "opis", Link: http: // www "}); example_slider.addSlide ({zdjęcie: "img / slide_2.jpg", tytuł: "Przesuń 2 ', opis:" opis ", Link: http: // www"}); example_slider.addSlide ({zdjęcie: "img / slide_3.jpg", tytuł: "Przesuń 3 ', opis:" opis ", Link: http: // www"}); example_slider.start (); }); </ script> 

Przykład dostosowywania HTML

 <script type = "text / javascript"> $ (document).ready (function () { var example_slider = $ ('. Przykład 4') fws2 ().; example_slider.settings ({ titleHTML: "<h1> <a href="%link%">% title% </a> </ h1>", descriptionHTML: '<p> <i class = "fa fa-check" /> <span>% malejąco% </ span> </ p>', linktext: 'Czytaj więcej', linkHTML: "<a href="%link%">% linktext% o% title% </a>" }); example_slider .addSlide ({zdjęcie: "img / slide_1.jpg", tytuł: "Slajd 1", opis: "opis", Link: http: // www '}) .addSlide ({zdjęcie: "img / slide_2.jpg", tytuł: "Przesuń 2 ', opis:" opis ", Link: http: // www'}) .addSlide ({zdjęcie: "img / slide_3.jpg", tytuł: "Przesuń 3 ', opis:" opis ", Link: http: // www'}) .początek(); }); </ script> 

Bądź na bieżąco!

Dołącz do nas na Facebooku lub Twitterze i uzyskać najnowsze informacje na temat aktualizacji pozycji i nadchodzących wtyczek i skryptów!

Można również śledzić nas na Instagram i wkrótce na YouTube z samouczki wideo na temat jak zainstalować nasze pluginy i skrypty!

Lista zmian

08 grudnia 2015

- Kod Javascript został przepisany.
- Skrypt imagesloaded.js jest opcjonalne.
- HTML został usunięty. To jest teraz całkowicie zbudować z javascript.
- Link czcionki Google jest usuwany z głowy, ponieważ nie jest już używany.
- Suwak jest teraz inicjowane za pomocą $ (selektor).fws2 ();

- Nowe metody:

 addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

- Nowe opcje:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

10 kwietnia 2014

- Suwak obsługuje wiele wystąpień na stronie.
- Dodane pociski nawigację.
- Arrow / Bullets nawigacji można włączyć / wyłączyć teraz.
- Dodano opcję wyłączenia przystanek autoslide po najechaniu myszą.
- Suwak używa teraz font-niesamowite zamiast obrazów dla strzałek nawigacyjnych i kul.
- Dodano klawiaturę strzałki w lewo / prawo nawigacja.


Pobierz
Inne akcesoria w tej kategoriiWszystkie składniki tego autora
KomentarzeNajczęściej zadawane pytania i odpowiedzi

Właściwości

Stworzony:
16 listopada 12

Ostatnia aktualizacja:
08 grudnia 15

Wysoka rozdzielczość:
Tak

Zgodne przeglądarki:
IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Google Chrome

Pliki wliczony:
JavaScript JS, HTML, CSS

Wersja oprogramowania:
jQuery

Słowa kluczowe

eCommerce, eCommerce, Wszystkie przedmioty, pełny, javascript, jquery, js, czuły, suwak, pokaz slajdó, w, szerokość