{"id":23689143,"url":"https://github.com/cavera/nojq-slider","last_synced_at":"2026-05-18T14:36:08.652Z","repository":{"id":243959786,"uuid":"813368984","full_name":"cavera/nojq-slider","owner":"cavera","description":"Simple and minimal slider with no jQuery dependency","archived":false,"fork":false,"pushed_at":"2024-11-02T17:06:12.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-30T00:36:01.104Z","etag":null,"topics":["css","slider","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://cavera.github.io/nojq-slider/","language":"HTML","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/cavera.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-11T00:35:14.000Z","updated_at":"2024-11-02T17:06:16.000Z","dependencies_parsed_at":"2024-06-16T19:03:40.263Z","dependency_job_id":null,"html_url":"https://github.com/cavera/nojq-slider","commit_stats":null,"previous_names":["cavera/nojq-slider"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavera%2Fnojq-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavera%2Fnojq-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavera%2Fnojq-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavera%2Fnojq-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cavera","download_url":"https://codeload.github.com/cavera/nojq-slider/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239748934,"owners_count":19690355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css","slider","vanilla-javascript"],"created_at":"2024-12-30T00:36:31.821Z","updated_at":"2025-10-29T15:40:39.437Z","avatar_url":"https://github.com/cavera.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# No jQ Slider\n\nA js slider with no dependencies and little extra job for the browser.\n\n\u003e Currently tested on chromium browsers.\n\nThis is a simple slider built using HTML, CSS, and JavaScript. The slider is responsive and can be made to adapt its height based on the content of each slide. It supports infinite scrolling, autoplay with custom intervals, and navigation buttons for manually moving through the slides.\n\n## Features:\n\n- **Responsive Design:** The slider adjusts to fit the width of its container.\n- **Autoplay:** Slides automatically change every interval if enabled.\n- **Infinite Scrolling:** Option to loop through slides without limits.\n- **Navigation Buttons:** Clicking on previous or next buttons advances the slide.\n- **Adaptive Height:** The height of the slider adjusts dynamically based on the tallest slide visible at any time, unless turned off with adaptiveHeigh.\n- Customizable speed of animations\n\n## Demo\n\nYou can see a live demo of this slider by visiting [https://cavera.github.io/nojq-slider/](https://cavera.github.io/nojq-slider/).\n\n## Installation\n\n1. Clone the repository: `git clone https://github.com/yourusername/slider.git`\n2. Navigate to the project directory: `cd slider`\n3. Open the `index.html` file in a web browser to see the demo.\n\n## Usage\n\nTo use this slider, you need to include the following files in your HTML:\n\n1. `styles.css` - The CSS file for styling the slider.\n2. `slider.js` - The JavaScript file containing the slider functionality.\n3. Add the `slider.css` and `slider.js` files to your project's HTML file.\n4. Customize the slider by modifying the `slider.css` file, or add your own styles in your project's style sheet.\n\nAdditionally, you will need to modify the `createSlider()` function in the `slider.js` file to fit your specific needs. You can pass an object with various configuration options as the argument to customize the behavior of the slider.\n\n## Usage example\n\n```js\ncreateSlider({\n  wrapper: \".slider\", // The main wrapper element for the slider\n  container: \".slides\", // The container for all slides\n  track: \".slide-items\", // The track within which slides are positioned\n  nextBtn: \".btn-next\", // The button to go to the next slide\n  prevBtn: \".btn-prev\", // The button to go to the previous slide\n  autoplay: true, // Enable autoplay of slides\n  autoplayInterval: 4000, // Time between autoplays in milliseconds\n  speed: 500, // Transition speed in milliseconds\n  infinite: true, // Loop through the slides indefinitely\n  visibleSlides: 3, // How many slides are visible at once\n});\n```\n\nThis is a detailed explanation of the options available in `createSlider()`:\n\n**wrapper** (string): CSS selector for the main wrapper element around the slider.\n\n**container** (string): CSS selector for the container that holds all the slides.\n\n**track** (string): CSS selector for the track within which the slides are positioned.\n\n**nextBtn** (string): CSS selector for the button to go to the next slide.\n\n**prevBtn** (string): CSS selector for the button to go to the previous slide.\n\n**autoplay** (boolean): Whether the slider should start autoplaying on page load.\n\n**autoplayInterval** (number): The interval in milliseconds between each autoplay transition.\n\n**speed** (number): The duration of the animation when moving from one slide to another, in milliseconds.\n\n**infinite** (boolean): Whether the slider should loop endlessly without limits.\n\n**visibleSlides** (number): The maximum number of slides that can be visible at once. If this value exceeds the total number of slides, it defaults to 1.\n\n**adaptiveHeigh** (boolean): Whether the slider should adjust its height based on the tallest slide visible at any time. It's turned on by default.\n\n**onChangeSlide** (function): A function called when the current slide changes. Receives the new active slide element as an argument. Default is an empty function.\n\n## Note:\n\nEnsure that you have linked a CSS file or added necessary styles for the slider elements (e.g., .slider, .slides, etc.) before using this script.\n\n## Contributing\n\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcavera%2Fnojq-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcavera%2Fnojq-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcavera%2Fnojq-slider/lists"}