Download the PHP package thomhines/square1 without Composer
On this page you can find all versions of the php package thomhines/square1. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download thomhines/square1
More information about thomhines/square1
Files in thomhines/square1
Package square1
Short Description Square1 jQuery slider (JS/CSS image/content slider with responsive srcset support).
License MIT
Homepage https://github.com/thomhines/square1
Informations about the package square1
Square1
A very simple jQuery image/content slider that responsively handles images of any size or shape.
Requires jQuery
Demo
Installation
1) Manual installation
Download or copy the project files into your web-accessible assets directory, then load jQuery and Square1:
2) Composer (Packagist)
Install with Composer:
Then include files from your Composer vendor directory:
3) Git submodule
Add Square1 as a submodule:
Then include it in your page:
Usage
HTML
Each direct child of the slideshow container is wrapped in an internal slide element. You can use a flat list of images:
caption— optional; used by the caption UI when enabled (in addition toalt).data-src/data-srcset— optional data- prefix delays loading until Square1 promotes them tosrc/srcset(sequential loading). Pair with thelazy_loadoption to load each slide only when needed.srcset/sizes— optional; native responsive selection applies to visible images.scale-from/scale-from-mobile— optional per-imageobject-position; on narrow viewports (under 600px),scale-from-mobilewins when present.space— optional; copied onto the slide wrapper for advanced filtering (see globalfilter_galleryin the script if you use tagged slides).
Or use rich slides (first <img> in each child is the photo layer; remaining markup is overlaid or non-image slides without an <img>):
JavaScript
Slideshow options
Pass an object of overrides to square1():
Defaults and meanings (see square1.js for inline comments):
| Option | Default | Description |
|---|---|---|
width |
'' |
Any CSS width. Blank uses stylesheet / block layout (demo uses full width). |
height |
'' |
Any CSS height. When blank and aspect_ratio is also blank, the first decoded image sets aspect-ratio on the root so the box gets a height. |
aspect_ratio |
'' |
Any valid CSS aspect-ratio (e.g. '16/9', '1.3'). When set, height is applied as auto so the box sizes from width and this ratio. |
animation |
'fade' |
'fade' or 'slide'. |
fill_mode |
'cover' |
'cover' or 'contain' — maps to object-fit on slide images. |
scale_from |
'center center' |
Default object-position for images (same keyword grammar as CSS). |
start_delay |
0 |
Milliseconds before autoplay when auto_start is true. |
slide_duration |
4000 |
Milliseconds each slide stays visible. |
transition_time |
500 |
Transition duration in ms. |
lazy_load |
false |
When true, does not pre-load the sequential chain; images load when needed (still use data-src / data-srcset where appropriate). |
auto_start |
true |
Start the timer automatically. |
pause_on_hover |
false |
Pause autoplay while the pointer is over the slideshow. |
keyboard |
true |
Arrow keys; tabindex is set when enabled. |
gestures |
true |
Swipe to change slides on touch devices. |
theme |
'dark' |
'dark' or 'light' UI chrome. |
background |
'none' |
CSS background on the slideshow root. |
prev_next_nav |
'inside' |
'inside', 'outside', 'hover', or 'none'. |
dots_nav |
'inside' |
Same choices as arrows. |
caption |
'outside' |
'inside', 'outside', 'hover', or 'none' — uses the caption attribute when present. |
onLoad |
function () {} |
Fires when all slides have finished loading. |
onPlay |
function () {} |
Fires when playback starts. |
onStop |
function () {} |
Fires when playback stops. |
onChange |
function () {} |
Fires after the active slide changes. |
Remote control
License
Square1 is released under the MIT License. See the LICENSE file for full text.
Thanks
Thanks to the following image providers used in the demos: