Content slider 2 - LO SMANETTONE

Esempi e Codice
Vai ai contenuti
LUCE SIA
"Una luce che guida, una forza che unisce"

CONTENT SLIDER 2 + VIDEO  - (Adattato)
Progetto FREE

Questo oggetto fornito da INCOMEDIA® ha delle grosse limitazioni:
  • Non puoi superare un Titolo oltre i 36 px altrimenti a risoluzione più basse taglia
  • Le descrizioni devono essere sempre orientate tra i 13-14 px altrimenti a risoluzioni più basse taglia
  • Le immagini che si mettono vengono tagliate a risoluzioni più basse.

Ma è possibile intervenire con degli adattamenti? La risposta è si ma ci si deve accontentare di un adattamento quasi prossimo al responsive.
L'esempio proposto si appoggia su una struttura layout ben definita. Poiché il codice "extra" fa riferimento proprio ai break-point impostati se avete voglia e tempo dovete impostare i vostri break-point come da immagine seguente     Altrimenti lasciate perdere    se non siete ben addentrati nella programmazione. Di contro un utente esperto può anche fare a meno di questa configurazione e intervenire sul codice in proprio eliminando le parti che non verranno utilizzate.
PRO
  • Se il tutorial viene eseguito correttamente, l'effetto di uno slide con video è estremamente impattante e comunica più di mille parole.
CONTRO
  1. Ricerca e ottimizzazione dei video
    • La ricerca del video adatto può richiedere molto tempo.
    • I video devono essere leggeri per garantire un caricamento rapido e una buona esperienza utente.
    • Le dimensioni dei video devono essere standardizzate a 1280x720 o 1920x1024.
  2. Immagini di pre-caricamento
    • Devono avere dimensioni comprese tra 1280px e 1920px, con un rapporto 16:9.
  3. Competenze tecniche necessarie
    • È importante avere qualche nozione per comprendere il codice extra e per identificare correttamente gli oggetti durante l'ispezione del codice.
Fatte le dovute premesse se te la senti e sei pronto per questa sfida procedi come di seguito ti viene indicato.
PREPARAZIONE DEI BREAK POINT:
  • VAI AL PASSO 2 - MODELLO - ICONA RESPONSIVE DESIGN.
  • Realizza una struttura come nell'immagine seguente (devi avere una versione X5PRO per farlo) ▼
  • (  OBBLIGATORIA SE VUOI SFRUTTARE QUESTO ESEMPIO  ) ►►►  SCARICA IL LAYOUT PRE-FORMATTATO


Una volta fatto ciò salva tutto e passiamo all'inserimento degli oggetti.
SEI PRONTO? OK.
Vai al passo 3 MAPPA  e crea la tua pagina che chiamerai con un tuo nome o anche come PAGINATEST. (il nome è indifferente)


Vai sulla struttura del progetto PASSO 4 ►PAGINE e inserisci un separatore che abbia una altezza di 50PX . Setta i margini esterni e interni tutti a zero.



Sotto al separatore metti un OGGETTO CONTENT SLIDER . Setta i margini esterni e interni tutti a zero. Estendi in tutta la larghezza.



Nelle opzioni del CONTENT SLIDER (PASSO 4 DOPPIO CLICK SUL CONTENT SLIDER) esegui e settaggi come da immagini successive:
NB: setta anche i margini e la centratura del testo,della descrizione e del pulsante CONTATTI . ▼

Come vedi non devi caricare nessuna immagine ma impostare solo un titolo,una descrizione e un pulsante contattaci ▲
Prosegui con gli altri settaggi: ▼





Se sei sicuro di aver settato il tutto come da immagini sopra riportate Salva tutto
Ora in struttura stile riga aggancia tra loro i due oggetti
Poi nelle opzioni scegli VIDEO. Inserisci un tuo video MISURE 1280X720 e sotto una immagine di copertina che fungerà da pre-caricamento video misure 1920x1280.
Evita video con basi musicali.


Ora devi inserire il codice extra che farà funzionare l'esempio.
Vai al passo 3, seleziona la tua pagina TEST e poi clicca in alto PROPRIETÀ E POI SU ESPERTO.

Inserisci con un copia e incolla tutto il seguente codice:
ATTENZIONE!!! In neretto ti ho lasciato il marcatore che tu dovrai sostituire con il tuo e lo trovi con ispezione del codice lanciando un'anteprima con il browser Google
Per trovarlo manda in esecuzione la pagina con il browser CHROME poi con il mouse vai al centro dell'immagine o del video in esecuzione e clicca con il tasto destro.Ti si aprirà una consolle di ispezione. La freccia che ho inserito riguarda il marcatore di questa pagina imObjectContentSlider .
Tu sul codice devi mettere il tuo sostituendo l'attuale in tutto il codice.
Ad esempio: in questo tutorial l'oggetto ha l'id _16_105. Il tuo potrebbe avere _10_1 o altro.

Immagine esempio

Ecco il codice da inserire in stila riga PROPRIETÀ E POI SU ESPERTO PRIMA DELLA CHIUSURA DEL TAG HEAD. ▼



CODICE - PRIMA DELLA CHIUSURA DEL TAG HEAD
<style> body {overflow-x:hidden} </style>
<style>
/* Regola generale per il contenitore dello slider
Fusione del codice di Giancarlo Web, Giuseppe Guida e Max */
#imObjectContentSlider_16_105 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Immagini dello slider */
.content-slider.slide-image-content {
  width: 100%;
  height: auto;
  object-fit: cover; /* Riempie senza deformarsi */
  box-sizing: border-box;
}

/* Media Query */

/* Risoluzioni >= 1680px */
@media (min-width: 1680px) {
  #imObjectContentSlider_16_105 {
      min-height: 680px; /* Altezza standard per risoluzioni alte */
  }
  .content-slider.slide-image-content {
      object-fit: cover; /* Copre senza tagliare */
  }
  .slide-title {
      font-size: 28px; /* Font maggiore per risoluzioni grandi */
      padding: 10px 20px;
  }
  .slide-button {
      font-size: 16px;
      padding: 10px 20px;
  }
}

/* Da 1679,9px a 1379px */
@media (max-width: 1679.9px) and (min-width: 1380px) {
  #imObjectContentSlider_16_105 {
      min-height: 700px;
  }
  .content-slider.slide-image-content {
      object-fit: cover;
  }
  .slide-title {
      font-size: 24px;
  }
  .slide-button {
      font-size: 14px;
      padding: 8px 16px;
  }
}

/* Da 1378,9px a 1280px */
@media (max-width: 1378.9px) and (min-width: 1280px) {
  #imObjectContentSlider_16_105 {
      min-height: 650px;
  }
  .content-slider.slide-image-content {
      object-fit: cover;
  }
  .slide-title {
      font-size: 22px;
  }
  .slide-button {
      font-size: 12px;
      padding: 6px 14px;
  }
}

/* Da 1279,9px a 1149px */
@media (max-width: 1279.9px) and (min-width: 1150px) {
  #imObjectContentSlider_16_105 {
      min-height: 550px;
  }
  .content-slider.slide-image-content {
      object-fit: contain; /* Adatta senza tagliare */
  }
  .slide-title {
      font-size: 20px;
  }
  .slide-button {
      font-size: 11px;
      padding: 5px 12px;
  }
}

/* Da 1148,9px a 960px */
@media (max-width: 1148.9px) and (min-width: 961px) {
  #imObjectContentSlider_16_105 {
      min-height: 450px;
  }
  .content-slider.slide-image-content {
      object-fit: contain;
  }
  .slide-title {
      font-size: 18px;
  }
  .slide-button {
      font-size: 10px;
      padding: 4px 10px;
  }
}

/* Da 959,9px a 720px */
@media (max-width: 959.9px) and (min-width: 721px) {
  #imObjectContentSlider_16_105 {
      min-height: 300px;
  }
  #imObjectContentSlider_16_105 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 30pt !important;
  }
}

/* Da 800px a 600px */
@media (max-width: 800px) and (min-width: 600px) {
  #imObjectContentSlider_16_105 {
      min-height: 200px !important;
  }
  .slide-title {
      font-size: 14px !important;
  }
  .slide-description {
      font-size: 10px;
  }
}

/* Da 719,9px a 200px */
@media (max-width: 719.9px) and (min-width: 200px) {
  #imObjectContentSlider_16_105 {
      min-height: 250px !important;
  }
  #imObjectContentSlider_16_105 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-title {
      font-size: 22pt !important;
  }
  #imObjectContentSlider_16_105 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button {
      font-size: 12pt;
  }
  #imObjectContentSlider_16_105 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn {
      width: 40px;
      height: 40px;
  }
}

/* End custom code */
</style>
Salva tutto
Prova in locale l'esecuzione della pagina che hai creato. Simula il restringimento del browser per vedere il comportamento alle varie risoluzioni oppure prova con uno dei tanti simulatori responsive che si trovano in rete.
COMMENTA ▼
Non sono presenti ancora recensioni.
5 
0
4 
0
3 
0
2 
0
1 
0

Crediti

Questo pannello è stato personalizzato da Losmanettone.it a partire dal progetto open source SIENNA concesso sotto licenza MIT.

Torna ai contenuti