{"action":"created","issue":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/3245","repository_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap","labels_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/3245/labels{/name}","comments_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/3245/comments","events_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/3245/events","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/3245","id":353648133,"node_id":"MDU6SXNzdWUzNTM2NDgxMzM=","number":3245,"title":"controlling carousel `next` and `previous` with custom buttons.","user":{"login":"robophil","id":6032018,"node_id":"MDQ6VXNlcjYwMzIwMTg=","avatar_url":"https://avatars0.githubusercontent.com/u/6032018?v=4","gravatar_id":"","url":"https://api.github.com/users/robophil","html_url":"https://github.com/robophil","followers_url":"https://api.github.com/users/robophil/followers","following_url":"https://api.github.com/users/robophil/following{/other_user}","gists_url":"https://api.github.com/users/robophil/gists{/gist_id}","starred_url":"https://api.github.com/users/robophil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robophil/subscriptions","organizations_url":"https://api.github.com/users/robophil/orgs","repos_url":"https://api.github.com/users/robophil/repos","events_url":"https://api.github.com/users/robophil/events{/privacy}","received_events_url":"https://api.github.com/users/robophil/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-08-24T05:20:31Z","updated_at":"2018-08-24T06:27:36Z","closed_at":"2018-08-24T06:27:36Z","author_association":"NONE","body":"Hi 👋 ,\r\n\r\nI have a `react-bootstrap carousel` that I've styled differently with indicators and controls set to `false`. I have the next and previous button designed differently and they currently sit at the bottom of the carousel but I have no idea on how to trigger `next` and `previous` onClick from this location.\r\n\r\nThis is easily achieved in bootstrap(jQuery) by\r\n```javascript\r\n$('.carousel-control.left').click(function() {\r\n  $('#myCarousel').carousel('prev');\r\n});\r\n\r\n$('.carousel-control.right').click(function() {\r\n  $('#myCarousel').carousel('next');\r\n});\r\n```\r\n\r\nThoughts on how this can be achieved in react-bootstrap?"},"comment":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/comments/415664239","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/3245#issuecomment-415664239","issue_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/3245","id":415664239,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNTY2NDIzOQ==","user":{"login":"robophil","id":6032018,"node_id":"MDQ6VXNlcjYwMzIwMTg=","avatar_url":"https://avatars0.githubusercontent.com/u/6032018?v=4","gravatar_id":"","url":"https://api.github.com/users/robophil","html_url":"https://github.com/robophil","followers_url":"https://api.github.com/users/robophil/followers","following_url":"https://api.github.com/users/robophil/following{/other_user}","gists_url":"https://api.github.com/users/robophil/gists{/gist_id}","starred_url":"https://api.github.com/users/robophil/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/robophil/subscriptions","organizations_url":"https://api.github.com/users/robophil/orgs","repos_url":"https://api.github.com/users/robophil/repos","events_url":"https://api.github.com/users/robophil/events{/privacy}","received_events_url":"https://api.github.com/users/robophil/received_events","type":"User","site_admin":false},"created_at":"2018-08-24T06:27:36Z","updated_at":"2018-08-24T06:27:36Z","author_association":"NONE","body":"Hi, I was able to achieve this with [controlled carousel](https://react-bootstrap.github.io/components/carousel/#carousels-controlled)\r\n```javascript\r\nthis.state = {\r\n  index: 0,\r\n  direction: null,\r\n  carouselItemCount: 3\r\n}\r\n\r\n// render\r\n<Carousel id=\"quote-carousel\" indicators={false} controls={false} activeIndex={index} direction={direction}>\r\n..\r\n..\r\n<a class=\"left carousel-control\" onClick={() => this.toggleCarousel('prev')}><i class=\"fa fa-chevron-left\" /></a><a class=\"right carousel-control\" onClick={() => this.toggleCarousel('next')}><i class=\"fa fa-chevron-right\" /></a>\r\n</Carousel>\r\n\r\n// method called to handle toggle (next/prev)\r\ntoggleCarousel = (direction) => {\r\n    let index = this.state.index\r\n    const [min, max] = [0, this.state.carouselItemCount - 1]\r\n\r\n    if (direction === 'next') {\r\n      index++\r\n\r\n    }\r\n    else if (direction === 'prev') {\r\n      index--\r\n    }\r\n\r\n    if (index > max) {\r\n      // at max, start from top\r\n      index = 0\r\n    }\r\n\r\n    if (index < min) {\r\n      // at min, start from max\r\n      index = max\r\n    }\r\n    this.setState({\r\n      direction,\r\n      index\r\n    })\r\n  }\r\n```"}}
{"actor":{"display_login":"robophil"}}