[html + jquery] Bootstrap V4 en sliders (carousel) -> Cards

[Jboy1991]

Hallo Tweakers,

Ik loop een beetje vast met Carousels. En hoop hier iemand te vinden met een oplossing.

De situatie:
Ik heb een aantal cards (voorheen panels) die ik 1 voor 1 wil sliden met COL-12 (volledige width/breedte dus). Dit voor elkaar krijgen is makkelijk en dus niet het probleem. Het probleem is het slide process. Doordat de volledige breedte wordt gebruikt krijg je dus slide over slide effect (en dus niet het effect dat slide 1 weg slide met daarachter slide 2).

Ze lossen als het ware in elkaar op. Wanneer ik COL-11 gebruik is dit probleem er niet, maar dan komen de kolommen eronder niet meer mooi uit.


Code col-12

code:

 <div class="row">
                <div id="melding_slider" class="carousel slide col-12  " data-ride="carousel" data-interval="5000">
                    <div class="carousel-inner" id="inhoud">
                    <div class="carousel-item active ">
                       <div class="card card-blue d-block w-100">
                            <div class="card-header">
                                <b><span class="fa fa-bullhorn" aria-hidden="true"></span> 1</b>
                            </div>
                            <div class="card-body"id="m_body">  
                                test 1
            
                            </div>
                        
                        </div>
                        </div>
                        <div class="carousel-item ">
                        <div class="card card-blue  d-block w-100">
                            <div class="card-header">
                                <b><span class="fa fa-bullhorn" aria-hidden="true"></span> 2</b>
                            </div>
                            <div class="card-body"id="m_body">  
                                test 2
            
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
       </div>

Items hebben nu Col-11 meegekregen:

code:

<div class="row">
                <div id="melding_slider" class="carousel slide col-12  " data-ride="carousel" data-interval="5000">
                    <div class="carousel-inner" id="inhoud">
                    <div class="carousel-item active col-11">
                       <div class="card card--blue">
                            <div class="card-header">
                                <b><span class="fa fa-bullhorn" aria-hidden="true"></span> 1</b>
                            </div>
                            <div class="card-body"id="m_body">  
                                test 1
            
                            </div>
                        
                        </div>
                        </div>
                        <div class="carousel-item col-11">
                        <div class="card card--blue ">
                            <div class="card-header">
                                <b><span class="fa fa-bullhorn" aria-hidden="true"></span> 2</b>
                            </div>
                            <div class="card-body"id="m_body">  
                                test 2
            
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            
       </div>

Ik wil dus het beeld hebben zoals "item zonder col-11" Maar met het effect van "item met col-11". Zie screenshot hieronder.



*bovenste twee plaatjes is slide in actie, onderste twee is niet in actie


Iemand enig idee hoe dit voor elkaar te krijgen is?

Alvast bedankt.

[Harrie_]

Ik zie dat je die col-11 toepast op het carrousel item, probeer eens een col-11 eromheen te wrappen i.p.v. deze als class mee te geven aan dezelfde div, dus:

HTML:

<div class="row">
    <div class="carrousel-item">
        test
    </div>
</div>

Edit:
Ik verwacht dat het carroussel-item al iets van padding of margin meekrijgt en dat dit door het toevoegen van col-11 aan dezelfde div deze padding en/of margin overruled en op 0 zet...

[ Voor 26% gewijzigd door Harrie_ op 07-08-2019 08:37 ]

[Jboy1991]

Harrie_ schreef op woensdag 7 augustus 2019 @ 08:31:
Ik zie dat je die col-11 toepast op het carrousel item, probeer eens een col-11 eromheen te wrappen i.p.v. deze als class mee te geven aan dezelfde div, dus:

HTML:

<div class="row">
    <div class="carrousel-item">
        test
    </div>
</div>

Edit:
Ik verwacht dat het carroussel-item al iets van padding of margin meekrijgt en dat dit door het toevoegen van col-11 aan dezelfde div deze padding en/of margin overruled en op 0 zet...

Bedankt voor het meedenken, helaas lost dit het probleem ook niet op. Zelfs niet wanneer ik in die nieuwe ROW nog een div plaats met col-12

[Harrie_]

Jboy1991 schreef op woensdag 7 augustus 2019 @ 09:17:
[...]

Bedankt voor het meedenken, helaas lost dit het probleem ook niet op. Zelfs niet wanneer ik in die nieuwe ROW nog een div plaats met col-12

Zo dus

HTML:

<div class="row">
    <div class="col-11">
        <div class="carrousel-item">
            ...
        </div>
    </div>
</div>

[Jboy1991]

Harrie_ schreef op woensdag 7 augustus 2019 @ 09:20:
[...]


Zo dus

HTML:

<div class="row">
    <div class="col-11">
        <div class="carrousel-item">
            ...
        </div>
    </div>
</div>

Col-11 is niet de oplossing nee. Col-11 is namelijk 1 grid te weinig (niet volledige breedte);

Ik kom er zelf niet achter wat nou het probleem kan zijn. Het enige dat ik kan bedenken is dat carousel de ruimte gebruikt achter de de div als soort spatie en dat dus laat mee sliden. Hierdoor krijg je een effect alsof er eerst een wisser langs komt met direct er achteraan de nieuwe item.

dit is natuurlijk het effect dat ik wil hebben, alleen dan over de volledige breedte van het design en nu ruim 1 grid kleiner

[Harrie_]

Jboy1991 schreef op woensdag 7 augustus 2019 @ 09:24:
[...]

Col-11 is niet de oplossing nee. Col-11 is namelijk 1 grid te weinig (niet volledige breedte);

Ik kom er zelf niet achter wat nou het probleem kan zijn. Het enige dat ik kan bedenken is dat carousel de ruimte gebruikt achter de de div als soort spatie en dat dus laat mee sliden. Hierdoor krijg je een effect alsof er eerst een wisser langs komt met direct er achteraan de nieuwe item.

dit is natuurlijk het effect dat ik wil hebben, alleen dan over de volledige breedte van het design en nu ruim 1 grid kleiner

En je bent alle elementen al langs gegaan met de browser-tools (F12)?

Zo nee, doe dat eens en selecteer alle elementen een voor één zodat je kunt zien wat er gebeurt en welk element welke opmaak mee krijgt. Dan kun je tevens on te fly testen wat er gebeurt als je bepaalde styling van elementen uit- of juist aanzet...