{"id":19709977,"url":"https://github.com/dandevg/flexible-bootstrap-carousel","last_synced_at":"2025-04-29T17:31:06.799Z","repository":{"id":57238365,"uuid":"82736816","full_name":"DanDevG/flexible-bootstrap-carousel","owner":"DanDevG","description":"This plugin makes possible showing different numbers of entities in each item of your Bootstrap carousel depending on the browser's window width.","archived":false,"fork":false,"pushed_at":"2018-09-21T19:36:34.000Z","size":4239,"stargazers_count":5,"open_issues_count":2,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-15T09:15:43.952Z","etag":null,"topics":["bootstrap","carousel-plugin","flexible-carousel","jquery","plugin"],"latest_commit_sha":null,"homepage":"","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/DanDevG.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}},"created_at":"2017-02-21T23:12:34.000Z","updated_at":"2020-12-12T12:19:02.000Z","dependencies_parsed_at":"2022-08-26T14:13:01.449Z","dependency_job_id":null,"html_url":"https://github.com/DanDevG/flexible-bootstrap-carousel","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanDevG%2Fflexible-bootstrap-carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanDevG%2Fflexible-bootstrap-carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanDevG%2Fflexible-bootstrap-carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanDevG%2Fflexible-bootstrap-carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanDevG","download_url":"https://codeload.github.com/DanDevG/flexible-bootstrap-carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251549166,"owners_count":21607363,"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":["bootstrap","carousel-plugin","flexible-carousel","jquery","plugin"],"created_at":"2024-11-11T22:05:38.319Z","updated_at":"2025-04-29T17:31:03.326Z","avatar_url":"https://github.com/DanDevG.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flexible-bootstrap-carousel\n\nFlexible Bootstrap Carousel plugin\n\n## Introducing\nThis plugin makes possible showing different numbers of entities in each item of your Bootstrap carousel depending on the browser's window width.\nThe content of each entity might be either simple (an image, for example) \nor complicated (as a product description with several images, selectors of sizes, colors etc... in an internet-store).\nActually, the plugin creates several columns in each item of a Bootstrap carousel.\nThen it is watching if the width of a browser window is changing and is adjusting number of columns in each item respectively to window's size \n(by default - from 1 through 3 columns, but you can set up number of entities in each item on your own).\nTo see the plugin in action visit this [showcase](http://flexcarousel.surge.sh)\n\n## Dependencies\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/bootstrap.css\" /\u003e\n\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"js/bootstrap.js\"\u003e\u003c/script\u003e\n```\n\n## Installing\nYou can download flexible-bootstrap-carousel.js and flexible-bootstrap-carousel.css manually to you project or you can install with npm:\n\n```shall\n\nnpm install flexible-bootstrap-carousel\n\n```\n\nor bower:\n\n```shall\n\nbower install flexible-bootstrap-carousel\n\n```\n\n## Usage\n\nFirst of all, you'll want to link the flexible-bootstrap-carousel.js and flexible-bootstrap-carousel.css files to your web-page:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"css/flexible-bootstrap-carousel.css\" /\u003e\n\u003cscript type=\"text/javascript\" src=\"js/flexible-bootstrap-carousel.js\"\u003e\u003c/script\u003e\n```\n\nTo initiate the plugin you might add some additional class name to those Bootstrap carousels which you want to turn into flexible ones.\nSuppose, it is a *.flexible* class name:\n\n```html\n\u003cdiv class=\"carousel flexible slide\" data-ride=\"carousel\" data-interval=\"5000\" data-wrap=\"true\"\u003e\n\t\n\t//some stuff inside the carousel\n\t\n\u003c/div\u003e\n```\n\nThen you need to create inside of the carousel a container with class name of *.items*. You also should put the items, which you want to appear in the carousel, \ninto this container (each of them should have class of *.item*).\n\n```html\n\u003cdiv class=\"carousel flexible custom slide\" data-ride=\"carousel\" data-interval=\"5000\" data-wrap=\"true\"\u003e\n\t\u003cdiv class=\"items\"\u003e\n\t\t\u003cdiv class=\"flex-item\"\u003e\n\t\t\t\u003cimg class=\"img-responsive\" src=\"images/item1.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\n\t\t\u003cdiv class=\"flex-item\"\u003e\n\t\t\t\u003cimg class=\"img-responsive\" src=\"images/item2.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"flex-item\"\u003e\n\t\t\t\u003cimg class=\"img-responsive\" src=\"images/item3.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"flex-item\"\u003e\n\t\t\t\u003cimg class=\"img-responsive\" src=\"images/item4.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"flex-item\"\u003e\n\t\t\t\u003cimg class=\"img-responsive\" src=\"images/item5.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\t\n\t\t\u003cdiv class=\"flex-item\"\u003e\n\t\t\t\u003cimg class=\"img-responsive\" src=\"images/item6.jpg\"/\u003e\n\t\t\u003c/div\u003e\n\t\u003c/div\u003e\n\t\n\t\u003cdiv class=\"carousel-inner\" role=\"listbox\"\u003e\n\t\t\n\t\u003c/div\u003e\n\t\n\t\u003ca class=\"left carousel-control\" href=\"#simple-content-carousel\" role=\"button\" data-slide=\"prev\"\u003e\n\t\t\u003cspan class=\"fa fa-angle-left\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n\t\t\u003cspan class=\"sr-only\"\u003ePrevious\u003c/span\u003e\n\t\u003c/a\u003e\n\t\u003ca class=\"right carousel-control\" href=\"#simple-content-carousel\" role=\"button\" data-slide=\"next\"\u003e\n\t\t\u003cspan class=\"fa fa-angle-right\" aria-hidden=\"true\"\u003e\u003c/span\u003e\n\t\t\u003cspan class=\"sr-only\"\u003eNext\u003c/span\u003e\n\t\u003c/a\u003e\n\t\n\u003c/div\u003e\n```\n\nYou can leave empty container with class name of *.carousel-inner*.\n\nFinally, you just have to add next code to your JavaScript file:\n\n```javascript\n\n$(\".carousel.flexible.default\").flexCarousel();\n\n```\n\nYou've done it! Enjoy of your page with built in flexible Bootstrap carousel.\n\n## Extra customization\nIf you want to set up more than one carousel with different settings on the same page, you also need to add some another classes (or id) to each of the carousel\nto make it possible to differentiate them. For example, you can add a *.default* class name if you do not want to change default settings\nand a *.custom* class name if you want to set up your own number of columns for each screen size:\n\n```html\n\u003cdiv class=\"carousel flexible default slide\" data-ride=\"carousel\" data-interval=\"5000\" data-wrap=\"true\"\u003e\n\t\n\t//some stuff inside the carousel\n\t\n\u003c/div\u003e\n\n\u003cdiv class=\"carousel flexible custom slide\" data-ride=\"carousel\" data-interval=\"5000\" data-wrap=\"true\"\u003e\n\t\n\t//some stuff inside the carousel\n\t\n\u003c/div\u003e\n```\n\nIf you want to set up number of entities inside of each item of a carousel on your own, you can do it by giving an object with your settings to *.flexCarousel* function.\nInside the object you put properties (ranges of screen sizes) in quotes, and give a value (number of columns) to each of the properities.\nFor example, if you want to appear 2 entities inside of each item of a carousel when screen size is between 320px and 768px, but 5 items when\nscreen size is more than 768px, you should write the next code:\n\n```javascript\n\n$(\".carousel.flexible\").flexCarousel({\n\t\"320-768\": 2,\n\t\"769-20000\": 5\n});\n\n```\n\nPay attention to two things in the code above. **First** - you should not place whitespaces inside property names. **Second** - if you want, for example, \n5 columns on screen size of 769px and above, you just write *\"769-20000\": 5*. The second number should be large enough (in this case it is 20000) \nto ensure that any of existing devices can't reach it.\n\n##  Adjusting contents of the entities of the carousel\n\nIf the content of the entities of your carusel is complicated enough, you might want to adjust it each time when the carousel changes number of elements inside each item.\nTo do so you can use the event *aCarouselHasBeenAdjusted*, that is triggered each time when the carousel has been adjusted:\n\n```javascript\n\n$(\".carousel.flexible\").on(\"aCarouselHasBeenAdjusted\", function() {\n\t// do something\n});\n\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/DanDevG/flexible-bootstrap-carousel/blob/master/LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdandevg%2Fflexible-bootstrap-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdandevg%2Fflexible-bootstrap-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdandevg%2Fflexible-bootstrap-carousel/lists"}