Horizontale veegschuifregelaar met jQuery en aanraakapparaten ondersteunen?

Ik moet een productschuifregelaar zoals deze maken (zie rode gebied) veeg schuifregelaar met momentum.

Het zou moeten werken op Desktop, iPad en mobiele browser. Kent u een jQuery/jQuery mobiele plug-in om dit te bereiken.

enter image description here

Het effect dat ik wil is bijna gelijk aan deze http://manos.malihu.gr/tuts/jquery_thumbnail_scroller. html (maar niet touch-compatibel)

en precies zoals het gedeelte "Top 25" in de iPad-app van Apple met de naam "Trailers"

enter image description here

45
Ter informatie: de jQuery-mobiele tag verwijderd, omdat de OP in het antwoord van Phill Pafford heeft geantwoord dat hij jQuery-mobile niet in het project gebruikt.
toegevoegd de auteur Smamatti, de bron

15 antwoord

Naar mijn mening iosSlider is geweldig. Het werkt op vrijwel elk apparaat en het is goed gedocumenteerd. Het is gratis voor persoonlijk gebruik, maar voor commerciële sites kost de licentie $ 20.

Een goede optie is ook touchCarousel of RoyalSlider van dezelfde auteur. Deze twee hebben alles wat je nodig hebt, maar ook niet gratis en hebben een prijs van $ 10-12

18
toegevoegd

I would also recommend http://cubiq.org/iscroll-4

MAAR als je daar niet op ingaat, probeer deze plugin dan

http://www.zackgrossbart.com/hackito/touchslider/

het werkt erg goed en staat standaard op een horizontale schuifbalk op de desktop - het is niet zo elegant op de desktop als iscroll-4, maar het werkt erg goed op touch-apparaten

SUCCES!

16
toegevoegd
iScroll werd al genoemd door dSquared en heeft problemen met formulierelementen als ze zich op dezelfde pagina bevinden
toegevoegd de auteur Jitendra Vyas, de bron
en ik heb ook compatibiliteit met de desktop nodig
toegevoegd de auteur Jitendra Vyas, de bron
iScroll werkt alleen als we het op volledig scherm gebruiken
toegevoegd de auteur Jitendra Vyas, de bron
Ik heb iScroll geïmplementeerd op 2 verschillende websites en geen van beiden vereist dat de site op volledig scherm wordt bekeken om te kunnen scrollen - en het werkt gewoon geweldig op desktops en aanraakschermen, fwiw - en dit geldt ook voor de touchslider-methode
toegevoegd de auteur Thomas, de bron

Als ik jou was, zou ik mijn eigen oplossing implementeren op basis van de eventspecificaties. Kortom, wat swipe is - het is de afhandeling van touch-down, touch-move, retoucheer evenementen. hier is een uittreksel van mijn eigen lib voor het afhandelen van iPhone-aanraakgebeurtenissen:

touch_object.prototype.handle_touchstart = function(e){
    if (e.targetTouches.length != 1){
        return false;
    }
    this.obj.style.zIndex = 100;
    e.preventDefault();
    this.startX = e.targetTouches[0].pageX - this.geometry.x;
    this.startY = e.targetTouches[0].pageY - this.geometry.y;
    /* adjust for left /top */
    this.bind_handler('touchmove');
    this.bind_handler('touchend');
}
touch_object.prototype.handle_touchmove = function(e) {
    e.preventDefault();
    if (e.targetTouches.length != 1){
        return false;
    }
    var x=e.targetTouches[0].pageX - this.startX;
    var y=e.targetTouches[0].pageY - this.startY;
    this.move(x,y);

}
touch_object.prototype.handle_touchend = function(e){
    this.obj.style.zIndex = 10;
    this.unbind_handler('touchmove');
    this.unbind_handler('touchend');
}

Ik heb die code gebruikt om 'dingen te verplaatsen'. Maar in plaats van verplaatsen, kunt u uw eigen algoritme maken voor bijvoorbeeld triggering omleiding naar een andere locatie, of u kunt die verplaatsing gebruiken om het element te "verplaatsen/vegen", waarop de veeg op een andere locatie staat.

Het helpt dus echt om de basisprincipes van hoe dingen werken te begrijpen en vervolgens complexere oplossingen te maken. dit kan ook helpen.

Ik gebruikte dit om mijn oplossing te creëren:

http://developer.apple.com/ bibliotheek/IO/# documentatie/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

14
toegevoegd

Heb je iosSlider al geprobeerd? Het kan precies doen wat je nodig hebt.

http://iosscripts.com/iosslider-jquery-horizontal- slider-for-iphone-ipad-safari/

10
toegevoegd
@tMagwell Gelooft u dat $ 20 te veel is? Ik wed dat je deze week meer hebt uitgegeven dan alleen koffie. Voor iets dat je zelf redt, zie ik niet hoe dat 'te veel' is. Sorry voor de rant, maar ik denk dat ontwikkelaars soms onze prioriteiten recht moeten zetten. Laten we het harde werk belonen dat sommige mensen daar doen - niet alles zal lopen onder het ideaal van de vrije/open source.
toegevoegd de auteur Michael Giovanni Pumo, de bron
Deze plug-in is alleen gratis voor persoonlijk/non-profit gebruik, het kost $ 20 voor een enkel domein, maar het is veel te veel. Ik raad het gebruik van iScroll aan, of betaalde touchcarousel/royalslider van CodeCanyon.
toegevoegd de auteur Marvin3, de bron

Take a look at iScroll v4 here: http://cubiq.org/iscroll-4

Het is misschien geen jQuery, maar het werkt op Desktop Mobile en iPad redelijk goed; Ik heb het in veel projecten gebruikt en gecombineerd met jQuery.

Succes!

4
toegevoegd
het probleem hiermee dat het niet werkt met vormelementen.
toegevoegd de auteur Jitendra Vyas, de bron

This one could fit your need:
http://caroufredsel.frebsite.nl/

Voeg jQuery Touchwipe voor touch-ondersteuning toe

Voeg vervolgens in de configuratie toe

scroll : {
wipe: true
}
2
toegevoegd
De site caroufredsel.frebsite.nl is offline.
toegevoegd de auteur Pristine Kallio, de bron
Voor iemand die naar deze thread kijkt, bezoekt u de volgende links om de bibliotheek te vinden: https://github.com/Codeinwp/carouFredSel-jQuery http://coolcarousels.frebsite.nl/c/48/ http://docs.themeisle.com/article/499-getting-started-with-t‌ he-caroufredsel-jque & zwnj; ry-plugin
toegevoegd de auteur Pristine Kallio, de bron

Heb je FlexSlider van WooThemes gezien? Ik heb het op verschillende recente projecten met groot succes gebruikt. Het is ook aanraakscherm ingeschakeld, zodat het werkt op zowel muisgebaseerde browsers als op aanraakgebaseerde browsers in iOS en Android.

2
toegevoegd

Ik heb zoiets bedacht voor een van mijn websites in ontwikkeling.

Ik heb StepCarousel voor de caroussel gebruikt omdat dit de enige is die ik anders kan accepteren maat in dezelfde carrousel.

Naast dit om het touch-swipe-effect toe te voegen, heb ik jquery.touchswipe plugin;

En de sta-carrousel verplaatst het paneel of laat het achter met een functie, zodat ik het volgende kan doen:

$("#slider-actu").touchwipe({
    wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
    wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
    min_move_x: 20
});

You can view the actual render at

this page

Ik hoop dat ik je help.

1
toegevoegd
1
toegevoegd
Thomas heeft het al genoemd
toegevoegd de auteur Jitendra Vyas, de bron
Sorry, ik antwoordde vanuit mijn telefoon en besefte niet dat het al werd genoemd
toegevoegd de auteur Sergio Majluf, de bron

Ive found another: http://swipejs.com/

lijkt goed te werken, maar ik ondervind er een probleem mee wanneer ik het combineer met bootstrap in de OS X-versie van Chrome. Als de compatibiliteit van alle browsers geen probleem is, dan ben je een gouden.

1
toegevoegd
Ik zou zeggen dat dit echt de beste oplossing is.
toegevoegd de auteur Xiao Xiao, de bron

Mogelijk bent u geïnteresseerd in het volgende:

I realize this is not a jQuery solution, but Sencha Touch framework is pretty good for building your target UI. Example (click the Carousel sidebar link): http://dev.sencha.com/deploy/touch/examples/kitchensink/

0
toegevoegd
Ik hoop dat je een paar visuele aanwijzingen toevoegt dat dat specifieke gebied bij aanraking kan glijden; misschien een pijltje links/rechts toevoegen? Het klinkt misschien een beetje saai, maar het zou een zogenaamd betere visuele betaalbaarheid genereren .
toegevoegd de auteur moey, de bron
0
toegevoegd
Beide koppelingen zijn verbroken
toegevoegd de auteur Chris Haines, de bron
Het is niet anders
toegevoegd de auteur Jitendra Vyas, de bron

Met mijn ervaring is de beste open source-optie UIKIT met zijn uikit-schuifcomponent . en het is heel eenvoudig te implementeren, bijvoorbeeld in jouw geval zou je zoiets als dit kunnen doen.

<div data-uk-slider>
<div class="uk-slider-container">
    
    //width of the elements
  • ...
  • //slide elements ...
</div>
0
toegevoegd

Bekijk de scrollweergave van jQuery (demo hier ). Hier is de git-hubrepository voor dat experimentele project. Kijk naar hun html om te zien welke bestanden moeten worden ingesloten en welke attributen moeten worden toegevoegd aan de elementen die u wilt doorbladeren.

Ik heb dit gebruikt om div elementen horizontaal te scrollen op aanrakingsapparaten.

0
toegevoegd
maar het is gebaseerd op jQuery-mobiel. en ik gebruik het niet voor het project
toegevoegd de auteur Jitendra Vyas, de bron

Checkout Portfoliojs jQuery plugin: http://portfoliojs.com

Deze plug-in ondersteunt Touch Devices, Desktops en Mobile Browsers. Het heeft ook pre-loading-functie.

0
toegevoegd