JQuery લાઇબ્રેરી: તમારી વેબસાઇટ માટે સ્લાઇડર્સનો

સમય પેસેજ અને વેબ ડિઝાઇન ક્ષેત્રમાં બદલાતી અને જરૂરિયાતો / સામગ્રી સાઇટ્સ પર વપરાશકર્તાઓ જરૂરિયાતો છે ટેકનોલોજીના વિકાસ સાથે. અગાઉ જો તે મોટે ભાગે વિષયવાર છબીઓ નાના નંબર સાથે લખાણ સામગ્રી હતી, આજે તે ગ્રાફિક પ્રભાવી ઘટક છે. તે તમને ઝડપથી સૌથી જરૂરી અને ઉપયોગી માહિતી મેળવવા, અને સમય બગાડો નહીં લાંબા લખાણો વાંચવા માટે પરવાનગી આપે છે. આ વધુને વધુ લોકપ્રિય અને હકીકતમાં, સાથે જોડાણ માં, વેબ પૃષ્ઠના જરૂરી તત્વ સ્લાઇડર્સનો છે. છબીઓ લિંક્સ છે - તેઓ તેમને સામગ્રી વિવિધ સાથે બ્લોક્સ છે. JQuery લાઇબ્રેરી ની મદદથી - એક આપેલ વેબ પદાર્થ ઉમેરવા માટે એક આધુનિક રસ્તો. આ સાધન સાથે બનાવેલા સ્લાઇડર્સનો, એક આરામદાયક, વાપરવા માટે સરળ મેળવવા માટે, અને ખૂબ જ પ્રભાવશાળી લાગે છે. આગળ આપણે કઈ રીતે પોતાના પર વેબ પૃષ્ઠોને આ તત્વોની બનાવવા માટે જુઓ. પ્રમાણિત સાધનો પૂરતા પ્રમાણમાં મોટી સંખ્યામાં માટે આભાર, તે jQuery સ્લાઇડર પ્રકાર અને વિવિધ સામગ્રી અમલ કરવા શક્ય છે.

કેવી રીતે વેબ પૃષ્ઠ પર એક સ્લાઇડર ઉમેરવા માટે?

વેઝ એક સ્લાઇડ-બ્લોક્સ ઉમેરવા પાનાં પર નંબર. ઘણીવાર પણ એચટીએમએલ કોડ લખવા અને સ્ક્રિપ્ટ અન્વેષણ કરવાની જરૂર નથી. ત્યાં મૂલ્યે ગ્રંથાલયો નોંધપાત્ર સંખ્યામાં, વપરાશકર્તાઓ તૈયાર નમૂનાઓ તમે તમારી સાઇટ પર jQuery સ્લાઇડર્સનો ઉમેરો દો કે ઓફર કરે છે. બધા તમે કરવા માટે હોય છે - તમારા વેબ પૃષ્ઠ સ્રોત કોડમાં કોપી અને પરિણામો ભોગવે છે. જો કે, આ કિસ્સામાં તમારા સર્જનાત્મક કલ્પના અનુભૂતિ શક્યતા મર્યાદિત છે. તેથી, સ્વતંત્ર ડિઝાઇન તત્ત્વ બનાવવા માટે સમર્થ થવા માટે ઉપયોગી છે. આ કરવા માટે, તમે જાણો છો કે કેવી રીતે JQuery સરળ સ્લાઇડર અમલ કરવાની જરૂર છે, અને માત્ર તે જટિલ, તમે હંમેશા કોડ વધારાનું તત્વો ઉમેરીને કરી શકો છો.

જાતે દ્વારા એક સ્લાઇડર બનાવો: HTML કોડ માં

પ્રથમ, જ્યાં શરૂ કરવા માટે - આ બદલવા માટે સ્લાઇડર ભાવિ લેઆઉટ રજીસ્ટર છે.

1. એચટીએમએલ ફાઇલ સ્લાઇડશો એકમ છે, જે અમારા સ્લાઇડ્સ બધી સામગ્રી શામેલ હશે (છબીઓ, વગેરે) માં સ્થાપના કરી હતી.
2. તે ઉલ યાદી મૂકે છે, જે પ્રત્યેક ફકરો અલગ સ્લાઇડ સ્ટોર કરશે.

અમે સીએસએસ સાથે કામ કરી રહ્યા છે

પછી અમે તેને સીએસએસ-દસ્તાવેજ મદદથી ઇચ્છિત શૈલી લાક્ષણિકતાઓ લાગુ પડે છે. તે યોગ્ય રીતે કામ કરવા માટે અમારી સામગ્રી jQuery સ્લાઇડર લાદી જરૂરી છે અને યોગ્ય દેખાવ હતો. આ તબક્કે, અમે નીચેના કાર્યો સાથે સામનો કરવામાં આવે છે:

• ખાતરી કરો સ્લાઇડશો યુનિટ પર અધિકાર ક્ષણ સ્લાઇડ (અથવા ચિત્ર સામગ્રી) ફક્ત એક જ દર્શાવે છે કે, અને બાકીના છુપાવ્યા કરો;
• સ્લાઇડ્સ અન્ય (ડાબેથી જમણે) એક પછી એક વ્યવસ્થા;
• ઉલ-કન્ટેનર, જે ચલિત (ડાબી અને જમણી) સ્લાઇડ્સ સંગ્રહે નથી.

આ કરવા માટે, સીએસએસ ફાઇલ નીચેના વિકલ્પો સેટ કરો:

• સ્લાઇડશો માટે: ઓવરફ્લો-X - સ્ક્રોલ, ઓવરફ્લો-y - છુપાયેલા:
• ઉલ માટે ફ્લોટ - બાકી છે.

પણ તમે આમ આગળ પહોળાઇ પરિમાણો (પહોળાઈ), ઊંચાઈ (ઊંચાઇ), પૃષ્ઠભૂમિ (પૃષ્ઠભૂમિ) અને સેટ કરી શકો છો.

અમે jQuery આ કોડને મૂકી

HTML અને CSS બધા જરૂરી ફેરફારો કરવામાં આવ્યા છે. તે jQuery કોડ સ્લાઇડર્સનો, કે જે નીચેનાં પરિમાણો હોવી જોઇએ કેસ રહે છે:

• સ્લાઇડ્સ ચોક્કસ સમય અંતરાલ સાથે એકબીજા સફળ જોઈએ;
• જ્યારે તમે હૉવર પર માઉસ પોઇન્ટર તેમના ચળવળ અટકે જોઈએ.

slidewidth અને slidertime (સ્લાઇડ લંબાઈના સમાન) (નક્કી કરે છે સ્લાઇડ શો સમયગાળો): આ કરવા માટે, અમે બે ચલો જાહેર. ટાઈમર શરૂ થશે ત્યારે પાનું સંપૂર્ણપણે લોડ સાઇટ છે. આ પેરામીટર આપણે એક સ્લાઇડ (જે સ્લાઇડ શો અટકે) પર માઉસ પોઇન્ટર પોઇન્ટિંગ ક્રિયા બાંધી છે.

ઉલ કન્ટેનર લંબાઈ લખી તેની ખાતરી કરો. તે સ્લાઇડ્સ સંખ્યા, દરેક સ્લાઇડ લંબાઈ દ્વારા ગુણાકારની સમકક્ષ હશે.

કાર્ય સ્લાઇડ્સ બદલવા માટે જવાબદાર દાખલ કરો. કે બધા છે, તમે તમારા સ્લાઇડર કામગીરી તપાસી શકો છો.

નિષ્કર્ષ

આ લેખમાં આપણે કઈ રીતે તેની વેબસાઇટ એક પાનું દાખલ કરવા માટે તેમના પોતાના jquery-સ્લાઇડર્સનો બનાવવા માટે જોવામાં. એક સરળ સ્લાઇડર ઉદાહરણ મદદથી, તમે તેને તેમના પોતાના અર્થઘટન સાથે આવે કરી શકો છો, સ્રોત કોડ યોગ્ય ફેરફારો બનાવે છે. આ ડિઝાઇન સુધારવા અને તમારી સાઇટ ઉપયોગ વધુ મુલાકાતીઓ માટે અનુકૂળ કરશે.