Slider HTML CSS
I cursori sono un tipo di presentazione di dati che potrebbe includere foto, testo, simboli e collegamenti ipertestuali, tra le altre cose. È un componente della pagina web che scivola in avanti o forse in qualsiasi direzione. È un metodo per presentare materiale su un sito Web in un'unica regione in cui il materiale può scivolare in posizione, consentendo la presentazione di grandi volumi di materiale in un unico posto.
Per aumentare la funzionalità di JavaScript, diversi cursori CSS sono implementati insieme ad esso. Tuttavia, potresti occasionalmente desiderare un cursore di base e compatto creato utilizzando esclusivamente HTML e CSS. È incredibilmente leggero senza javascript e funziona significativamente più veloce durante la navigazione.
Creare un cursore con CSS
Per creare un semplice cursore di testo reattivo usando HTML e CSS, il primo passo che faremo è strutturare il layout del cursore. Creerà spazio per il cursore dove si adatterà.
Nel codice precedente, abbiamo esercitato l'elemento. Questo tag si riferisce al tag di divisione. All'interno di un file HTML, specifica una divisione o un segmento. Funziona come un contenitore utilizzato per raggruppare i componenti HTML. Dopodiché, CSS è usato per progettare le cose. Il "slider-container" è il componente del sito Web in cui verrà mostrato il cursore. Il "cursore" funge da display o finestra per presentare tutte le diapositive che creeremo. Le diapositive saranno mantenute in "Slide". Questo "cursore" è il componente che scorre e genera l'aspetto del cursore sul "contenuto di scorrimento". Mentre "diapositiva" si riferisce a ogni singola diapositiva utilizzata nel cursore.
Tieni presente che dovrai avere la classe "Slide" e un "ID" distinto per ogni diapositiva che crea. In questo script, abbiamo creato quattro classi "Slide", ognuna con un "ID" univoco come: "Slides_1" per la prima diapositiva, "Slides_2" per la 2a diapositiva, "Slides_3" per la 3a diapositiva e "Slide_4" per la 4a diapositiva. Abbiamo anche definito rispettivamente il "slip_text" visualizzato su ogni diapositiva, all'interno del tag "span".
Ora genereremo lo script CSS.
Puoi usare tutto ciò che desideri per un "dispositivo di scorrimento". Qui, abbiamo utilizzato Flexbox. Puoi modellare rapidamente HTML con un layout CSS Flexbox. Utilizzando colonne e righe, il Flexbox rende il posizionamento verticale e orizzontale di oggetti semplici. Per riempire l'area, gli oggetti si "flettono" a varie dimensioni. È possibile, tuttavia, utilizzare la griglia CSS se lo desideri.
Il "cursore" regolerà semplicemente le dimensioni del cursore. Questa proprietà "larghezza" regolerà la larghezza del cursore. La "massima larghezza" di un oggetto è specificata dall'attributo "massimo". L'altezza dell'oggetto viene regolata automaticamente quando il contenuto supera la larghezza del limite. L'attributo massimo di larghezza è inefficace quando il contenuto fornito è inferiore alla larghezza massima. Il posizionamento di un oggetto con "Posizione: relativo;" è relativo a quella posizione normale.
Il seguente elemento di diapositive verrà ora disegnato in CSS:
L'attributo Overflow-X determina se il contenuto di un elemento a livello di blocco deve essere tagliato, scorrere o mostrato dati di overflow. Tutto ciò che non si adatta facilmente all'interno del viewport "Slider" diventerà visualizzabile solo attraverso lo scorrimento quando si abilita "Overflow-X" per scorrere. La prossima cosa che abbiamo fatto è stata quella di mettere il "Scroll_behavior" su "Smooth". L'attributo di comportamento a scorrimento determina se il movimento di scorrimento è animato senza intoppi ogni volta che la persona colpisce su un URL all'interno di un contenitore scorrevole piuttosto che un salto dritto. Abbiamo impostato il "tipo scroll_snap" su "x obbligatorio", il che significa che quando si applica un link di salto a qualsiasi oggetto figlio nelle diapositive, allora il browser scorrerebbe a quel particolare oggetto senza intoppi piuttosto che saltarlo immediatamente su di esso.
Progettiamo le diapositive stesse, come segue:
La prima e principale cosa su cui concentrarsi in questo frammento è considerare attentamente la dimensione della diapositiva a quella del cursore. Ora, gli ultimi tre attributi sono estremamente cruciali: Transform-Origin, Transform e Scroll-SNAP-Align. La posizione in cui viene eseguita una trasformazione è chiamata origine. È possibile modificare il posizionamento dei componenti trasformati usando l'attributo di trasformazione. È possibile utilizzare i valori singoli, due o tre. L'origine di una trasformazione è configurata al centro per impostazione predefinita. È possibile girare, ridimensionare, inclinarsi o tradurre qualsiasi componente usando la proprietà CSS "trasforma". Il metodo CSS "Scale ()" ridimensiona un componente nel piano bidimensionale. L'attributo di allineamento SCROLL-SNAP definisce l'effettivo posizionamento a scatto del contenitore come un allineamento della regione a scatto. Assicurano che ogni volta che salti il collegamento su una certa diapositiva, quella diapositiva "si spezzerà" all'interno del centro di viewing slider.
L'immagine di output che abbiamo creato così lontano dal codice precedente è mostrata di seguito:
È possibile osservare la funzionalità di scorrimento e scattamento senza soluzione di continuità facendo clic all'interno del cursore e successivamente premendo i pulsanti della freccia.
Slider con il pulsante di navigazione
Puoi anche includere i pulsanti di navigazione sul cursore se lo desideri. Per questa intenzione, abbiamo aggiunto due componenti "A" a ogni singola diapositiva nello script HTML.
La classe "Slide_prev" è per la navigazione indietro, mentre la classe "Slide_Next" è per la navigazione in avanti. "Href" contiene il collegamento ipertestuale alla diapositiva che desideriamo saltare. Questi devono essere esplicitamente adeguati. Questa proprietà fornisce l'URL della pagina di destinazione del link. L'elemento non costituirà un collegamento quando la proprietà "HREF" non è inclusa.
Qui, ci occupiamo della sezione CSS del codice:
Questi pulsanti possono essere disegnati e posizionati in qualsiasi modo vuoi. Nel nostro esempio, abbiamo aggiunto frecce per navigare in avanti o indietro.
Puoi vedere le frecce nella seguente immagine di output:
Rimozione della barra di scorrimento dal cursore
Ora, se osservi, abbiamo le frecce e la barra di navigazione per scorrere avanti o indietro. Se è necessario rimuovere la barra di scorrimento, puoi farlo in un semplice passaggio.
Nella sceneggiatura CSS, all'interno del primo ".Classe Slider ", basta impostare il" overflow-x "su" nascosto ". Questo nasconderà la barra di scorrimento.
Questo è il cursore di output:
Conclusione
In questo argomento, hai imparato ad aggiungere un cursore al tuo sito Web utilizzando HTML CSS. Ti abbiamo presentato l'idea di aggiungere cursori usando CSS e quali cursori sono. Successivamente, abbiamo iniziato a creare un semplice cursore con il testo. Abbiamo progettato il layout del cursore utilizzando l'HTML e poi abbiamo disegnato con CSS nell'editor di testo sublime. Usando diversi elementi della sceneggiatura CSS, abbiamo realizzato il nostro cursore con una barra di scorrimento. Nel passaggio successivo, abbiamo creato un pulsante di navigazione nel cursore con CSS. Nella fase finale, ti abbiamo mostrato come rimuovere la barra di scorrimento dal cursore e lasciarla navigare solo attraverso i pulsanti di navigazione. La pratica e la concentrazione ti aiuteranno a prendere questi concetti per creare un semplice cursore con CSS.