Slick Carousel: visualizzare una porzione dell'immagine successiva

[exFelino]

Ciao ragazzi,
chi di voi ha usato lo Slick carousel?

Lo sto utilizzando in questa pagina dove funziona perfettamente.

Vorrei modificare la visualizzazione ed esattamente:
1) far visualizzare una porzione dell'immagine successiva dello slider
2) mettere la prima slide allineata a sinistra ed ovviamente anche le altre

Questi sono i parametri da me utilizzati:

infinite: true,
adaptiveHeight: true,
prevArrow: "<div class=\"slick_prev\"><i class=\"fa fa-chevron-left\"></i></div>",
nextArrow: "<div class=\"slick_next\"><i class=\"fa fa-chevron-right\"></i></div>",
cssEase: "cubic-bezier(0.455, 0.030, 0.515, 0.955)"

Secondo la documentazione dovrei aggiungere il pametro

variableWidth: true

Ma il risultato ottenuto non e' quello desiderato.

Qualche suggerimento?

Grazie.

[Floky]

Ciao l'ho usato in qualche occasione anche se non sono un esperto (mi sono arrangiato con la documentazione)

Il punto 1 dovresti risolverlo con l'opzione centerMode:

centerMode type: boolean default: false Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. Il punto 2 non ho ben capito cosa intendi con mettere la prima slide a sinistra... a sinistra di cosa?

[exFelino]

Buongiorno, grazie per i suggerimenti.

1) Esatto, con questo:

centerMode: true,
centerPadding: '60px'

dovrei vedere una porzione della slide successiva e con il padding porre la distanza minima.


2) Al momento vedo solo una slide sia all'avvio che durante lo scroll, mentre negli esempio della guida ufficiale le slide visibili sono piu' di una, possibilmente perche' mancano i settaggi del punto 1.

Provo a settare il tutto e vi aggiorno.

Grazie.

[Floky]

Ciao, per vedere più slides alla volta dovresti inserire anche l'opzione responsive:

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3, // numero di slides da mostrare
        slidesToScroll: 3, // numero di slides da scrollare
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

Spero di aver inteso bene

Qui la documentazione http://kenwheeler.github.io/slick/

[exFelino]

Ho provato il codice che mi hai indicato, ma cosa succede....

1) inizialmente vedo una porzione della slide successiva

2) click sulla freccia per visualizzare la seconda, ed è praticamente collegata con la terza e la quarta e dopo nuovamente il padding di 60px

Non ho capito bene come funziona breakpoint, hai qualche suggerimento in merito?

Grazie.

[Floky]

Ciao. Preciso che non sono un esperto e l'ho imparato alla buona provando.

Se ho compreso bene ti succede che:

1) All'inizio si vede la slide centrale e un pezzo della slide precedente a sx e un pezzo delle slide successiva a destra

2) Quando clicchi sulla freccia per far scorrere le slides si muovono in blocco (non una per volta)

Corretto?

Il codice che ti avevo postato sopra era un esempio delle guida, avresti dovuto cambiare le impostazioni in base alle tue preferenze.

I breakpoint (non so la definizione precisa ma dovresti trovarla agilmente in internet) diciamo sono dei punti ad una certa risoluzione del device (smartphone, tablet, notebook, desktop) in cui si verificano delle modifiche.

Leggi qui che spiegano molto meglio di come posso fare io http://www.html.it/pag/32823/definir...media-queries/

Nell'esempio sopra succede questo:

1) Alla risoluzione normale vengono mostrate 4 immagini (slidesToShow: 4 -> riga 4 del codice) e vengono scrollate 4 immagini alla volta (slideToScroll: 4 --> riga 5) quindi quando clicchi sulla freccia vedrai muoversi 4 immagini

2) Quando si raggiunge il breakpoint 1024 px fino al successivo (600 px) vengono mostrare 3 immagini (slidesToShow: 3 -> riga 10 del codice) e vengono scrollate 3 immagini alla volta (slideToScroll: 3 -> riga 11)

3) QUando si raggiunge il breakpoint 600 px fino al successivo (480 px) vengono mostrare 2 immagini (slidesToShow: 2 -> riga 19 del codice) e vengono scrollate 2 immagini alla volta (slideToScroll: 3 -> riga 20)

4) Stessa discorso.

Nel tuo caso se vuoi sempre una sola foto centrale ad ogni risoluzione metti 1.

Ti ripropongo la guida (vai alla parte Responsive Display) e lo vedi in funzione. Prova ad diminuire le dimensioni della finestra e poi ingrandirla e vedi che si vedono pi� o meno slides in base a quanto � dichiarato nel codice.

[exFelino]

Grazie Floky, sei stato molto chiaro ed esaustivo.

Forse sai perche' da me si incasina, perche' c'e' un'alternanza di foto in formato diverso (verticale/orizzontale)...

Devo provare a mettere foto dello stesso formato!

Ti aggiorno,
intanto grazie.

[exFelino]

Utilizzando il seguente codice:

    centerMode: true,
	centerPadding: \'60px\',
	slidesToShow: 1,
	prevArrow: "<div class=\"slick_prev\"><i class=\"fa fa-chevron-left\"></i></div>",
	nextArrow: "<div class=\"slick_next\"><i class=\"fa fa-chevron-right\"></i></div>",
	cssEase: "cubic-bezier(0.455, 0.030, 0.515, 0.955)",
	responsive: [
		{
		  breakpoint: 768,
		  settings: {
			arrows: false,
			centerMode: true,
			centerPadding: \'40px\',
			slidesToShow: 1
		  }
		},
		{
		  breakpoint: 480,
		  settings: {
			arrows: false,
			centerMode: true,
			centerPadding: \'40px\',
			slidesToShow: 1
		  }
		}
	  ]

ecco cosa ottengo per
immagine in orizzontale: (qui sembra funzionare)
http://lucaolivelli.it/project/duci-...-new-layout-2/

immagini in verticalequi non funziona)
http://lucaolivelli.it/project/duci-...ia-new-layout/

Risultato disastroso se inserisco immagini in orizzontale/verticale!

Cosa ne pensi?

[Floky]

Ciao, non saprei dirti molto onestamente, devi solo provare a fare tentativi con le opzioni a disposizione.

Certo volere inserire sia img verticali che orizzontali complica il tutto e l'effetto "grafico" potrebbe non essere dei migliori. Immagini con dimensioni simili renderebbero tutto pi� omogeneo.

Ho provato a fare un p� di modifiche e il risultato pi� vicino alle tue richieste (immagini sia verticali che orizzontali con foto al centro e foto parziale a sx e foto parziale a dx) l'ho raggiunto aggiungendo le due opzioni:

variableWidth: true,
adaptiveHeight: true


Le tue img se non sbaglio hanno delle dimensioni fisse inline (width: 670px; height: 1000px), sbaglio?

Io le toglierei e darei la classe di bootstrap 4 (img-fluid) o bootstrap 3 (img-responsive) cosi si occupano loro di adattare le img rispettando il rapporto in base alla grandezza del loro container.

variabileWidth dovrebbe tenere la larghezza dell'img (altrimenti le slider sarebbero tutte grandi uguali) mentre adaptiveHeight adatta lo slider in base all'altezza della foto vista in quel momento.

centerPadding onestamente non ho ben capito cosa faccia a dispetto del nome. L'ho provato ma non vedo differenze tra l'usarlo o no.

per creare degli spazi tra le img uso magin (es. margin: 0 25px o quello che vuoi).

Aspetta utenti pi� esperti di me se possono consigliarti meglio.