Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it L'avatar di exFelino
    Registrato dal
    Jul 2014
    residenza
    Aci Catena (CT)
    Messaggi
    708

    Slick Carousel: visualizzare una porzione dell'immagine successiva

    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:
    codice:
    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
    codice:
    variableWidth: true
    Ma il risultato ottenuto non e' quello desiderato.

    Qualche suggerimento?

    Grazie.

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    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?
    Ultima modifica di Floky; 23-11-2017 a 19:04

  3. #3
    Utente di HTML.it L'avatar di exFelino
    Registrato dal
    Jul 2014
    residenza
    Aci Catena (CT)
    Messaggi
    708
    Buongiorno, grazie per i suggerimenti.

    1) Esatto, con questo:
    codice:
    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.

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    Ciao, per vedere più slides alla volta dovresti inserire anche l'opzione responsive:

    codice:
    $('.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/

  5. #5
    Utente di HTML.it L'avatar di exFelino
    Registrato dal
    Jul 2014
    residenza
    Aci Catena (CT)
    Messaggi
    708
    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.

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    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.

  7. #7
    Utente di HTML.it L'avatar di exFelino
    Registrato dal
    Jul 2014
    residenza
    Aci Catena (CT)
    Messaggi
    708
    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.

  8. #8
    Utente di HTML.it L'avatar di exFelino
    Registrato dal
    Jul 2014
    residenza
    Aci Catena (CT)
    Messaggi
    708
    Utilizzando il seguente codice:
    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?

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2016
    Messaggi
    94
    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.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.