bootstrap carrousel aanpassen

Dag

Ik wil een bootstrap carrousel op mijn website maar niet de standaard... Ik zou graag een soort lint hebben waarbij er meerdere items in zicht zijn waarbij de boel steeds 1 item verschuift. Ik heb niet veel kunnen vinden wat daar op leek. Wel multi-column carrousels maar dan verschuift steeds de hele boel (in feite bestaat dan 1 item in de carrousel uit meerdere items).
Ik heb het nu nagebootst door meerdere carousels naast elkaar te plaatsen en dan elke carrousel met een ander item te laten beginnen. Bv drie carrousels waarbij de meest linkse met het eerste item begint, de tweede met het tweede enz. Dit gaat goed en bootst het effect goed na, behalve als er met de muis een van de carrousels gepauzeerd wordt. Die loopt dan immers uit de maat.
Op deze site https://bootsnipp.com/snippets/m0q1y staat een voorbeeld. Echter, als ik dat voorbeeld probeer aan te passen heb ik problemen. Ik weet geen hout van javascript en ook niet voldoende van de css die in dit voorbeeld gebruikt worden. Dit werkt prima in geval van 6 items, maar ik krijg het niet aangepast voor minder items. Als ik maar 4 items heb, zou elke kolom breder moeten zijn. Waar kan ik dat regelen? Of heeft iemand een betere verwijzing?

groetjes, Anjo

Je hoeft in het voorbeeld geen Javascript aan te passen.
In de bijlage heb ik alles werkend bij elkaar gezet zodat het duidelijker is.

RE: als ik dat voorbeeld probeer aan te passen heb ik problemen
Laat even weten wat je wilt aanpassen?

Dag Bron

Heel erg fijn dat je me wilt helpen. Ik weet wel wat van HTML en CSS maar de nieuwere dingen niet en daar gaat het hier juist om. En javascript al helemaal niet. Met dit soort dingen is het voor mij copy-paste en dan hier en daar eens wat aanpassen en kijken wat er gebeurt. In dit geval was het van alles maar niet het gewenste.
Ik gebruik lokale versies van een en ander maar dat maakt op zich niet uit. Ik heb de carrousel dus werkend als ik niks aan pas (zowel jouw versie als die originele waar ik naar verwees) maar wat zou ik aan moeten passen als ik bv geen 6 maar 3 producten heb? Of 4? Ik heb het wel voor elkaar gekregen met wat aanpassingen (ik weet niet meer wat ik gedaan had, heb van alles geprobeerd) dat ik drie producten had, maar vervolgens was de carrousel wel even breed maar besloegen de drie producten maar de helft van de carrousel. Op zich logisch want ik had en kreeg de breedte van de kolommen (producten) niet aangepast. Wat zou ik allemaal aan moeten passen als ik de carrousel voor een ander aantal producten zou willen gebruiken? Is dat erg lastig of een kwestie van enkele getallen aanpassen? En dat laatste: welke dan?

Als het veel werk voor je is dan laat het uiteraard maar zitten maar ik weet niet of het een eenvoudige aanpassing is of niet, omdat ik er geen verstand van heb.

groetjes, Anjo

Bij de carousel (#2) is gekozen voor smartphone col-xs-12 (1 item), tablet col-sm-6 (2 items) en desktop col-md-2 (6 items) op een rij.
Bij een desktop zijn er dus 6 kolommen op een rij (col-md-2). Je vindt dit terug in:
- html: col-md-2 (bij elk item)
- css: -16.666% en 16.666% (namelijk 2/12 x 100%)
- Javascript: var i=1; i<6; i++ (maximum zichtbare items)

Als je 4 kolommen wilt hebben dan wordt het dus
(edit) in het bestand wat ik bij #2 heb toegevoegd heb ik wat overbodige html en css weggehaald.

Suc6. Have fun.

Dag Bron

Ik kan het nu helaas even niet proberen maar wat ik zo lees klinkt logisch en begrijpelijk. Enorm bedankt voor je hulp!

groetjes, Anjo

Hoi Anjo, ik zie dat de maker van de snippet een foutje in de css heeft zitten. Als je dit aanpast hoef je niet de extra css van #4 toe te voegen.
Uiteraard mag je dan de /* */ regels weghalen.

Suc6 met je website.

Dag Bron

Het werkt helemaal naar wens!
Enorm bedankt. Ik was hier niet zelf uitgekomen. Ik heb geen kaas gegeten van de media css.

Fijn dat je er tijd in hebt willen steken!

groetjes, Anjo

Graag gedaan. Suc6 met je Bootstrap website. :thumb: