Image Slider Generator

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

Route	Method	Body	Body Type	Description
https://imageslidergenerator.shahmirfaisal.com/api/slider	POST	Data	Object	For creating a single slider.
https://imageslidergenerator.shahmirfaisal.com/api/sliders	POST	[Data]	Array	For creating multiple sliders.

Data

Name	Type	Default	Description
images	Array	[]	Array of images. Use string.
options	Object		Customize the slider.

Options

Name	Type	Possible Values	Default
animationType	String	simpleslidefade	simple
autoPlay	Boolean	truefalse	false
arrowsType	String	arrow-circlearrowarrow-ios	arrow-circle
arrowsBackground	String	visiblehidden	visible
arrowsBackgroundVisibility	Number	0 - 1000	212
arrowsSize	Number	0 - 100	50
arrowsOffset	Number	0 - 10	1
arrowsColor	String	Any Color	#fff
radioButtonType	String	squarecirclenone	square
radioButtonSize	Number	5-100	20
radioButtonGap	Number	5 - 100	10

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.shahmirfaisal.com/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.shahmirfaisal.com/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.