Efekt, animacja przesuwania - JavaScript i JQuery

pytanie zadane 4 listopada 2016 w JavaScript przez Mavimix Dyskutant (8,390 p.)

Umiem zrobić slajder z animacją pojawiania się i znikania. Chciałbym zamiast tego zrobić efekt przesuwania, taki jak jest np. TU . Jakich funkcji do tego użyć, jak to zrobić?

3 odpowiedzi

odpowiedź 4 listopada 2016 przez Filip31411 Dyskutant (8,820 p.)
wybrane 8 listopada 2016 przez Mavimix

Najlepsza

Można przy użyciu jQuery:

Tworzysz np. div'a (nazwijmy go pojemnik) o wielkości takiego slajdera i ustawiasz mu w css'ie overflow-x: scroll; - to sprawi, że wszystko co będzie w tym div'ie szersze niż on sam, będzie wyświetlane w postaci poziomego paska scroll'owania na dole tego div'a.

Teraz wewnątrz tego pojemnika robisz div'y jego wielkości, ułożone obok siebie (np. za pomocą float: left;), które rzecz jasna będą slajdami.

Ta idea wygląda mniej więcej tak:

Możesz sobie to porównać do tego "czerwonego okienka" na kalendarzu które przesuwasz, żeby zmienić dzień. Tylko, że tu to "okienko" jest nieruchome, a to "dni (czyli slajdy)" będziemy przewijać :)

No i tutaj wkracza jQuery:

Musisz stworzyć sobie np. pod pojemnikiem trzy (w tym wypadku) przyciski, których kliknięcia będziemy obsługiwać - będą one służyły do przewijania slajdera. Załóżmy, że będzie to coś takiego:

<button class="myButton" id="button1" type="button">1</button>
<button class="myButton" id="button2" type="button">2</button>
<button class="myButton" id="button3" type="button">3</button>

No i teraz musimy w JavaScript'cie (a tak dokładnie to w jQuery), "złapać" kliknięcie danego przycisku. Można to zrobić tak:

$(function () {
    $('#button1').click(function () { //coś tam });
    $('#button2').click(function () { //coś tam });
    $('#button3').click(function () { //coś tam });
});

gdzie:

$(function () {
    
});

to funkcja wykonująca się gdy dokument jest "gotowy", to znaczy załadowany. Jest to skrócony zapis tej wersji:

$(document).ready(function () {
    
});

$('#button1')

to uchwyt przycisku pierwszego po id (# na początku - id, . - to klasa). W czystym js'ie było by to tak:

document.getElementById('button1')

.click(function () {  });

To zdarzenie jakie chcemy wykryć (click = kliknięcie): https://learn.jquery.com/events/handling-events/

Teraz zajmijmy się poziomym scrollowaniem. Służy do tego funkcjia jQuery .animate, a my będziemy korzystać z jej argumentu o nazwie (w tym przypadku) scrollLeft. Określa on ilość pikseli o jaką pojemnik ma się "odepchnąć" od lewej strony swoim scrollem.

Załóżmy, że slajd ma szerokość 600px. Jeśli będziemy chcieli wyświetlić pierwszy slajd pojemnikowi scrollLeft ustawimy na 0px, ale jak będziemy chcieli pokazać drugi to scrollLeft będzie równy 600px itd.

A funkcja animate sprawia, że będzie to animowane:

$('#button1').click(function () { $('#pojemnik').animate({scrollLeft: 0}, {600}); });

Wartość "600" po przecinku oznacza ilość milisekund przez jaką ma się wykonywać animacja scrollowania, a "0" po dwukropku to ilość pikseli od lewej strony.

Postaraj się samemu to poskładać. Jakbyś miał jakiś problem to pisz :)

komentarz 6 listopada 2016 przez Mavimix Dyskutant (8,390 p.)

Niestety kod wysypuje się przy okienkach "pojemnik" i "slajd". Divy ustawiają się jeden pod drugim, mimo że każdy ma float: left.

komentarz 7 listopada 2016 przez Filip31411 Dyskutant (8,820 p.)

A tak! Trzeba wszystkie slajdy w "pojemniku" włożyć do diva o ich łącznej szerokości.

odpowiedź 4 listopada 2016 przez Pietrak Pasjonat (18,850 p.)
edycja 21 lutego 2017 przez Pietrak

Ale po co wynajdować od nowa koło? Najlepiej skorzystać z gotowych rozwiązań. Są dopracowane, obsługują urządzenia dotykowe i wygodnie w użyciu. Ja od siebie polecam http://jquery.malsup.com/cycle2/demo/

@EDIT: Rozwiązanie martwe, polecam https://owlcarousel2.github.io/OwlCarousel2/

komentarz 4 listopada 2016 przez Filip31411 Dyskutant (8,820 p.)

No niby tak, ale czy na większą skalę? Czy programowanie polega na zastępowaniu pisania drobnych, własnych algorytmów gotowymi bibliotekami?

To o czym mówisz jest fajne i wygodniejsze, ale moim zdaniem przeznaczone dla kogoś kto sam umiałby coś takiego zrobić.