{"_id":"@benjamin-gambling/image-carousel","_rev":"2-3b9d58da7e80aa6192376ba693eaa447","name":"@benjamin-gambling/image-carousel","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@benjamin-gambling/image-carousel","version":"1.0.0","description":"A simple image carousel built with JS where you can add as many images as you like ","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["image-carousel","slide show","pictures","image","images","carousel"],"author":{"name":"Benjamin Gambling"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/benjamin-gambling/image-carousel.git"},"dependencies":{},"devDependencies":{"webpack":"^4.43.0","webpack-cli":"^3.3.12"},"gitHead":"2a460aa48c1a5941b04d30c6521a3dc30a5f6d50","bugs":{"url":"https://github.com/benjamin-gambling/image-carousel/issues"},"homepage":"https://github.com/benjamin-gambling/image-carousel#readme","_id":"@benjamin-gambling/image-carousel@1.0.0","_nodeVersion":"12.17.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-vI7jdakdc6lMY1Z4s25ti6w3NP6Olt8zfY4TFeeejncTmcu4Lth38ovT3io25oy6QH0TKLnEDxguX3tCF5xiqw==","shasum":"0800bca1c7aadbfbd5790f52355eaf238ba8fb5f","tarball":"https://registry.npmjs.org/@benjamin-gambling/image-carousel/-/image-carousel-1.0.0.tgz","fileCount":17,"unpackedSize":5334295,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEfLiCRA9TVsSAnZWagAAUBkP/j3FEYGGAkI0CO8uvJX8\n/Wo7ZDpWkZUlxEI1AZfqyn6TU23RU0Tihkbe2t7LU978iFUAr3vcbEdkCRs6\n9l57b8xPWzKMiAVEfk1sT5J6qJ9SGuM7oYvd6VNDM7UZn6xLZ13OonL4fXfj\nXefra3u56zdXmqlFKKeC1kDOTaugRSWv3FSKOdu18liizm3orReu1JeV3zz/\nrIx6JkqoMoJ/X6UoiYY5QiFcw8di/QHbub5t5nww2887E5av0ZwlzbmrFUcN\nfXooHCG6zx6RLmDfUvXbPWB3z//CuMy2UPeL925vbUd+05ffLnrKtnZtuKZu\nvxdqd/TQ4BNy3BlKPHXjrlpiPGBc0vJHmd62gQ6cG4nFzZE3kiZfwWnw4x+G\neNWN9wfA8imGiVbGaeqL50NfChEmzYg5Xl/X+0vulULQcihAQuOeFx1ZzWuM\nR8BJcL9PPBqUunm26HvFosjaX24PS4IxqaAVQD35X5GZ5DiYEQXVVztFg4Bv\nKF/gx7I81HdVFiSo1pHVkRWqKXp0W6mulP5S6sOLKMKdl4UeO7H8c4Sqb8yN\n6VBgjrkQm1LdZFPmqNn3hA4UMLtaHrYUeRBFJH+VWgdwdOm0ybCCVHKH8sD6\n+b3e6Gzkz+UJqVqC9BB2yqYPRiRiPohyid8bHEwuXKzUvQpDexjofaqZT09v\nz2It\r\n=MuT+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPZqx0938KbCFbU1rSBCdPrFBwYt7bffH+3lb6ebwGVAiEApGOpa6jBLUGAQKE4ofGsbN7CbZDDponfCqJR55x08NQ="}]},"maintainers":[{"name":"benjamin-gambling","email":"benjamin.gambling@gmail.com"}],"_npmUser":{"name":"benjamin-gambling","email":"benjamin.gambling@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/image-carousel_1.0.0_1595011810139_0.9549464849292328"},"_hasShrinkwrap":false},"1.0.1":{"name":"@benjamin-gambling/image-carousel","version":"1.0.1","description":"A simple image carousel built with JS where you can add as many images as you like ","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["image-carousel","slide show","pictures","image","images","carousel"],"author":{"name":"Benjamin Gambling"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/benjamin-gambling/image-carousel.git"},"dependencies":{},"devDependencies":{"webpack":"^4.43.0","webpack-cli":"^3.3.12"},"gitHead":"468e95a3c6a533141f99c5ad9d675194249dc9e1","bugs":{"url":"https://github.com/benjamin-gambling/image-carousel/issues"},"homepage":"https://github.com/benjamin-gambling/image-carousel#readme","_id":"@benjamin-gambling/image-carousel@1.0.1","_nodeVersion":"12.17.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-mqjAtefBJmDk+2Wbvw3MR0TZ5lH7Rmhewvxf+9D71CKLGnGQVJzD0gLcK174tiV0OGHGc23llV/fIyIsj8QEVQ==","shasum":"7a118a25abac588e93fcdba50a5c350b6edb1b1e","tarball":"https://registry.npmjs.org/@benjamin-gambling/image-carousel/-/image-carousel-1.0.1.tgz","fileCount":17,"unpackedSize":5334273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEfUACRA9TVsSAnZWagAAmDcP/36I17RJiSxBQtqKp+kp\ntYxknzYQ/yvcbSPkgadPucTTXUcZKL/biSGzKAGYZeVhPzUMAq1Tgs5yZe3X\nraKg7UN4DPuLLjNxuCxgfdjFhOqPYP6BPOJaIZlMIIndIIFOgt1VzkmIgupu\nn0z91QFGvFQg+ZNL6irQmZ/+yEu0/rVnbs5DUWjTPXJvQiACWxz7pxAwiVOO\niIYGTysb5Kn+F3W8WVAxV+iwSwYWJdHGb7ZGLTNI50xg6I1bD2F7S5yVBEmH\nkwMv+cfzlYXglJVVeCXhSZDYXMLgmSicdGJFZx/l2WNkTlPoEC4ymScp+H9N\nDjNoZ4Y9fm10jMbrSq8gSYmhx8+r+ltHaTfxI9XE5/PbxeAMg9RKI0g4PgId\nZC3zM/LZNfU21BdMN5yKZi2gmiXnDUhvq/eGMvmCDxwXo2RsTTz9lmhve3EJ\nMr1iKIeO+4Hm40mL4Z/9zQ9TDfxYhIhVP7iVbWbSwpmsdbrcb7Vl1/k+iR3w\nd5eBEaUMhF7koPqT/n3rS6A9PY4OIA7Y1EZi5hbd7fpUF/4mtOqEoXSWm0sh\n8DTLL3KBTXev7jt9hxEKX+5sziwfOGWBGmqa/7z0aCErKScLFQbrKvPz06F3\nVR0XqIMccyKr3NxLLsmbAMOLHcvo+tgWT5IHmTeDCcJJjiOADPkIF3ECwKhi\nCDUt\r\n=MPSl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCsD1Uy5Gt8kfmKUqPjRJxtsgP1bEo0BZFsO00A6dVUwIhANVQAibNGSHxs4E++rk8Eplgrvgu76FA4tTjGPcg6J2i"}]},"maintainers":[{"name":"benjamin-gambling","email":"benjamin.gambling@gmail.com"}],"_npmUser":{"name":"benjamin-gambling","email":"benjamin.gambling@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/image-carousel_1.0.1_1595012351424_0.9308934446671313"},"_hasShrinkwrap":false}},"time":{"created":"2020-07-17T18:50:10.101Z","1.0.0":"2020-07-17T18:50:10.387Z","modified":"2022-04-04T18:22:44.805Z","1.0.1":"2020-07-17T18:59:12.048Z"},"maintainers":[{"name":"benjamin-gambling","email":"benjamin.gambling@gmail.com"}],"description":"A simple image carousel built with JS where you can add as many images as you like ","homepage":"https://github.com/benjamin-gambling/image-carousel#readme","keywords":["image-carousel","slide show","pictures","image","images","carousel"],"repository":{"type":"git","url":"git+https://github.com/benjamin-gambling/image-carousel.git"},"author":{"name":"Benjamin Gambling"},"bugs":{"url":"https://github.com/benjamin-gambling/image-carousel/issues"},"license":"MIT","readme":"# Image Carousel\n\n# ![Image Carousel](readme_img/screenshot.png)\n\n## Table of contents\n\n1. [Demo](#demo)\n2. [Technologies](#technologies)\n3. [Features](#features)\n4. [Development](#development)\n5. [License](#license)\n6. [Installation](#installation)\n\n## Demo\n\nHere is the working live demo:\n[https://benjamin-gambling.github.io/image-carousel/](https://benjamin-gambling.github.io/image-carousel/).\n\n## Technologies\n\n- Javascript Modules, ES6\n- [Webpack](https://webpack.js.org/)\n- [NPM](https://www.npmjs.com/)\n\n  <img width=\"64\" height=\"64\" src=\"readme_img/webpack.png\">\n  <img width=\"164\" height=\"64\" src=\"readme_img/npm.png\">\n\n## Features\n\n- Add as many pictures as you want through the html file\n- Next & Previous Controls\n- Idicators made through CSS to see position and also to navigate further along or back\n- Slide Show that fades pictures in every 5s\n\n### Devlopment\n\n- Random picture selection\n\n## License\n\n> You can check out the full license [here](LICENSE)\n\nThis project is licensed under the terms of the **MIT** license.\n\n## Installation\n\n1. In you project directory copy and paste:-\n   `npm i @benjamin-gambling/image-carousel --save`\n\n2. Then in you Javascript file use: -\n   `import imageCarousel from \"@benjamin-gambling/image-carousel\";`\n\n3. Edit Html to add/remove slides (Idicators create themsleves so that doesnt need to be touched)\n\nHTML: -\n\n```\n<div class=\"carousel\">\n      <div class=\"carousel-item fade show\">\n        <img class=\"carousel-img\" src=\"images/slide1.jpg\" alt=\"Slide 1\" />\n      </div>\n\n      <!--Second slide-->\n      <div class=\"carousel-item fade\">\n        <img class=\"carousel-img\" src=\"images/slide2.jpg\" alt=\"Slide 2\" />\n      </div>\n\n      <!--Third slide-->\n      <div class=\"carousel-item fade\">\n        <img class=\"carousel-img\" src=\"images/slide3.jpg\" alt=\"Slide 3\" />\n      </div>\n\n      <!--rinse and repeat for more images-->\n      <div class=\"carousel-item fade\">\n        <img class=\"carousel-img\" src=\"images/slide4.jpg\" alt=\"Slide 4\" />\n      </div>\n\n      <div class=\"carousel-item fade\">\n        <img class=\"carousel-img\" src=\"images/slide5.jpg\" alt=\"Slide 5\" />\n      </div>\n\n      <div class=\"carousel-item fade\">\n        <img class=\"carousel-img\" src=\"images/slide6.jpg\" alt=\"Slide 6\" />\n      </div>\n    </div>\n\n    <a\n      class=\"carousel-control-prev\"\n      href=\"#indicator\"\n      role=\"button\"\n      data-slide=\"prev\"\n    >\n      <i class=\"fa fa-chevron-left\"></i>\n    </a>\n    <a\n      class=\"carousel-control-next\"\n      href=\"#indicator\"\n      role=\"button\"\n      data-slide=\"next\"\n    >\n      <i class=\"fa fa-chevron-right\"></i>\n    </a>\n\n    <!--Controls-->\n\n    <!--INDICATORS: Leave as they are JS will append these depending on how many images-->\n    <div class=\"carousel-indicators\"></div>\n\n  CSS: -\n    * {\n      box-sizing: border-box;\n    }\n\n    html,\n    body {\n      overflow-x: hidden;\n      overflow-y: auto;\n      display: flex;\n      justify-content: center;\n      background-color: rgba(0, 0, 0, 0.7);\n    }\n\n    body {\n      background-color: transparent;\n    }\n\n    .carousel {\n      display: flex;\n      margin-top: 100px;\n      width: 1300px;\n      height: 705px;\n      justify-content: center;\n    }\n\n    .carousel-item {\n      display: none;\n      opacity: 0.85;\n      width: 100%;\n      height: 100%;\n    }\n\n    .carousel-img {\n      min-width: 100%;\n      min-height: 100%;\n      width: 1300px;\n    }\n\n    .show {\n      display: block;\n    }\n\n    .carousel-control-next,\n    .carousel-control-prev {\n      cursor: pointer;\n      position: absolute;\n      top: 50%;\n      width: auto;\n      margin-top: -50px;\n      padding: 15px;\n      color: rgba(255, 255, 255, 0.75) !important;\n      font-size: 35px;\n      transition: 0.6s ease;\n    }\n\n    .carousel-control-next {\n      right: 0;\n    }\n\n    .carousel-control-prev {\n      left: 0;\n    }\n\n    .carousel-control-next:hover,\n    .carousel-control-prev:hover {\n      background-color: rgba(0, 0, 0, 0.1);\n      color: rgba(255, 255, 255, 1) !important;\n      font-size: 45px;\n    }\n    .carousel-indicators {\n      position: absolute;\n      top: 90%;\n      width: 100%;\n      text-align: center;\n      margin: 0px auto;\n    }\n\n    .indicator {\n      display: inline-flex;\n      padding: 6px;\n      cursor: pointer;\n      height: 15px;\n      width: 15px;\n      margin: -50px 5px 0px 5px;\n      background-color: rgba(255, 255, 255, 0.25);\n      border-radius: 50%;\n      transition: background-color 0.6s ease;\n    }\n\n    .indicator:hover,\n    .active {\n      background-color: rgba(255, 255, 255, 1);\n    }\n\n    /* Fading animation */\n    .fade {\n      -webkit-animation-name: fade;\n      -webkit-animation-duration: 3s;\n      animation-name: fade;\n      animation-duration: 3s;\n    }\n\n    @-webkit-keyframes fade {\n      from {\n        opacity: 0.1;\n      }\n      to {\n        opacity: 0.85;\n      }\n    }\n\n    @keyframes fade {\n      from {\n        opacity: 0.1;\n      }\n      to {\n        opacity: 0.85;\n      }\n    }\n```\n","readmeFilename":"README.md"}