CSS Slider

Plain CSS Slider with responsive multi-column pagination, no JavaScript needed (inspired by drygiel/csslider). This library allows you to define multiple different column counts for a slider, for example a one-column slider for screen-sizes up to 400px, then 2 columns up to 700px, and 3 columns for larger screens. This works great with bootstrap-like grid systems. The markup is repetitive and follows simple rules, so it is best autogenerated, either using a templating language like Blade Templates, Haml, or pug (previously Jade).

Features

• Configurable number of slides shown per page
• Different number of columns per page depending on screen-size by using media queries
• Arrows to slide to the previous/next page (configurable to either slide full pages, or a single column)
• Dots to see the number of pages and navigate to any of them
• Swipe script, to allow scrolling to other pages with gestures on touch devices

Basic usage

@import 'css-slider';

.your-slider-class {
	@include slider-base();

	@include paginate(2); // Or however many columns you want
}

Responsive usage

@import 'css-slider';

.your-slider-class {
	@include slider-base();

	@media (max-width: 600px) {
		@include paginate(1);
	}

	@media (min-width: 601px) {
		@include paginate(3);
	}
}

Options

$wrap: true

Show a left arrow to the last page on the first page and vice versa or not.

@include paginate(2, $wrap: false); // No wrapping arrows on first and last slide

$scroll-full-page: true

Arrows scroll either a full page or a single slide.

@include paginate(2, $scroll-full-page: false); // Arrows scroll single slides

Markup

Markup example in blade syntax:

@php
	$sliderClass = 'css-slider';
	$sliderName = 'slider1';
@endphp

<div class="{{ $sliderClass }}">

	{{-- The radio buttons controlling everything --}}
	@foreach ($slides as $slide)
		<input type="radio" name="{{ $sliderName }}" id="{{ $sliderName }}-{{ $loop->index }}"{{ $loop->index ? '' : ' checked' }}>
	@endforeach

	{{-- The slides --}}
	<ul class="{{ $sliderClass }}__slides">
		@foreach ($slides as $slide)
			<li class="{{ $sliderClass }}__slide">{{ $slide->content }}</li>
		@endforeach
	</ul>

	{{-- Dots to select arbitrary page and see number of pages --}}
	<div class="{{ $sliderClass }}__dots">
		@foreach ($slides as $slide)
			<label class="{{ $sliderClass }}__dot" for="{{ $sliderName }}-{{ $loop->index }}"></label>
		@endforeach
	</div>

	{{-- Arrows to previous page --}}
	<div class="{{ $sliderClass }}__arrows {{ $sliderClass }}__arrows--left">
		@foreach ($slides as $slide)
			<label class="{{ $sliderClass }}__arrow" for="{{ $sliderName }}-{{ $loop->index }}">&larr;</label>
		@endforeach
	</div>

	{{-- Arrows to next page --}}
	<div class="{{ $sliderClass }}__arrows {{ $sliderClass }}__arrows--right">
		@foreach ($slides as $slide)
			<label class="{{ $sliderClass }}__arrow" for="{{ $sliderName }}-{{ $loop->index }}">&rarr;</label>
		@endforeach
	</div>

</div>

Terminology and Logic

This section tries to explain the core logic and terminology behind the slider pagination and is mostly for developers, not users.

Slides and pages

• Slide: A single slide, the slide which belongs to the selected radio is called "active", e.g. when the 3rd radio is :checked, the 3rd slide is active
• Page: A set of $n slides that are displayed as columns of a page together, whenever any of the slides on the page is the active slide, except for the last page, which might overlap the second-last
  • If $scroll-full-page is false, each set of $n consecutive slides is a page, not just the aligned (and the last) sets
• Non-last page: An aligned page of $columns slides that is not the last page
  • Canonical radio is the first on the page
  • Should be active when any radio that is not for a slide contained only on the last page is selected
• Last page: Can be aligned, or overlap the second-last page, so it is handled as a special case
  • Canonical radio is the last one
  • Should be active when any slide that is only on the last page is active

Arrows for scrolling pages

• Arrows on the left and right of the page, leading to the previous and next page, or wrapping to the page on the other end if the first or last page is already active
• Arrows should always target the canonical slide of the target page

Dots for directly navigating to pages

• The dots allow directly navigating to each page, so the dot for the canonical slide for each page should be displayed