Carousel needs to push a href prop

[EricCoteReact]

• component: carousel
• reactstrap version 8.0.1
• import method es
• react version 16.9.0
• bootstrap version 4.3.1

What is happening?

The next and previous control are working correctly, but are NOT showing the "pointer" cursor when you mouse hover

What should be happening?

It should show a "pointer" cursor when you hover over the next and previous controls.

Steps to reproduce issue

1. Go to the reactstrap documentation and hover over the previous and next buttons. Notice how it doesn't show a pointer cursor.
   https://reactstrap.github.io/components/carousel/

2. Go to the React Bootstrap documentation and hover over the previous and next button. It does have a pointer cursor. It achieves this simply by adding a href="#" attribute in the generated code.
   https://react-bootstrap.github.io/components/carousel/

3. Go to the Bootstrap documentation. They achieve the same pointer cursor by simply adding a href="#" in the html code.
   https://getbootstrap.com/docs/4.3/components/carousel/#with-controls

[mahamshahid18]

Hey. I can take this

[TheSharpieOne]

https://webaim.org/techniques/hypertext/

One of the most serious barriers is to create links that go nowhere. Developers sometimes use JavaScript to create dynamic menus that drop down when the user hovers over certain links with the mouse. In some cases, the link itself goes nowhere at all, and its only purpose is to expose the links in the drop-down menu, which do have real destinations. Links like this often have a pound sign as the link destination, which means that the link destination is the same page; clicking on the link accomplishes nothing. Both keyboard users and mouse users will experience nothing at all when attempting to activate the link.

things like href="#" are bad. react-bootstrap and bootstrap itself most likely only use it for their examples, but do not expect developers to use them in the real world.

Because of this, I would not hard-code herf="#" into reactstrap, but instead allow the developer to specify it in their code and pass it to reactstrap.

[mahamshahid18]

The pointer effect can simply be achieved with CSS/styling. Addition of hypertext in this case is not even needed as the carousel itself works fine by navigating to the next and previous images. I'm adding the code for this

[mahamshahid18]

@TheSharpieOne pushed a PR for this. Please take a look 🙂