CONTENT SLIDER IN TRASPARENZA - Adattato
Progetto FREE
Un content slider (o slideshow) è un elemento grafico utilizzato nei siti web per visualizzare contenuti (come immagini, testi o video) che si spostano o "scivolano" automaticamente o quando l'utente interagisce con esso. Di solito, i contenuti vengono visualizzati uno alla volta, con la possibilità di navigare tra le diverse "slide" utilizzando frecce o indicatori. I content slider sono utili per presentare informazioni in modo dinamico e coinvolgente senza occupare troppo spazio nella pagina. Possono essere usati per presentare prodotti, offerte, gallerie fotografiche, o anche testi e citazioni.
TIPO DI PROGETTO:🕒
Difficoltà:
- Nulla per un utente avanzato
- Media per un utente alle prime armi come smanettone
- Alta per un neofita.
SEI PRONTO? OK! Segui le istruzioni passo passo.
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 ) 
CREA ORA LA TUA PAGINA TEST AL PASSO 3 MAPPA - NUOVA PAGINA ▼
- NELLA NUOVA PAGINA APPENA CREATA INSERISCI DUE SEPARATORI DA 10PX CADAUNO
(da calcolare in altezza a secondo delle dimensioni delle immagini utilizzate). Non toccare i margini. - IN MEZZO AI DUE SEPARATORI METTI L'OGGETTO CONTENT SLIDER
. Tutti i margini interni ed esterni di questo oggetto devono essere a zero come da immagine indicativa.
- AGGANCIA I TRE OGGETTI TRA LORO IN STILE RIGA CON MASSIMA ESTENSIONE. ↔
- VAI ORA AL PASSO 3 - CREAZIONE DELLA PAGINA E FARE DOPPIO CLICK SUL CONTENT SLIDER
- REGOLA IL SETUP DEL CONTENT SLIDER COME DA IMMAGINE SEGUENTE:▼
- INSERIRE IN ELENCO IMMAGINI UNA SEQUENZA A TEMPO DI 2 IMMAGINI NELLE OPZIONI DI PROGRAMMA
- MISURE : (IMPORTANTE) 1920X <1280 ▼
- SALVA TUTTO.
- Ora vai AL PASSO 3 e fai click su proprietà della pagina che hai creato (nel nostro caso si chiama CONTENT SLIDER).
- Aprite l'opzione ESPERTO e su CODICE - prima della chiusura del tag HEAD inserite tutto il codice che segue:
- NB: In neretto l'identificatore da cambiare (su tutto il codice) con il vostro ID oggetto tramite ispezione codice. In verde il codice commentato
CODICE - PRIMA DELLA CHIUSURA DEL TAG HEAD | ||
<style> /* Blocca la barra inferiore *con break-point pari o superiori a 1380 */ body {overflow-x:hidden} </style> <style> /* Regola generale per il contenitore dello slider Fusione del codice di Giancarlo Web, Giuseppe Guida e Max */ #imObjectContentSlider_9_08 { 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_9_08 { min-height: 700px; /* 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_9_08 { 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_9_08 { 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_9_08 { 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_9_08 { 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_9_08 { min-height: 300px; } #imObjectContentSlider_9_08 > .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_9_08 { 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_9_08 { min-height: 150px !important; } #imObjectContentSlider_9_08 > .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_9_08 > .content-slider-container > .slide-container > .slide-grid-container > .slide-txt-container > .slide-txt-content > .slide-txt-block-container > .slide-button { font-size: 12pt; } #imObjectContentSlider_9_08 > .content-slider-container > .content-slider-ctrl-container > .btn-ctrl > .arrow-btn { width: 40px; height: 40px; } } /* End custom code */ </style> |
- SALVA TUTTO
- PROVA IL COMPORTAMENTO DELL'OGGETTO ALLE VARIE RISOLUZIONI SU ANTEPRIMA BROWSER RIDUCENDO L'AMPIEZZA . Dato che trattasi di immagini puoi farlo anche da ANTEPRIMA senza aprire un browser dalle opzioni. Se qualcosa non vi quadra dovete agire sui parametri "mediaquery" dello style nel codice di esempio (font size e font description).
PRO
- Con una buona competenza grafica, si possono ottenere adattamenti prossimi al responsive.
CONTRO
- Conoscenze tecniche necessarie
- È necessario conoscere il programma in profondità.
- Servono nozioni avanzate di programmazione.
- Trovare una soluzione accettabile può richiedere molto tempo, ma una volta individuata, creare un content slider diventa rapido e semplice.
- Nei tablet con risoluzione 800x600 px, le immagini potrebbero essere tagliate in verticale. Una possibile soluzione è orientare il tablet in orizzontale, anche se il problema potrebbe non verificarsi sempre.
- Il layout non supporta dispositivi con risoluzioni inferiori a 480px, ormai considerati obsoleti dalle nuove tecnologie.
COMMENTA ▼
6 recensioni
ROBERTO A.
Giovedì 27 Mar 2025
Grazie per aver condiviso il codice. Senza di voi con incomedia saremmo alla frutta!!!
FABIO B.
Giovedì 27 Mar 2025
Inizialmente ho avuto problemi poi rileggendo bene mi sono scaricato la struttura ed è stato un attimo ottenere lo stesso effetto di quello rappresentato nell'esempio. Bravo Max!!!
CHIARA V.
Venerdì 14 Mar 2025
I codici e i suggerimenti proposti sono stati fondamentali per dare un tocco unico e personale al mio blog! Grazie !!
LUCA R.
Mercoledì 12 Mar 2025
Gli esempi pratici hanno davvero fatto la differenza per il mio lavoro. Ogni dettaglio è spiegato in modo semplice, e il risultato finale è un sito che unisce funzionalità ed estetica in modo impeccabile.
MARCO B.
Lunedì 10 Mar 2025
Ho sempre trovato difficile affrontare problemi tecnici e ottimizzare i miei progetti, soprattutto utilizzando software complessi come Incomedia. Questo sito è stato una vera svolta: le spiegazioni sono chiare, pratiche e guidano passo passo sia i principianti che i programmatori più esperti. E' veramente una bella condivisione!
ALESSANDRO
Domenica 02 Mar 2025
Un sito estremamente interessante, soprattutto perché consente la condivisione di codici all'interno della community di sviluppatori. Senza questa possibilità, saremmo tutti nei guai.