How To Make your own slider on ReactJS

I also do not know why this picture is here, was the first one that medium showed.

code
If you are not very good as css just like me. I recommend you to use animista, they do not pay me, but I do not pay them as well and this is kind of my way to show my gratitude. xDDD.

and as I do not have pictures I’ll be using placeholder, same as above.

well on your react project create the file of your slider.

import React from "react";
export function Slider (props) {
  const { pics } = props;
  const [current, setCurrent] = React.useState(0);
  return (
   ...
  );
}

Now days with them hooks everybody forgot about classes. ohh but if you have them what closure, scope and/or context are, we just say whatever wikipedia told us to say in the interview… well let’s continue.

The component expects an array of pictures, so let’s define it.
For the pictures we need.

• Path to where the pic at… :3
• Unique id as react b*tchs about errthing.
• and for SEO to be happy an alt text.

So our “Interface” looks like this

export interface Pics {
  id: number;
  path: string;
  alt: string;
}

So if the Component expects an array of pics then its interface might look like this

That been said. here is the array pics the component will get.

const pics = [
{ id: 1, path: "https://via.placeholder.com/600x350.png/20c997", alt: "some alt and stuff1" },
{ id: 2, path: "https://via.placeholder.com/600x350.png/17a2b8", alt: "some alt and stuff2" },
{ id: 3, path: "https://via.placeholder.com/600x350.png/20c997", alt: "some alt and stuff3" },
{ id: 4, path: "https://via.placeholder.com/600x350.png/28a745", alt: "some alt and stuff4" },
{ id: 5, path: "https://via.placeholder.com/600x350.png/08a745", alt: "some alt and stuff5" },
{ id: 6, path: "https://via.placeholder.com/600x350.png/44a745", alt: "some alt and stuff6" },
];
....
// Let’s first get the length of them pics
const {length} = pics;
// Then lets iterate over the array to display them pics
const slides = pics.map((pic, index) => {
  <div key={item.id} className={current !== index ? "mySlides" : "current"}>
  <div className="numbertext">
   {index} / {length}
  </div>
  <img src={item.path} alt={item.alt} />
   <span className="brand">Name Of Your Site</span>
 </div>
});
return (
....
)
....

As it looks like 💩 here the pic

now lets do the even handler aka the two arrows that will change the pic.

here the pic

First we prevent the default… I do not know I learned that on JQuery, it is one of them habits you kept by the time xDDDD. as I’m a lazy ass and do not want to do the useRef and all that crap, I just named the targets “plus” and “minus” 😆 and the rest you know it.

const onPicChanger = evt => {
evt.preventDefault();
const { name } = evt.currentTarget;
const operation = name === "plus" ? 1 : -1;
const toShow = operation + current;
if (toShow >= length) {
setCurrent(0);
} else if (toShow < 0) {
setCurrent(length - 1);
} else {
setCurrent(toShow);
}
};

also if you click on the image from the bottom the current pic will change to that one, so let’s do that.

yes I use typescript and I believe everybody should do the same.

Again I’m lazy and for some I’m also consider fat, well who cares. let’s move on.

The pics from the bottom.

here the code to be copied and pasted.

const thumn = pics.map((pic, index) => (
<div className="column">
<button
type="button"
className={current === index ? "demo active" : "demo"}
onClick={setImage}
name={`${index}`}
>
<img src={pic.path} />
</button>
</div>
));

Now lets create the return.

return (
  <div className="carrousel-container">
    {slides}
    <button
      type="button"
      className="prev"
      onClick={onPicChanger}
      name="minus">
        &#10094;
    </button>
    <button
      type="button"
      className="next"
      onClick={onPicChanger}
      name="plus">
        &#10095;
    </button>
   <div className="carrousel-row">
     {thumn}
   </div>
</div>
);

I mean the BigO notation might be crying with it, but it fulfill the acceptance criteria the smart ones will say.