{"_id":"d-carousel","_rev":"8-1ed35545168f9be23c40b195f4a65bf7","name":"d-carousel","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.0":{"name":"d-carousel","version":"1.0.0","main":"src/js/main.js","license":"MIT","scripts":{"browsersync":"browser-sync start --s --index 'index.html' --files 'index.html, dist/**/*.js', 'dist/**/*.css' --no-notify","build":"npm run clean && rollup -c && npm run build:css","build:css":"npm run css:scss & npm run css:autoprefixer && npm run css:minify","watch":"npm run clean && (npm run watch:css & rollup -c -w & npm run browsersync)","watch:css":"npm run build:css && onchange 'src/scss/*.scss' -- npm run build:css","clean":"rimraf dist","css:scss":"node-sass --output-style nested --indent-type space --indent-width 2 -o dist/css src/scss","css:minify":"uglifycss --output dist/css/d-carousel.css dist/css/d-carousel.css","css:autoprefixer":"postcss --no-map -u autoprefixer --autoprefixer.browsers '> 5%, ie 10' -r dist/css/*"},"devDependencies":{"autoprefixer":"^7.1.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-latest":"^6.24.1","browser-sync":"^2.18.12","node-sass":"^4.5.3","onchange":"^3.2.1","postcss-cli":"^4.1.0","rimraf":"^2.6.1","rollup":"^0.43.0","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-uglify":"^2.0.1","rollup-watch":"^4.0.0","uglify-js":"^3.0.16","uglifycss":"^0.0.27"},"dependencies":{"bezier-easing":"^2.0.3"},"gitHead":"d2ec73ed4f245b347f921965cf91f41a36376426","description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","_id":"d-carousel@1.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"jimmaaay","email":"thisguy@jimmythompson.me"},"dist":{"integrity":"sha512-dOn1728NukTsoNRDYjzKcE4yeJioFuTeOzrbaFhUEEM/osjBTFJ92UFyBp2/Z7tqYj9rHy+NMdmG8aCIqfsibA==","shasum":"1e3f04d4b2b3861b9ef21f35b7355584d8805132","tarball":"https://registry.npmjs.org/d-carousel/-/d-carousel-1.0.0.tgz","fileCount":19,"unpackedSize":337189,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwGd7eBeT1vr/sria9IFwf47Net75BKjeQJV0JSnNGegIgYS2TJghUgyDH6wtUt/kqYIfapXtXXMGpp0/rafjQC3s="}]},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d-carousel_1.0.0_1519243945438_0.1785077821424934"},"_hasShrinkwrap":false},"1.0.1":{"name":"d-carousel","version":"1.0.1","main":"dist/js/d-carousel.min.js","license":"MIT","scripts":{"browsersync":"browser-sync start --s --index 'index.html' --files 'index.html, dist/**/*.js', 'dist/**/*.css' --no-notify","build":"npm run clean && rollup -c && npm run build:css","build:css":"npm run css:scss & npm run css:autoprefixer && npm run css:minify","watch":"npm run clean && (npm run watch:css & rollup -c -w & npm run browsersync)","watch:css":"npm run build:css && onchange 'src/scss/*.scss' -- npm run build:css","clean":"rimraf dist","css:scss":"node-sass --output-style nested --indent-type space --indent-width 2 -o dist/css src/scss","css:minify":"uglifycss --output dist/css/d-carousel.css dist/css/d-carousel.css","css:autoprefixer":"postcss --no-map -u autoprefixer --autoprefixer.browsers '> 5%, ie 10' -r dist/css/*"},"devDependencies":{"autoprefixer":"^7.1.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-latest":"^6.24.1","browser-sync":"^2.18.12","node-sass":"^4.5.3","onchange":"^3.2.1","postcss-cli":"^4.1.0","rimraf":"^2.6.1","rollup":"^0.43.0","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-uglify":"^2.0.1","rollup-watch":"^4.0.0","uglify-js":"^3.0.16","uglifycss":"^0.0.27"},"dependencies":{"bezier-easing":"^2.0.3"},"gitHead":"d2ec73ed4f245b347f921965cf91f41a36376426","description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","_id":"d-carousel@1.0.1","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"jimmaaay","email":"thisguy@jimmythompson.me"},"dist":{"integrity":"sha512-Jo9sSVJdOc3P8GYXc+L8mnx7lTYYPGhXgAUmLNLRMtD+H58TfC1BldrWpiv+Ri9+aE4juP3Tr6FRhmX5y5jKnw==","shasum":"91dc480ef107cc1b7d29146871cf987af8a072ea","tarball":"https://registry.npmjs.org/d-carousel/-/d-carousel-1.0.1.tgz","fileCount":19,"unpackedSize":337200,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBm5rMCEi4Bz1UW7CJ5DouFDJ33On/awFY/ehudkKA5AIhAKKHnmL76COeyKUyfeCgK9ovdBsvttut1D/IMIVSBlmM"}]},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d-carousel_1.0.1_1519244697226_0.7270946823567126"},"_hasShrinkwrap":false},"1.0.2":{"name":"d-carousel","version":"1.0.2","main":"dist/js/d-carousel.min.js","license":"MIT","scripts":{"browsersync":"browser-sync start --s --index 'index.html' --files 'index.html, dist/**/*.js', 'dist/**/*.css' --no-notify","build":"npm run clean && rollup -c && npm run build:css","build:css":"npm run css:scss & npm run css:autoprefixer && npm run css:minify","watch":"npm run clean && (npm run watch:css & rollup -c -w & npm run browsersync)","watch:css":"npm run build:css && onchange 'src/scss/*.scss' -- npm run build:css","clean":"rimraf dist","css:scss":"node-sass --output-style nested --indent-type space --indent-width 2 -o dist/css src/scss","css:minify":"uglifycss --output dist/css/d-carousel.css dist/css/d-carousel.css","css:autoprefixer":"postcss --no-map -u autoprefixer --autoprefixer.browsers '> 5%, ie 10' -r dist/css/*"},"devDependencies":{"autoprefixer":"^7.1.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-latest":"^6.24.1","browser-sync":"^2.18.12","node-sass":"^4.5.3","onchange":"^3.2.1","postcss-cli":"^4.1.0","rimraf":"^2.6.1","rollup":"^0.43.0","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-uglify":"^2.0.1","rollup-watch":"^4.0.0","uglify-js":"^3.0.16","uglifycss":"^0.0.27"},"dependencies":{"bezier-easing":"^2.0.3"},"gitHead":"e1ef7729f3e932c35abc7109bb7130acc24a2c58","description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","_id":"d-carousel@1.0.2","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"jimmaaay","email":"thisguy@jimmythompson.me"},"dist":{"integrity":"sha512-63n4i61BPH85vPrT3MT6MfOiR4uKvy+JYBOgemJ/g5blenqDhUd/Zx2xVSEqd7OT1DC58gOMdMhPfbffOnncag==","shasum":"95b02072909063e776b5926bf35d71bb142a2e10","tarball":"https://registry.npmjs.org/d-carousel/-/d-carousel-1.0.2.tgz","fileCount":19,"unpackedSize":337189,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDHX4K73IRK2pugV3nNRS7nNZ7xujaQ8lDEyHT4gpzywIgSXblQqMW/djFqrMPfp/alDvI3rtOK4o5kwaSGsg9rxA="}]},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d-carousel_1.0.2_1519245224545_0.0632150075713771"},"_hasShrinkwrap":false},"1.0.3":{"name":"d-carousel","version":"1.0.3","main":"dist/js/d-carousel.min.js","license":"MIT","scripts":{"browsersync":"browser-sync start --s --index 'index.html' --files 'index.html, dist/**/*.js', 'dist/**/*.css' --no-notify","build":"npm run clean && rollup -c && npm run build:css","build:css":"npm run css:scss & npm run css:autoprefixer && npm run css:minify","watch":"npm run clean && (npm run watch:css & rollup -c -w & npm run browsersync)","watch:css":"npm run build:css && onchange 'src/scss/*.scss' -- npm run build:css","clean":"rimraf dist","css:scss":"node-sass --output-style nested --indent-type space --indent-width 2 -o dist/css src/scss","css:minify":"uglifycss --output dist/css/d-carousel.css dist/css/d-carousel.css","css:autoprefixer":"postcss --no-map -u autoprefixer --autoprefixer.browsers '> 5%, ie 10' -r dist/css/*"},"devDependencies":{"autoprefixer":"^7.1.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-latest":"^6.24.1","browser-sync":"^2.18.12","node-sass":"^4.5.3","onchange":"^3.2.1","postcss-cli":"^4.1.0","rimraf":"^2.6.1","rollup":"^0.43.0","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-uglify":"^2.0.1","rollup-watch":"^4.0.0","uglify-js":"^3.0.16","uglifycss":"^0.0.27"},"dependencies":{"bezier-easing":"^2.0.3"},"gitHead":"e1ef7729f3e932c35abc7109bb7130acc24a2c58","description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","_id":"d-carousel@1.0.3","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"jimmaaay","email":"thisguy@jimmythompson.me"},"dist":{"integrity":"sha512-RVqvHm7kpLhQu+5p92qqFbVucnCTpl9BJV2J6uCJRK4Ux335d4N5gK+76rq1Ida4w62s/R7aIGdlXSBiGTA3zQ==","shasum":"b966dc8123c0f5115d8c7fe14476c2e64a634a88","tarball":"https://registry.npmjs.org/d-carousel/-/d-carousel-1.0.3.tgz","fileCount":19,"unpackedSize":337252,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEdEddgDJJrkcKNimE/3ue6aNGqV01XSN7wFfqD4jXOQAiEA998ng9Pag6DYwsGggdf6DcXENaEBKhlJ4SWpCFWFYcY="}]},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d-carousel_1.0.3_1519245407437_0.2937533502711527"},"_hasShrinkwrap":false},"1.0.4":{"name":"d-carousel","version":"1.0.4","main":"dist/js/d-carousel.min.js","license":"MIT","scripts":{"browsersync":"browser-sync start --s --index 'index.html' --files 'index.html, dist/**/*.js', 'dist/**/*.css' --no-notify","build":"npm run clean && rollup -c && npm run build:css","build:css":"npm run css:scss & npm run css:autoprefixer && npm run css:minify","watch":"npm run clean && (npm run watch:css & rollup -c -w & npm run browsersync)","watch:css":"npm run build:css && onchange 'src/scss/*.scss' -- npm run build:css","clean":"rimraf dist","css:scss":"node-sass --output-style nested --indent-type space --indent-width 2 -o dist/css src/scss","css:minify":"uglifycss --output dist/css/d-carousel.css dist/css/d-carousel.css","css:autoprefixer":"postcss --no-map -u autoprefixer --autoprefixer.browsers '> 5%, ie 10' -r dist/css/*"},"devDependencies":{"autoprefixer":"^7.1.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-latest":"^6.24.1","browser-sync":"^2.18.12","node-sass":"^4.5.3","onchange":"^3.2.1","postcss-cli":"^4.1.0","rimraf":"^2.6.1","rollup":"^0.43.0","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-uglify":"^2.0.1","rollup-watch":"^4.0.0","uglify-js":"^3.0.16","uglifycss":"^0.0.27"},"dependencies":{"bezier-easing":"^2.0.3"},"gitHead":"e1ef7729f3e932c35abc7109bb7130acc24a2c58","description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","_id":"d-carousel@1.0.4","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"jimmaaay","email":"thisguy@jimmythompson.me"},"dist":{"integrity":"sha512-NkbkyDkOpWn3Uhg92ieHHWxuC+y8xewWzdrSeCGGAAO3VJJVSC/DLMXS1r160giRcWUTVvRKYqVnJcscNQ/h7Q==","shasum":"c2228e0c9340b17a1cacd893e6dfebfee2788a0e","tarball":"https://registry.npmjs.org/d-carousel/-/d-carousel-1.0.4.tgz","fileCount":19,"unpackedSize":338657,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8FD2iJTR74SC5GuG9E5bYN/8KLZSkl1xFXyY3aY3XgwIgGPMNTV+g4eGx7RzyDCaOg+3GysH/LU6CUCZs2ZRzhzE="}]},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d-carousel_1.0.4_1519245649873_0.9407561853096691"},"_hasShrinkwrap":false},"1.0.5":{"name":"d-carousel","version":"1.0.5","main":"dist/js/d-carousel.min.js","license":"MIT","scripts":{"browsersync":"browser-sync start --s --index 'index.html' --files 'index.html, dist/**/*.js', 'dist/**/*.css' --no-notify","build":"npm run clean && rollup -c && npm run build:css","build:css":"npm run css:scss & npm run css:autoprefixer && npm run css:minify","watch":"npm run clean && (npm run watch:css & rollup -c -w & npm run browsersync)","watch:css":"npm run build:css && onchange 'src/scss/*.scss' -- npm run build:css","clean":"rimraf dist","css:scss":"node-sass --output-style nested --indent-type space --indent-width 2 -o dist/css src/scss","css:minify":"uglifycss --output dist/css/d-carousel.css dist/css/d-carousel.css","css:autoprefixer":"postcss --no-map -u autoprefixer --autoprefixer.browsers '> 5%, ie 10' -r dist/css/*"},"devDependencies":{"autoprefixer":"^7.1.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-latest":"^6.24.1","browser-sync":"^2.18.12","node-sass":"^4.5.3","onchange":"^3.2.1","postcss-cli":"^4.1.0","rimraf":"^2.6.1","rollup":"^0.43.0","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-uglify":"^2.0.1","rollup-watch":"^4.0.0","uglify-js":"^3.0.16","uglifycss":"^0.0.27"},"dependencies":{"bezier-easing":"^2.0.3"},"gitHead":"e1ef7729f3e932c35abc7109bb7130acc24a2c58","description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","_id":"d-carousel@1.0.5","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"jimmaaay","email":"thisguy@jimmythompson.me"},"dist":{"integrity":"sha512-XvNL9J5R6dLIsCxOkFzH07JOXEJN+JfWGIdKlGwp5mihT1EYf22UXB9kuW8vTqEWDPUClrdwYo4BH5JqLEU92Q==","shasum":"d6d186ea26fa3ead412ad9af7eca608845a952cc","tarball":"https://registry.npmjs.org/d-carousel/-/d-carousel-1.0.5.tgz","fileCount":19,"unpackedSize":338668,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFdfbo+tChB6RMRO//O8lnbczRch7Wo79gw+nMN3OptfAiEA/JnCcB5MoRonOmyDcPV5JqGe0aVPkaBJSlRYNdnODK8="}]},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d-carousel_1.0.5_1519245793498_0.8758321555713737"},"_hasShrinkwrap":false},"1.0.6":{"name":"d-carousel","version":"1.0.6","main":"dist/js/d-carousel.min.js","license":"MIT","scripts":{"browsersync":"browser-sync start --s --index 'index.html' --files 'index.html, dist/**/*.js', 'dist/**/*.css' --no-notify","build":"npm run clean && rollup -c && npm run build:css","build:css":"npm run css:scss & npm run css:autoprefixer && npm run css:minify","watch":"npm run clean && (npm run watch:css & rollup -c -w & npm run browsersync)","watch:css":"npm run build:css && onchange 'src/scss/*.scss' -- npm run build:css","clean":"rimraf dist","css:scss":"node-sass --output-style nested --indent-type space --indent-width 2 -o dist/css src/scss","css:minify":"uglifycss --output dist/css/d-carousel.css dist/css/d-carousel.css","css:autoprefixer":"postcss --no-map -u autoprefixer --autoprefixer.browsers '> 5%, ie 10' -r dist/css/*"},"devDependencies":{"autoprefixer":"^7.1.1","babel-plugin-external-helpers":"^6.22.0","babel-preset-latest":"^6.24.1","browser-sync":"^2.18.12","node-sass":"^4.5.3","onchange":"^3.2.1","postcss-cli":"^4.1.0","rimraf":"^2.6.1","rollup":"^0.43.0","rollup-plugin-babel":"^2.7.1","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-node-resolve":"^3.0.0","rollup-plugin-uglify":"^2.0.1","rollup-watch":"^4.0.0","uglify-js":"^3.0.16","uglifycss":"^0.0.27"},"dependencies":{"bezier-easing":"^2.0.3"},"gitHead":"01b96f82ddfc54384430d9a174cc8258464eac12","description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","_id":"d-carousel@1.0.6","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"jimmaaay","email":"thisguy@jimmythompson.me"},"dist":{"integrity":"sha512-u1oro6QC09WQX1SpizdGF4hjaA/7dxBcqwoMCRPHMUusA8qiD8uWT9vfL5SW3GAQo05ZBL9kv9ffOVdVAdMP9Q==","shasum":"d756fd012f302680bef0be31f0530cb2b0c70752","tarball":"https://registry.npmjs.org/d-carousel/-/d-carousel-1.0.6.tgz","fileCount":19,"unpackedSize":338653,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQBzAz9Yhb2LlW7bEqg6q33++sZ2vAYA/MxJSTXZbozgIhAIMRTOSOkI56TxNLxcs+KFXCdVMF0+hWfCX/BXnE8PZz"}]},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/d-carousel_1.0.6_1519245907620_0.5935925537398792"},"_hasShrinkwrap":false}},"time":{"created":"2018-02-21T20:12:25.437Z","1.0.0":"2018-02-21T20:12:25.562Z","modified":"2022-04-28T02:57:28.887Z","1.0.1":"2018-02-21T20:24:57.461Z","1.0.2":"2018-02-21T20:33:44.799Z","1.0.3":"2018-02-21T20:36:47.539Z","1.0.4":"2018-02-21T20:40:50.015Z","1.0.5":"2018-02-21T20:43:13.619Z","1.0.6":"2018-02-21T20:45:07.675Z"},"maintainers":[{"name":"jimmaaay","email":"thisguy@jimmythompson.me"}],"description":"This is a carousel plugin based off of the `g-carousel` that is shown in google search results.","license":"MIT","readme":"# d-carousel\n\nThis is a carousel plugin based off of the `g-carousel` that is shown in google search results. \n\nYou are able to scroll the x-axis with mouse wheel (if you can scroll sideways with yours), by touch and with the buttons\n\n![g-carousel example](https://raw.githubusercontent.com/jimmaaay/d-carousel/master/img/g-carousel-example.jpg)\n\nThe carousel will work fine without the javascript if you do not need the buttons\n\n[Demo](https://www.jimmythompson.me/d-carousel/)\n\n\n## Setup\n\n### NPM\n\n```\nnpm install d-carousel\n```\n\n### Quick Setup\n\n#### Add the javascript onto your page\n```html\n\n```\n\n#### Add the required CSS\n\n```css\n.d-carousel,.d-carousel *{-webkit-box-sizing:border-box;box-sizing:border-box}.d-carousel{position:relative;overflow-y:hidden}.d-carousel__outer{overflow-x:hidden;overflow-y:hidden;-webkit-overflow-scrolling:touch;position:relative;white-space:nowrap;margin-bottom:-1.5rem}.d-carousel__outer::-webkit-scrollbar{display:none}.d-carousel__inner{padding:1rem 0;display:inline-block}.d-carousel__ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 0 1.5rem;padding:0}.d-carousel__item{display:block;padding:0 .5rem}.d-carousel__next,.d-carousel__prev{position:absolute;top:50%;cursor:pointer;display:block;background:rgba(255,255,255,0.5);border:0;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:2.5rem;height:2.5rem;z-index:2}.d-carousel__next svg,.d-carousel__prev svg{width:1.5rem;height:1.5rem}.d-carousel__next.disabled,.d-carousel__prev.disabled{opacity:0;pointer-events:none}.d-carousel__next{right:.5rem;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.d-carousel__prev{left:.5rem;-webkit-transform:translateY(-50%) rotate(-180deg);transform:translateY(-50%) rotate(-180deg)}.d-carousel.init .d-carousel__next,.d-carousel.init .d-carousel__prev{-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out}@supports(color:#fff){.d-carousel__outer{overflow-x:auto}}\n```\n\n#### Add the required HTML for the carousel and replace `${ITEM}` with whatever you want to populate the carousel with. **Note each `
  • ` is a different item and each item MUST have the same width**\n```html\n
    \n
    \n
    \n
    \n
      \n
    • ${ITEM}
      • \n
    • ${ITEM}
      • \n
    • ${ITEM}
      • \n
    \n
    \n
    \n
    \n \n \n
    \n```\n\n#### **Optional** - Set the item widths. **Note all items MUST be the same width**\n```css\n.d-carousel__item {\n width: 150px;\n}\n```\n\n#### Add the following javascript\n```javascript\n dCarousel(document.querySelector('.d-carousel'));\n```\n\n### Build Tools\nThe `dCarousel` script can also be used with build tools by doing the following\n```javascript\nimport dCarousel from 'd-carousel';\n```\n\n## Options\n| Option | Type | Default | Description |\n| ------ | ---- | ------- | ----------- |\n| paddingLeft | Boolean | false | If there is any padding set on `.d-carousel__outer` then this needs to be set to true |\n| outerSelector | String | `.d-carousel__outer` | The selector used for the outer element |\n| innerSelector | String | `.d-carousel__inner` | The selector used for the inner element |\n| itemsSelector | String | `.d-carousel__item` | The selector used for the item elements |\n| nextSelector | String | `.d-carousel__next` | The selector used for the next button element |\n| prevSelector | String | `.d-carousel__prev` | The selector used for the prev button element |\n| easing | Array | `[0.42,0,0.58,1]` | The easing used when scrolling from the next or prev element click. See [this](https://www.w3.org/TR/css3-transitions/#transition-timing-function-property) for common easings values. Default is `ease-in-out`|\n| delta | Function, returns Number | `() => 8` | Returns the number of pixels an item can be offscreen and still count as within view |\n| duration | Function, returns Number | `() => 500` | Returns the number of milliseconds that the scroll animation should take when next or prev element has been clicked. See usage below |\n\n### Usage\nAll arguments are accessible from the first parameter which is an object\n\n#### `duration` option\n\n| Arg Name | Description |\n| -------- | ----------- |\n| itemWidth | The current width of the items elements |\n| containerWidth | The current width of the carousel element |\n| diff | The number of pixels that will be scrolled |\n\n\n## Methods\nMethods are accessible from the returned object of the `dCarousel` function.\n\n| Methods Name | Description |\n| ------------ | ----------- |\n| getItemsShowing | Returns the indexes of elements that are showing, in an array |\n| forceRefresh | Will force refresh the carousel, so all calculations will be remade. This is called on window resize event anyway |\n| destroy | Removed event listeners and restores the carousel markup to how it was before it was initialised. |\n\n## Events\nArguments are available from `event.detail` in the callback;\n\n| Event Name | Args | Description |\n| ---------- | ---- | ----------- |\n| `dCarousel:scroll` | `scrollLeft` - The `scrollLeft` value of the outer element | This event is fired after the carousel has been scrolled and any nessecary calculations have taken place. |\n\n\n## Hide buttons on mobile/tablet\nA possible solution to this would be to add the below to the page. Although this is only a suggestion and hasn't been tested across browsers\n\n```html\n\n\n```\n\n\n## Browser Support\n\n`d-carousel` will work on IE10+ with the polyfills below. However on browsers that do not support [`@supports`](https://developer.mozilla.org/en/docs/Web/CSS/@supports) css rule x-axis scrolling is disabled, so you will have to use the buttons on these browsers. This is due to wanting to disable x-axis scrolling in IE10 and IE11 in the CSS. \n\n### Polyfills\n\n* [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill)\n* [`Object.assign`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill)\n* [`Custom Event`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill)","readmeFilename":"README.md"}