Web Developers + multi-item carousel/slider

mathsjery · 2019-11-02T06:20:21+00:00

Unapotumia multi-item carousel/slider bila kufanya tafiti ili kujua limitation zake pale unapotaka tumia database ku retrieve data na kuzi display kwenye interface basi unaeza tumia nguvu nyingi hatimaye ukaadili muundo wa interface ili kukidhi haja yako hata kama muundo unavutia kiasi gani. Hivyo basi jaribu kuwa makini na hili. Ninatoa mfano mmoja kwa kutumia multi-item carousel ya bootstrap na pia ntaeleza solution kwenye huu uzi ntatembea mdogo mdogo. Mfano wa multi-item carousel ya bootstrap Angalia code za upande wa interface zilivyo kaa 1.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 2.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 3.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 4.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 5.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 6.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 7.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 8.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi 9.kichwa cha ujumbe maelezo mafupi ya ujumbe yanafata hapa. zaidi Ukiangalia kwenye picha utaona picha tatu zinazomekana , uki slide zitafuata zingine zikiwa tatu kama mwanzo lakini ni tofauti sio zile zile za mwanzo. Ukiangalia kwenye code nimegawanya viblock vitatu vya carousel-item yaani slide ya kwanza,pili na ya tatu na kila carousel-item zina row moja yenye column tatu. Manake kwenye ile carousel-item yenye “active” itaonekana kwanza wakati zingine zitajificha kwa hiyo zitakuwa zikipokezana na kama “active” ikihamia kwenye carousel-item nyingine ile ya kwanza itapotea, na hapa kuna jumla ya content 9 tu zilizo gawanywa mara tatu-tatu kwenye vi block vya carousel-item, na kama nina content 99 maanake ntazigawa kwenye vi block vya carousel-item mara 33 hii ni kama sijatumia database au lugha ya backend. Sasa cheki nikitumia database mfano BAHATI MBAYA NAZUILIWA KUWEKA SAMPLE CODE ZA PHP HAPA BASI NTAFANYA NAMNA NYINGINE. Ukiangalia hiyo carousel inakuwa Kama imegawanywa kwa mipaka mitatu. yaani #first carousel-item content1,content2, content 3 | #second carousel-item content4,content5, content6 | #third carousel-item content7,content8, content 9 Tatizo linakuja unapo taka ku fetch row of data kutoka kwenye database mfano unatumia MySQL na PHP Unaweza select rows kutoka kwenye database na kuzipangilia kulingana na Id uku descending kwa lengo la kutaka kuona data mpya Kila ninapo upload kwa sababu query yangu inalfanya hivyo. Shida inakuja hapa Kama hautaki kufetch rows manually hapa ntatoa mfano kwa code, basi itakubidi uzigawe data zako kwenye viblock vidogo vidogo vinavyoitwa chunk hapa tutatumia function ya php inayofanya hivyo. Sasa mfano ukiwa na data 99 ukivunja kwa three piece of chunck maanake rows of data zitagawanyika mara tatu tatu kwa Kila carousel-item segment. Sasa namna utakavyo set php ili ku display hizo data unaweza tumia for each lakini utakacho kuja kukipata ni laana yaani hiyo arrangements itakuwa sawa kwenye large devices lakini kwenye small devices hiyo carousel haipungui na ikipungua data zingine hazitaonekana hata ukislide kwa button na huwezi solve kwa css au kwa jQuery kirahisi hii simaanishi kuwa hakuna solution Nimetumia maneno bila code kwa sababu naona code zinakuwa suspended Kila nikiweka hasa za PHP na SQL. Nimalizie hivi: Lengo ilikuwa nikujaribu kuona namna ya kuchagua multi-item carousel zisizoboa au kuharibu lenge na design. Usitumie multi item carousel yeny viblock Kama hii Bali jaribu kutumia zile ambazo unaweza fetch data zote na zinapoletwa kwenye browser basi JavaScript/jQuery ndio inazigawa automatically kwenye hivyo viblock mfano slick plugin au wow slider n.k kazi njema kwa walionielewa. Kama sikueleweka jaribu kutumia slick slider na hii ya bootstrap with php or any language Kisha lete mrejesho. Ikiwezekana ntatupia mifano kwa screenshot hapo kesho.

Thread starter mathsjery
Start date Nov 2, 2019
Tags

mtazamo

mathsjery

JF-Expert Member

Nov 2, 2019

mathsjery

JF-Expert Member

Nov 2, 2019

Thread starter
#2

You must log in or register to reply here.

Facebook X Bluesky LinkedIn Reddit WhatsApp Email Link

Educational, Tech & Prof
Tech, Gadgets & Science Forum

Our Community

JamiiCheck
JamiiVoices
JamiiStories
JamiiData
JamiiCourses
JamiiShop
JamiiSocial
Premium Content
Start Discussion

Regional Communities

Tanzania
Uganda
Kenya

JamiiForums uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
By continuing to use this site, you are consenting to our use of cookies.

Accept Learn more…

Back

Top Bottom

Forums

New posts