Touchswipe og Bootstrap 3 Carousel

En ting jeg har lagt merke til hos en del mobilbrukere er at de forventer at bildegalleri på nettsider skal oppføre seg som bildegalleriet på mobilen – at man skal kunne dra fingeren over skjermen for å se neste bilde. Men slik er det ikke nødvendigvis på en nettside og man bryter litt av den besøkendes forventning av hvordan man skal navigere i bildegalleriet på nettsiden.

Et veldig populært rammeverk er Bootstrap. Som nå har kommet til versjon 3. I Bootstrap følger det med en karusell som man kan bruke til f.eks. bildegalleri. Men karusellen støtter ikke at man på enheter med berøringsskjerm skal kunne dra (swipe) fingeren over skjermen for å se neste side. Men det kan man legge til selv ved å bruke jQuery og TouchSwipe.

Kode


$(".carousel-inner").swipe( {
	swipeLeft:function(event, direction, distance, duration, fingerCount) {
		$(this).parent().carousel('prev');
	},
	swipeRight: function() {
		$(this).parent().carousel('next');
	}
});

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s