Web Developers + multi-item carousel/slider

[mathsjery]

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

<div class="container mt-5 mb-6">
    <!--Carousel Wrapper-->
    <div id="new-update" class="carousel slide carousel-multi-item" data-ride="carousel">
      
        <!--Controls-->
        <div class="controls-top">
        <a class="btn-floating" href="#new-update" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
        <a class="btn-floating" href="#new-update" data-slide="next"><i class="fa fa-chevron-right"></i></a>
        </div><!--/.Controls-->
      
        <!--Slides-->
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali1.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">1.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali2.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">2.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali3.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">3.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div> 
                    </div>
                </div>
            </div><!--/.First slide-->
            <div class="carousel-item">
                 <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali4.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">4.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali5.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">5.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali6.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">6.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div> 
                    </div>
                </div>
            </div><!--/.Second slide-->
            <div class="carousel-item">
                 <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali7.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">7.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali8.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">8.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 clearfix d-none d-md-block">
                        <div class="card mb-2">
                            <img class="card-img-top" src="picha/suruali9.jpg"
                            alt="Card image cap">
                            <div class="card-body">
                                <h4 class="card-title">9.kichwa cha ujumbe</h4>
                                <p class="card-text">maelezo mafupi ya ujumbe
                                yanafata hapa.</p>
                                <a href="#" class="btn btn-primary">zaidi</a>
                            </div>
                        </div> 
                    </div>
                </div>
            </div><!--/.Third slide-->
        </div><!--/.Slides-->
    </div><!--/.Carousel Wrapper-->
</div>

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.

 

[mathsjery]

Nime update uzi