Back

Alignment examples (page mode)

All alignment variants in scrollMode: 'page', each with 7 content cards.

1. Buttons left only (page mode)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

2. Buttons center only (page mode)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

3. Buttons right only (page mode)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

4. Dots left only (page mode)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

5. Dots center only (page mode)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

6. Dots right only (page mode)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Source: Buttons left only (page mode) Copy to clipboard 


new AvalynxCardSlider('track1', {
	scrollMode: 'page',
	prevBtnId: 'prev1',
	nextBtnId: 'next1'
});

Source: Buttons center only (page mode) Copy to clipboard 


new AvalynxCardSlider('track2', {
	scrollMode: 'page',
	prevBtnId: 'prev2',
	nextBtnId: 'next2'
});

Source: Buttons right only (page mode) Copy to clipboard 


new AvalynxCardSlider('track3', {
	scrollMode: 'page',
	prevBtnId: 'prev3',
	nextBtnId: 'next3'
});

Source: Dots left only (page mode) Copy to clipboard 


new AvalynxCardSlider('track4', {
	scrollMode: 'page',
	dotsId: 'dots4'
});

Source: Dots center only (page mode) Copy to clipboard 


new AvalynxCardSlider('track5', {
	scrollMode: 'page',
	dotsId: 'dots5'
});

Source: Dots right only (page mode) Copy to clipboard 


new AvalynxCardSlider('track6', {
	scrollMode: 'page',
	dotsId: 'dots6'
});