Slick Karussell synchron wählen

Ich versuche, einen glatten Schieberegler auf eine HTML-Synchronisierung wählen und mit einer ziemlich harten Zeit mit ihm.Slick Karussell synchron wählen

Hier ist mein Code:

$(function() {  
    $('.slick-slider').slick({ 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     infinite: false, 
     autoplay: false, 
     draggable: false, 
     arrows: false, 
     swipe: false, 
     speed: 200, 
     fade: true, 
     lazyLoad: 'progressive', 
     cssEase: 'linear' 
    }); 
    var select = $("#select"); 
    var $carousel = $('.slick-slider'); 
    $("#select").change(function() { 
     goTo = select.selectedIndex; 
     $carousel.slick("goTo", goTo); 
    }); 
});

Es ist die gleiche Menge an Optionen/Dias.

Ich habe verschiedene Dinge versucht, aber da ich ziemlich unwissend JavaScript weise, ich bin immer noch stecken ..

https://jsfiddle.net/70he30n1/

- >>> Lösung: https://jsfiddle.net/gpuubf5y/7/

Quelle

2017-01-23 El marabti mehdy

Können Sie eine [jsfiddle] (https://jsfiddle.net/) bereitstellen? –

Hier ist es: https: //jsfiddle.net/70he30n1/ –

Wenn Quentin Rogers Antwort richtig ist, dann markieren Sie seine Antwort als die richtige Antwort. Lesen Sie [this] (http://meta.stackoverflow.com/questions/311829/why-cant-i-mark-my-title-as-solved). –

können Sie versuchen Sie dies:

$(function() { 

    var $carousel = $('.slick-slider').slick({ 
    slidesToShow: 1, 
    slidesToScroll: 1, 
    infinite: false, 
    autoplay: false, 
    draggable: true, 
    arrows: false, 
    swipe: true, 
    speed:200, 
    fade: true, 
    lazyLoad: 'progressive', 
    cssEase: 'linear' 
    }); 
    var select = $("#select"); 
    $("#select").change(function() {  
    goTo = select.val(); 
    console.log(goTo); 
    $carousel.slick("goTo", goTo-1); 
    }); 
});

Arbeits Demo: https://jsfiddle.net/gpuubf5y/

Quelle

2017-01-23 18:53:28

Vielen Dank, aber ich kann den Wert nicht auswählen, weil er den Produktnamen entspricht, daher gibt er eine Zeichenfolge zurück. Tut mir leid, ich hätte es in die JSfiddle setzen sollen ... –

Ich habe die jsfiddle aktualisiert: https://jsfiddle.net/gpuubf5y/2/ –

So etwas wie das vielleicht? https://jsfiddle.net/gpuubf5y/3/ –

-1

den Index der Option Gebrauch referenzieren

goTo = $("#select option:selected").index();

Quelle

2017-01-23 23:47:13 korwalskiy

Das würde * alle * ausgewählte Option auf der Seite bekommen. – Walf

@Walf Im Allgemeinen würde es natürlich, aber der Selektor ist leicht anpassbar, z.B. '#someContainer Option: selected' oder' #thatParticularSelect Option: selected'. – Xufox

@Xufox sollte es nicht angepasst werden müssen; Das Elternelement ist bereits vorhanden. – Walf

Sie brauchen keine nativen Eigenschaften über jQuery zugreifen. Wenn Sie Ihre Auswahl Zuordnung ändern, um das eigentliche Element zu erhalten, etwa so:

... 
var $carousel = $('.slick-slider'); 
var select; 
select = $("#select").change(function() { 
    goTo = select.selectedIndex; 
    $carousel.slick("goTo", goTo); 
})[0];// array notation returns native 
...

dann der Rest des Codes sollte, ohne die Notwendigkeit arbeitet prop() zu verwenden.

Quelle

2017-01-24 02:09:07 Walf

Slick Karussell synchron wählen

Antwort

Verwandte Themen