Prosty slider na stronę w JS

[Gość Ramzes.]

Witam.

Czy mógłby mi ktoś powiedzieć jak zrobić lub skąd pobratać skrypt (czy cokolwiek to jest) takie jak na tej stronie? 

 

http://www.arsenalsite.cz/index.php?strana=1

Chodzi mi o to pod menu.  

[Gość Ramzes.]

@Damian_RastMan

Wybrałem sobie ten: 

http://www.jqueryscript.net/slider/Simple-And-Elegant-Image-Carousel-jQuery-Plugin-terseBanner.html

Ale w pobranym folderze jest kilka podfolderów a ja za bardzo tego nie ogarniam gdzie i który kod wkleić. Mógłbyś mi pomóc to ogarnąć?

[Velta]

3 minuty temu, Ramzes. napisał:

Wybrałem sobie ten: 

http://www.jqueryscript.net/slider/Simple-And-Elegant-Image-Carousel-jQuery-Plugin-terseBanner.html

Ale w pobranym folderze jest kilka podfolderów a ja za bardzo tego nie ogarniam gdzie i który kod wkleić. Mógłbyś mi pomóc to ogarnąć?

Pod informacjami o paczce masz instrukcję oraz kody potrzebne do działania.

[Gość Ramzes.]

Kurcze, no nie potrafię tego zrobić. Mógłby mi ktoś takie coś ogarnąć w pustym dokumencie, tylko potrzebny kod do slidera i pliki, potem z tego paczuszkę, żebym wiedział co wstawić, a ja wynagrodzę lajkami.  

Ten prostszy: http://www.jqueryscript.net/slider/Simple-And-Elegant-Image-Carousel-jQuery-Plugin-terseBanner.html

Ten bardziej zaawansowany: https://owlcarousel2.github.io/OwlCarousel2/

W sumie to obojętne który, bo oma mi się podobają.

 

Jeszcze jedno pytanko. Na tej stronie co podałem wyżej jest zrobiony efekt "zanikającego tekstu" przy tych artykułach. To też jest w js? Mógłby ktoś podlinkować to?

[DrDomix658]

Jak chcesz mieć fajny i ładny i efektywny slider z wieloma możliwościami customizacji, to polecam OWL Carousel

https://owlcarousel2.github.io/OwlCarousel2/

Aczkolwiek wskazane jest obeznanie w języku JS jeżeli chcesz tego używać.
Nie musisz umieć JS na perfekt aby tego używać, aczkolwiek pojęcie pobieranie elementów DOM, zdarzenia, funkcje, funkcje anonimowe itp.. Nie powinny być Ci obce.
W przeciwnym wypadku nawet instrukcja może Ci nie pomóc aby to prawidłowo zaimplementować na stronę WWW  

[Gość Ramzes.]

Próbowałem zrobić tak jak w tej instrukcji ale coś mi nie idzie :/

[Janso123]

Ramzes. poczytaj trochę o JS nie jest to jakiś super trudny i skomplikowany język   a co do pomocy polecam znalesć jakiś przykład użycia któregoś z tych sliderów i postaraj się użyć CTRL + C -> CTRL + V  poczytaj instrukcję i powinno działać. Jak nie działa to zobacz co konsola Tb mówi tam będziesz miał wiele napisane

[Damian_RastMan]

To się nazywa slider 

http://www.jqueryscript.net/slider/

Tutaj prostsza wersja:

http://bxslider.com/

[Gość Ramzes.]

No ładny ten slider, ale u mnie słabo z JS i tego, a nawet tamtego nie potrafię "doczepić" do swojej strony

[Damian_RastMan]

Js. Zaraz coś naskrobię.

//Edit Zapomniało mi się, bo byłem na tele ... Daj mi 10 minut

 

Spoiler

 

Trzymaj

https://megawrzuta.pl/download/fc24db86f5d9c13c58a0dae11e187676.html

Skan:

https://www.virustotal.com/pl/file/2274da7d64101403aed0a394928e2e26f7182d4c2d6b481e8fb7618c16668b85/analysis/1495795940/

 

 

//linki do projektu wygasły, ale temat zostawiam bo jakąś wartość merytoryczną ma - @carbonx

 

Cała konfiguracja jest w pliku index.html we wskazanych miejscach, wystarczy przekopiować ten kod w odpowiednie sekcje na stronie właściwej wraz z katalogami owlcarousel i slider_images . Pamiętaj również o treści plkiku css/style.css - tam jest styl diva s_item który odpowiada za wygląd pojedynczego slajda.

 

Przykład innej konfiguracji:

$(document).ready(function(){
	$('.owl-carousel').owlCarousel({
		loop:true,
		items: 1,
		nav:true,
		navText: ['Poprzedni','Następny'],
		dots:false,
		stagePadding: 150,
		margin: 10,
		autoplay: true,
		autoplayTimeout: 5000
	})
});

Konfiguracja, zgodnie z tym co napisał DrDomix jest czytelna i całkiem szeroka, tutaj znajdziesz więcej na ten temat:

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html