{"id":26085268,"url":"https://github.com/codezero-be/jquery-slider","last_synced_at":"2026-04-22T13:33:31.003Z","repository":{"id":58244543,"uuid":"88093230","full_name":"codezero-be/jquery-slider","owner":"codezero-be","description":"Responsive jQuery Slider","archived":false,"fork":false,"pushed_at":"2017-08-25T14:42:16.000Z","size":638,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-01-26T22:50:19.584Z","etag":null,"topics":["image-slider","jquery","jquery-slider","responsive","slider"],"latest_commit_sha":null,"homepage":"https://codezero-be.github.io/jquery-slider/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codezero-be.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-12T20:25:26.000Z","updated_at":"2023-12-26T12:42:34.000Z","dependencies_parsed_at":"2022-08-31T00:31:33.254Z","dependency_job_id":null,"html_url":"https://github.com/codezero-be/jquery-slider","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/codezero-be/jquery-slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fjquery-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fjquery-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fjquery-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fjquery-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codezero-be","download_url":"https://codeload.github.com/codezero-be/jquery-slider/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codezero-be%2Fjquery-slider/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32139417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T13:27:12.868Z","status":"ssl_error","status_checked_at":"2026-04-22T13:26:44.791Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-slider","jquery","jquery-slider","responsive","slider"],"created_at":"2025-03-09T05:58:04.764Z","updated_at":"2026-04-22T13:33:30.987Z","avatar_url":"https://github.com/codezero-be.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Responsive jQuery Slider\n\n[![npm](https://img.shields.io/npm/v/codezero-jquery-slider.svg)](https://www.npmjs.com/package/codezero-jquery-slider)\n[![npm](https://img.shields.io/npm/dt/codezero-jquery-slider.svg)](https://www.npmjs.com/package/codezero-jquery-slider)\n[![npm](https://img.shields.io/npm/l/codezero-jquery-slider.svg)](https://www.npmjs.com/package/codezero-jquery-slider)\n\n[View Demo](https://codezero-be.github.io/jquery-slider/) - [Tinker with CodePen](https://codepen.io/ivanvermeyen/pen/yMWvOR)\n\nIs this the best, most advanced slider out there? No, not at all…\nBut even with all its features, the slider I was using before didn’t do exactly what I was looking for. So here we are.\n\n## The main goal of this slider is to…\n- be able to horizontally traverse through slides,\n- allow any HTML content in a slide,\n- also be an image slider right out of the box,\n- allow slides with fixed and auto widths and heights,\n- move 1 slide at a time and center it in the viewport,\n- move 70% of the viewport, if the widest slide is less than 30%,\n- align slides left, center or right when the viewport is wider than the slides,\n- make all of this as customizable as possible…\n\n## Contents\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Basic Setup](#basic-setup)\n  - [Slide Backgrounds](#slide-backgrounds)\n  - [Slide Overlays](#slide-overlays)\n  - [Image Slides](#image-slides)\n    - [Auto Width Image Slides](#auto-width-image-slides)\n    - [Full Width Image Slides](#full-width-image-slides)\n    - [Covered Width Image Slides](#covered-width-image-slides)\n    - [Image Hover Overlay](#image-hover-overlay)\n    - [Image Caption](#image-caption)\n- [Options](#options)\n- [Development](#development)\n- [Changelog](#changelog)\n- [License](#license)\n\n## Requirements\n- [jQuery](https://jquery.com/)\n- [jQuery.scrollTo](https://github.com/flesler/jquery.scrollTo)\n- [jQuery-Touch-Events](https://github.com/benmajor/jQuery-Touch-Events) (if you want swiping)\n- Modern browser (**not** IE 9 or less)\n\n## Installation\n\n### Via Bower\n```\nbower install codezero-jquery-slider --save\n```\n\n### Via NPM\n```\nnpm install codezero-jquery-slider --save\n```\n\n### Include JS and CSS\n```html\n\u003c!-- Important slider styling --\u003e\n\u003clink rel=\"stylesheet\" href=\"css/slider.min.css\"\u003e\n\n\u003c!-- Required 3rd party scripts --\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery-touch-events/1.0.8/jquery.mobile-events.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Slider script --\u003e\n\u003cscript src=\"js/slider.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Kickoff the slider --\u003e\n\u003cscript\u003e\n    $('.slider').slide();\n\u003c/script\u003e\n```\n\n## Usage\n\n### Basic Setup\nThe following snippet is the base skeleton of a slider.\n\n```html\n\u003cdiv class=\"slider\"\u003e\n\n    \u003ca href=\"#\" class=\"slider-prev\"\u003e\u0026langle;\u003c/a\u003e\n    \u003ca href=\"#\" class=\"slider-next\"\u003e\u0026rangle;\u003c/a\u003e\n\n    \u003cdiv class=\"slider-viewport\"\u003e\n        \u003cdiv class=\"slider-track\"\u003e\n\n            \u003cdiv class=\"slide\"\u003e\n                \u003c!-- Slide Content --\u003e\n            \u003c/div\u003e\n\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\nBy default, each slide will have an **auto width and height**.\nYou can specify a fixed width and height in CSS yourself,\nor [change some variables](https://github.com/codezero-be/jquery-slider/blob/master/src/scss/_variables.scss) if you are compiling SCSS.\n\nIf you want every slide to take up 100% width of the viewport, simply add the `slide-full-width` class to the `.slider`.\nOr if you want only specific slides to be 100% wide, you can add the `slide-full-width` class to that `.slide`.\nThe latter is probably less useful...\n\nThe slide content can really be anything. Paragraphs, headings, images, ... Style it however you want.\n\nRemember the `.slide` is a `flex` child, so you might want to wrap your content\nin another `\u003cdiv\u003e` for easier styling or positioning...\n\n### Slide Backgrounds\nYou can [change some variables](https://github.com/codezero-be/jquery-slider/blob/master/src/scss/_variables.scss) to choose default backgrounds for your slides,\nwrite your own styles or use a `data-background` attribute to set a specific background image on a slide.\n\nIf you want the background to zoom in when you hover over it, use `data-zoom-background` instead.\nYou can set your own zoom effect in the [variables file](https://github.com/codezero-be/jquery-slider/blob/master/src/scss/_variables.scss),\nas long as it's a valid CSS `transform` value.\n\n```html\n\u003cdiv class=\"slider slide-full-width\"\u003e\n\n    \u003ca href=\"#\" class=\"slider-prev\"\u003e\u0026langle;\u003c/a\u003e\n    \u003ca href=\"#\" class=\"slider-next\"\u003e\u0026rangle;\u003c/a\u003e\n\n    \u003cdiv class=\"slider-viewport\"\u003e\n        \u003cdiv class=\"slider-track\"\u003e\n\n            \u003cdiv class=\"slide\" data-background=\"path/to/bg-image.jpg\"\u003e\n                \u003c!-- Slide Content --\u003e\n            \u003c/div\u003e\n\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n### Slide Overlays\nTo add a color overlay on top of the background image, wrap your slide content in a `\u003cdiv\u003e` with the `slide-overlay` class.\n\n```html\n\u003cdiv class=\"slider slide-full-width\"\u003e\n\n    \u003ca href=\"#\" class=\"slider-prev\"\u003e\u0026langle;\u003c/a\u003e\n    \u003ca href=\"#\" class=\"slider-next\"\u003e\u0026rangle;\u003c/a\u003e\n\n    \u003cdiv class=\"slider-viewport\"\u003e\n        \u003cdiv class=\"slider-track\"\u003e\n\n            \u003cdiv class=\"slide\" data-background=\"path/to/bg-image.jpg\"\u003e\n                \u003cdiv class=\"slide-overlay\"\u003e\n                    \u003c!-- Slide Content --\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n### Image Slides\nImage slides have specific markup and default styling out of the box.\nThe only thing you might want to hook up yourself is any lightbox you prefer.\n\n#### Auto Width Image Slides\nTo restrain the image size, you might want to specify a `max-height` for the `\u003cimg\u003e`.\nIf you set the `$slide-height` [variable in SCSS](https://github.com/codezero-be/jquery-slider/blob/master/src/scss/_variables.scss),\nthis is done automatically.\n\n```html\n\u003cdiv class=\"slider\"\u003e\n\n    \u003ca href=\"#\" class=\"slider-prev\"\u003e\u0026langle;\u003c/a\u003e\n    \u003ca href=\"#\" class=\"slider-next\"\u003e\u0026rangle;\u003c/a\u003e\n\n    \u003cdiv class=\"slider-viewport\"\u003e\n        \u003cdiv class=\"slider-track\"\u003e\n\n            \u003cdiv class=\"slide\"\u003e\n                \u003ca href=\"path/to/original-image.jpg\" class=\"slide-image\"\u003e\n                    \u003cimg src=\"path/to/image-thumb.jpg\"\u003e\n                \u003c/a\u003e\n            \u003c/div\u003e\n\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n\u003e Note that the `.slide-image` doesn't have to be a link.\n\u003e It can also just be a `\u003cdiv\u003e`.\n\n#### Full Width Image Slides\nAgain, you can make each slide full width by adding the `slide-full-width` class.\nThe clickable `.slide-image` element will be centered inside the slide.\n\n```html\n\u003cdiv class=\"slider slide-full-width\"\u003e\n\n    \u003ca href=\"#\" class=\"slider-prev\"\u003e\u0026langle;\u003c/a\u003e\n    \u003ca href=\"#\" class=\"slider-next\"\u003e\u0026rangle;\u003c/a\u003e\n\n    \u003cdiv class=\"slider-viewport\"\u003e\n        \u003cdiv class=\"slider-track\"\u003e\n\n            \u003cdiv class=\"slide\"\u003e\n                \u003ca href=\"path/to/original-image.jpg\" class=\"slide-image\"\u003e\n                    \u003cimg src=\"path/to/image-thumb.jpg\"\u003e\n                \u003c/a\u003e\n            \u003c/div\u003e\n\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n#### Covered Width Image Slides\nTo make the `.slide-image` element also full width, replace the `slide-full-width` class with `slide-cover-width`. \nNow only the image is still centered inside the `.slide-image` element, which makes sense since we don't want to stretch it out.\n\nHowever, to set the image as a background, covering the entire slide,\nsimply add the `slide-image-background` class to the `\u003cimg\u003e`.\nNote that this will probably crop the image to fit the slides dimensions.\n\n```html\n\u003cdiv class=\"slider slide-cover-width\"\u003e\n\n    \u003ca href=\"#\" class=\"slider-prev\"\u003e\u0026langle;\u003c/a\u003e\n    \u003ca href=\"#\" class=\"slider-next\"\u003e\u0026rangle;\u003c/a\u003e\n\n    \u003cdiv class=\"slider-viewport\"\u003e\n        \u003cdiv class=\"slider-track\"\u003e\n\n            \u003cdiv class=\"slide\"\u003e\n                \u003ca href=\"path/to/original-image.jpg\" class=\"slide-image\"\u003e\n                    \u003cimg src=\"path/to/image-thumb.jpg\" class=\"slide-image-background\"\u003e\n                \u003c/a\u003e\n            \u003c/div\u003e\n\n        \u003c/div\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n#### Image Hover Overlay\nWant to show a zoom icon when you hover over the image? Just add it...\n\n```html\n\u003cdiv class=\"slide\"\u003e\n    \u003ca href=\"path/to/original-image.jpg\" class=\"slide-image\"\u003e\n        \u003c!-- Note: this icon requires Font Awesome... --\u003e\n        \u003c!-- Use any library you like... --\u003e\n        \u003ci class=\"fa fa-search-plus slide-image-hoverlay\"\u003e\u003c/i\u003e\n        \u003cimg src=\"path/to/image-thumb.jpg\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n```\n \n Or just show some text...\n \n```html\n\u003cdiv class=\"slide\"\u003e\n    \u003ca href=\"path/to/original-image.jpg\" class=\"slide-image\"\u003e\n        \u003cspan class=\"slide-image-hoverlay\"\u003eVIEW\u003c/span\u003e\n        \u003cimg src=\"path/to/image-thumb.jpg\"\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n```\n\n#### Image Caption\nSame as the hoverlay, if you would like to display an image caption, just add the element...\n\n```html\n\u003cdiv class=\"slide\"\u003e\n    \u003ca href=\"path/to/original-image.jpg\" class=\"slide-image\"\u003e\n        \u003cimg src=\"path/to/image-thumb.jpg\"\u003e\n        \u003cspan class=\"slide-image-caption\"\u003e\n            Beautiful example image!\n        \u003c/span\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n```\n\n## Options\nIf you are using SASS/SCSS, there are a bunch of variables you can tweak to change the behavior of the slider.\nI have added comments, so I hope it will be clear what each option will do.\nJust take a look at the [variables file](https://github.com/codezero-be/jquery-slider/blob/master/src/scss/_variables.scss).\n\nThe javascript side also has some options. These are also commented so I would again suggest to\ntake a look at the `defaults` object in the [javascript source file](https://github.com/codezero-be/jquery-slider/blob/master/src/js/slider.js).\n\nOverriding the defaults would take the form of:\n\n```javascript\n$('.slider').slide({\n    slideSpeed: 300,\n    enableSwipe: false\n});\n```\n\n## Development\nI am using a tool called [Laravel Mix](https://github.com/JeffreyWay/laravel-mix) to compile javascript and SCSS.\nMake sure you have the latest version of [NodeJS](https://nodejs.org/en/) installed and then run `npm install`.\n\n- To compile run `npm run dev`.\n- To compile and watch for changes run `npm run watch`.\n- To compile for production (minify/uglify) run `npm run production`.\n\n## Changelog\n\nView the [changelog](https://github.com/codezero-be/jquery-slider/blob/master/CHANGELOG.md).\n\n## License\nThe MIT License (MIT). Please see [License File](https://github.com/codezero-be/jquery-slider/blob/master/LICENSE.md) for more information.\n\n---\n[![Analytics](https://ga-beacon.appspot.com/UA-58876018-1/codezero-be/jquery-slider)](https://github.com/igrigorik/ga-beacon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodezero-be%2Fjquery-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodezero-be%2Fjquery-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodezero-be%2Fjquery-slider/lists"}