API Documentation

We recommend using the REST API when you want a dynamic slider.

Use Case

If you have a huge website like an e-commerce store with dozens of product pages and you want a slider for each of those pages with different product images then we recommend using the REST API.

How it Works?

You can send all the images you want in the slider along with some optional settings to the REST API and you will get a URL that you can use as a src attribute in iframe tag to show the slider.

Endpoint

RouteMethodBodyBody TypeDescription
https://imageslidergenerator.shahmir.me/api/sliderPOSTDataObjectFor creating a single slider.
https://imageslidergenerator.shahmir.me/api/slidersPOST[Data]ArrayFor creating multiple sliders.

Data

NameTypeDefaultDescription
imagesArray[]Array of images. Use string.
optionsObjectCustomize the slider.

Options

NameTypePossible ValuesDefault
animationTypeStringsimpleslidefadesimple
autoPlayBooleantruefalsefalse
arrowsTypeStringarrow-circlearrowarrow-iosarrow-circle
arrowsBackgroundStringvisiblehiddenvisible
arrowsBackgroundVisibilityNumber0 - 1000212
arrowsSizeNumber0 - 10050
arrowsOffsetNumber0 - 101
arrowsColorStringAny Color#fff
radioButtonTypeStringsquarecirclenonesquare
radioButtonSizeNumber5-10020
radioButtonGapNumber5 - 10010

Response

It gives you a URL that you can use in the iframe tag. See the below example.

Example

Create a single slider

Here's a complete example of using the REST API with React.

import { useState, useEffect } from "react";

const images = [
  "https://images.pexels.com/photos/4245826/pexels-photo-4245826.jpeg?auto=compress&cs=tinysrgb&w=600",
  "https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg?auto=compress&cs=tinysrgb&w=600",
];

const Test = () => {
  const [loading, setLoading] = useState(false);
  const [src, setSrc] = useState(null);

  useEffect(() => {
    (async () => {
      setLoading(true);
      const res = await fetch(
        "https://imageslidergenerator.shahmir.me/api/slider",
        {
          method: "POST",
          body: JSON.stringify({
            images,
            options: {
              // customize the slider
              arrowsColor: "#fff",
              radioButtonSize: 50,
            },
          }),
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      const data = await res.json();
      setSrc(data);
      setLoading(false);
    })();
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <>
      <iframe src={src} style={{ border: "none", width: "300px", height: "300px }}></iframe>
    </>
  );
};

export default Test;

Create multiple sliders

Here's a complete example of using the REST API with React.

import { useState, useEffect } from "react";

const images = [
  "https://images.pexels.com/photos/4245826/pexels-photo-4245826.jpeg?auto=compress&cs=tinysrgb&w=600",
  "https://images.pexels.com/photos/844297/pexels-photo-844297.jpeg?auto=compress&cs=tinysrgb&w=600",
];

const TestPage = () => {
  const [loading, setLoading] = useState(false);
  const [srcLinks, setSrcLinks] = useState([]);

  useEffect(() => {
    (async () => {
      setLoading(true);
      const res = await fetch(
        "https://imageslidergenerator.shahmir.me/api/sliders",
        {
          method: "POST",
          body: JSON.stringify([
            {
              images,
              options: {
                // customize the slider
              },
            },
            {
              images,
              options: {
                // customize the slider
                animationType: "fade",
              },
            },
          ]),
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      const data = await res.json();
      setSrcLinks(data);
      setLoading(false);
    })();
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <>
      {srcLinks.map((src) => (
        <iframe
          src={src}
          style={{ border: "none", width: "300px", height: "300px" }}
        ></iframe>
      ))}
    </>
  );
};

export default TestPage;

Contributing

Feel free to contribute.

To get started, please take a look at the 'Issues' tab, where you will find open issues that exist with the project. If you see one that interests you, simply create a branch and submit a PR for review and approval. If you want to add a new feature, feel free to do so as well.

License

Image Slider Generator is made available under the MIT License.