በራሳቸው ጣቢያ ላይ ያሉ ብዙ ሰዎች ተንሸራታቾችን ማየት ይፈልጋሉ - እነዚህ ብሎኮች በስክሪኑ ላይ አንድ የይዘት አካል የሚያሳዩ ናቸው እና ከተወሰነ ጊዜ በኋላ ይህንን ይዘት ወደ ሌላ ይለውጡት። በተፈጥሮ፣ እያንዳንዱ የድር ገንቢ HTML፣ CSS እና JavaScriptን በመጠቀም ተንሸራታች መፍጠር ይችላል፣ነገር ግን ይህ ሁልጊዜ ትርጉም አይሰጥም። በበይነመረቡ ላይ ህይወትዎን በጣም ቀላል የሚያደርጉ እና ጣቢያዎን የበለጠ ማራኪ የሚያደርጉ በጣም ጥቂት የተዘጋጁ መፍትሄዎች ቢኖሩም በጣም ብዙ ጊዜ ያሳልፋሉ። ይህ ጽሑፍ በ Owl Carousel ተብሎ ከሚጠራው ከእነዚህ መፍትሄዎች በአንዱ ላይ ያተኩራል. ይህን ተንሸራታች ማዋቀር በማይታመን ሁኔታ ቀላል ነው፣ ስለዚህ ጀማሪም እንኳ ሊይዘው ይችላል። አሁን ይህ ተንሸራታች ምን እንደሆነ እና ሌሎች አስፈላጊ ዝርዝሮችን ይማራሉ. Owl Carousel ን ማዋቀር የደረጃ በደረጃ ሂደት ነው፡ ስለዚህ ይህንን ጽሑፍ በቅደም ተከተል ብቻ ማጥናት አለብዎት።
ምንድን ነው እና ለምን ይህን የተለየ ተንሸራታች መምረጥ አለብዎት?
Owl Carousel፣ በዚህ ጽሑፍ ውስጥ የሚብራራበት ውቅር፣ በገጽዎ ላይ ቆንጆ እና ምቹ የሆነ ተንሸራታች የሚጨምር በጣም ውጤታማ ፕለጊን ነው፣ ይህም በጣቢያው ላይ ስራዎን በእጅጉ ያመቻቻል።ብዙ ጊዜ, ጉልበት እና ገንዘብ መቆጠብ. የዚህ ልዩ ፕለጊን ጥቅሞች ምንድ ናቸው፣ ምክንያቱም በድር ላይ ብዙ ተንሸራታቾች ስላሉ? እውነታው ይህ ተንሸራታች በደርዘን የሚቆጠሩ የማበጀት አማራጮችን ያቀርብልዎታል ፣ ይህም ገጽዎን ልዩ እና የማይነቃነቅ ለማድረግ ያስችልዎታል። በሁሉም የአሳሽ ስሪቶች ላይ የሚሰራ እና ከዎርድፕረስ እና ሌሎች ታዋቂ CMS ጋር በቀላሉ ሊገናኝ የሚችል ምላሽ ሰጪ ፕለጊን ነው። በአጠቃላይ, ይህ ተንሸራታች ብዙ ጥቅሞች አሉት, ስለዚህ በእርግጠኝነት በእሱ ሞገስ ላይ ምርጫ ማድረግ አለብዎት. ሆኖም፣ Owl Carousel ማዋቀር ከመጀመርዎ በፊት፣ ይህ ፕለጊን አሁንም መጫን አለበት።
አውርድ
Owl Carousel 2ን ወደ ኮምፒውተርዎ ካላወረዱ ማዋቀር አይቻልም፣ እና ይህ የደረጃ በደረጃ መመሪያ ስለሆነ ከመጀመሪያው ጀምሮ መጀመር አለብዎት። ስለዚህ, ፕሮግራሙ የጥቅል አስተዳዳሪዎችን በመጠቀም ማውረድ ይቻላል, ነገር ግን እነዚህ የላቁ የገንቢ መሳሪያዎች ናቸው, ስለዚህ እዚህ ይህንን ፕለጊን በመደበኛ መንገድ እንዴት ማግኘት እንደሚችሉ እንነግርዎታለን. ወደ ተሰኪው ኦፊሴላዊ ድር ጣቢያ መሄድ እና የቅርብ ጊዜውን ስሪት ማውረድ ያስፈልግዎታል። ከዚያ በኋላ ሁሉም የወረዱ ፋይሎች ምቹ የሆነ አቃፊ በማዘጋጀት ወደ ድረ-ገጽዎ ማውጫ መተላለፍ አለባቸው፣ እሱም ልክ እንደ ተሰኪው ተሰይሟል። ይህ ፕለጊን ከ jQuery ጋር የተጠቃለለ መሆኑን ልብ ይበሉ፣ ስለዚህ ያንን ቤተ-መጽሐፍት እንዲሁ ሊኖርዎት ይገባል። ደህና፣ አንዴ ይህን ፕለጊን ካወረዱ በኋላ የ Owl Carousel ተንሸራታች 2ን በማዘጋጀት ላይ ያለውን ቀጣዩን እርምጃ መንከባከብ ያስፈልግዎታል።
CSS
Bየ Owl Carousel 1.3 መቼቶች በአዲሱ ስሪት 2 ውስጥ ከሞላ ጎደል አንድ አይነት ሆነው ይቆያሉ፣ አዲስ ባህሪያት ብቻ ተጨምረዋል። ነገር ግን፣ ወደ ሰነድዎ CSS ከመጨመር ጀምሮ መሰረታዊው መረጃ አንድ አይነት ይሆናል። ስለዚህ የመጀመሪያው እርምጃ መስመሩን መጨመር ነው. ምን ትሰጥሃለች? ይህ ተንሸራታቹን ለማሳየት አስፈላጊዎቹን ቅጦች ወደ ጣቢያው የሚጭን ሕብረቁምፊ ነው። የእይታ ሂደትን እራስዎ በማድረግ መጨረስ የሚችሉት እዚህ ነው። ሆኖም ግን, የበለጠ ምቹ እና ፈጣን መፍትሄ አለ. እንዲሁም የተንሸራታቹን ነባሪ ገጽታ የሚጭን መስመር ማከል ይችላሉ፣ ይህም ወዲያውኑ ለመጠቀም ዝግጁ ያደርገዋል። ተንሸራታችዎን የበለጠ ልዩ እና የተለየ ለማድረግ እና ለይዘትዎ የበለጠ ተስማሚ ለማድረግ አንዳንድ ቅጦችን ማርትዕ ይችላሉ። በተፈጥሮ፣ የ Owl Carousel ቅንብሮች በሩሲያኛ በጣም ምቹ ይሆናሉ፣ ነገር ግን ድር ጣቢያዎችን የሚፈጥር ማንኛውም ሰው ያለ እንግሊዝኛ እውቀት ማድረግ እንደማይችል ሊገነዘበው ይገባል።
JavaSpript ግንኙነት
በርግጥ፣ ተንሸራታቹ ያለ JS አይሰራም፣ ስለዚህ አስፈላጊውን ኮድ የያዘውን ተገቢውን ፋይል ለማካተትም መጠንቀቅ አለብዎት። ይህንን ለማድረግ ከሰነዶቹ ውስጥ የኮድ መስመርን ማስገባት ያስፈልግዎታል, ነገር ግን አንድ ቅድመ ሁኔታ መሟላት አለበት. JS ሁሉንም ትዕዛዞች በቅደም ተከተል የሚፈጽም የፕሮግራሚንግ ቋንቋ መሆኑን ሁሉም ሰው ያውቃል ስለዚህ በዚህ አጋጣሚ jQuery ላይብረሪውን ወደ ሰነድዎ ከሚጨምር መስመር በኋላ ይህንን የኮድ መስመር ማከል አለብዎት። በዚህ ተንሸራታች ጉዳይ ላይ ከJS ጋር የበለጠ፣ ምንም የሚያደርጉት ነገር የለም።ያስፈልጋል።
HTML ኮድ ማድረግ
ደህና፣ ተንሸራታቹን አገናኟት፣ አሁን ለመንደፍ እና ለማበጀት ጊዜው ነው። በመጀመሪያ ደረጃ ተንሸራታቹ በጭራሽ በገጽዎ ላይ እንዲታይ HTML ኮድ መጻፍ ያስፈልግዎታል። ይህንን ለማድረግ ተንሸራታቹን የሚይዝ መያዣ መፍጠር ያስፈልግዎታል. ይህ የጉጉት-ካሮሴል ክፍልን መመደብ የሚያስፈልገው የዲቪ መለያን በመጠቀም ሊከናወን ይችላል። ከተንሸራታች ጋር የተያያዙ ሁሉም ቅጦች እንዲነቃቁ የሚያረጋግጥ ይህ ክፍል ነው. እንዲሁም ሌላ ክፍል መጻፍ ይችላሉ - የጉጉት-ገጽታ. ነባሪውን ንድፍ ለመጠቀም ከወሰኑ ወይም የተንሸራታቹን መደበኛ ስሪት ለቀጣይ ስራ መሰረት አድርገው ከወሰዱ ጠቃሚ ይሆናል።
ከዚያ እያንዳንዱን ስላይድ በተለየ መያዣ ውስጥ በዲቪ ታግ ማከል ያስፈልግዎታል። እርግጥ ነው፣ ሌሎች መለያዎችን መጠቀም ትችላለህ፣ ግን ይህ መለያ ለተንሸራታቾች ምርጡ ነው።
የጥሪ ተሰኪ
እና በጣቢያዎ ላይ ዝግጁ የሆነ ተንሸራታች እንዲኖርዎት ማድረግ ያለብዎት የመጨረሻው ነገር ይህንን ኮድ መጠቀም ነው፡
$(ሰነድ)።ዝግጁ(ተግባር(){
$(".owl-carousel").owlCarousel();
});
ተንሸራታቹ መሥራት መጀመሩን ያረጋግጣል፣ ማለትም ይዘቱ ውስጥ ይሸብልሉ፣ ገጽዎ ሲጫን። በተመሳሳዩ ኮድ, Owl Carousel ከ WordPress ጋር ማገናኘት ይችላሉ. የዚህ ፕለጊን ቅንጅቶች ብዙ እና የተለያዩ ናቸው እና አሁን ስለ ዋና ዋና ነጥቦች ይማራሉ::
የተንሸራታቹን መልክ እና ተግባር ማዋቀር
ታዲያ ተንሸራታችዎን ለማበጀት ምን ትዕዛዞችን መጠቀም ይችላሉ? በመጀመሪያ ደረጃ የንጥሎቹን ትዕዛዝ ማስታወስ ያስፈልግዎታል, ምክንያቱም በእሱ አማካኝነት በተንሸራታችዎ ውስጥ የተወሰነ የስላይድ ብዛት ማዘጋጀት ይችላሉ. የ loop ትዕዛዙ ተንሸራታቹን ለመዞር ወይም በመጨረሻው አካል ላይ ማሸብለል ለማቆም እንዲመርጡ ያስችልዎታል። እንደ መዳፊት እና ንክኪ ያሉ በርካታ አማራጮች ያሉት የድራግ ትዕዛዝም አለ። በመጀመሪያው ሁኔታ የተንሸራታችዎ ንጥረ ነገሮች በመዳፊት ተጭነው እንዲንሸራተቱ ማድረግ ይችላሉ ፣ እና በሁለተኛው ሁኔታ ፣ በንክኪ እገዛ (ይህ ትእዛዝ ለሞባይል መሳሪያዎች ተስማሚ ነው)። ሌላው አስፈላጊ ትዕዛዝ nav ነው, ይህም የአሰሳ ቀስቶችን ለማሳየት ያስችላል. ከሱ ጋር፣ በዳሰሳ አዝራሮች ላይ መለያዎችን ለመጨመር የ navText ትዕዛዙን መጠቀም ይችላሉ። እንዲሁም ገጹ በሚጫንበት ጊዜ የተንሸራታችዎን ስላይዶች የማዞር አውቶማቲክ ጅምርን ለማንቃት እና ለማሰናከል ስለሚያስችለው ስለ ራስ-አጫውት ትዕዛዝ መርሳት የለብዎትም። በዚህ ትእዛዝ አውቶፕሌይ ታይም አውትትን መጠቀም ትችላለህ ለዚህም ልዩ እሴት በሚሊሰከንዶች ማቀናበር የምትችል ሲሆን ይህም በእያንዳንዱ ስላይዶች አውቶማቲክ መዞር መካከል ያለውን ጊዜ ይወስናል።
ምላሽ የሚሰጥ የድር ዲዛይን ከተጠቀሙ፣ ማለትም፣የገጽዎ ንድፍ በየትኛው መሳሪያ ላይ እንደሚታይ ላይ በመመስረት በራስ-ሰር ይቀየራል፣ ከዚያ በእርግጠኝነት ምላሽ ሰጪውን ትዕዛዝ ማስታወስ ያስፈልግዎታል፣ ይህም የተንሸራታቾችን ብዛት እንዲያዘጋጁ ያስችልዎታል። ገጹ እየታየበት ባለው የስክሪኑ ስፋት ላይ በመመስረት ለማሳየት።
