How to Install Infinite marquee?
How to set size and gap
How to set Speed
How to add images
How to Uploading & Retrieve Image URLs?
Live Demo

To integrate this Infinite Marqee Plugin into your biography page, please follow these installation instructions.

Step One: Insert a Custom HTML Block.

Step two: Just Paste below JS code into your Custom HTML block

<!-- JS CODE -->
      <!-- Include the script for the infinity carousel -->
      <script src="https://biz15.com/trialone/custom/js/infinity-carousel.js"></script>

      <!-- Create an instance of the Infinity Carousel with specified options -->
      <script>
          // Instantiate the Infinity Carousel with your ID and configuration
          new CreateInfinityCarousel("your-id", {
              // Size of each image in the carousel
              imageSize: "200px",
              // Gap between images
              imageGap: "50px",
              // Speed of the carousel animation
              speed: "10s",
              // Array of image URLs for the carousel
              image: [
"https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
                  "https://cdn-icons-png.flaticon.com/128/5486/5486264.png",
              ],
          });
      </script>

The result following the completion of the steps.

Live Demo

Set Size and Gap in infinite Carousel

Create A Stunning Web Pages

  // Size of each image in the carousel
  imageSize: "200px",
  // Gap between images
  imageGap: "50px",

Set speed in infinite carousel

The following code shows how to set speed in infinite marquee

  // Speed of the carousel animation
  speed: "10s",

Add images in infinite carousel

The following code shows how to ad images in infinite marquee

    // Array of image URLs for the carousel
    image: [
        "yourimage.png",
        "yourimage.png",
        "yourimage.png",
        "yourimage.png",
        "yourimage.png",
        // Add more images separated by commas
    ],

To upload an image and retrieve its source (URL), please follow these steps :

Select or Prepare Your Image: Begin by choosing the image you wish to upload, ensuring it’s in an appropriate format (e.g., JPG, PNG).

Step One : Insert an image block into your biography page.

Step Two: Select your desired image and proceed by clicking the “Submit” button.

Step Three: Now, open your image block, right-click on the image, and select “Copy Image Address.”

Step Four: Ensure that your image is not visible in the live view by disabling your status.

Here is an example of how you can use the image source (URL) in an HTML “img” tag:

    <img src="https://biz15.co/yourImage.jpg" alt="Description of the Image">

Replace ‘https://biz15.co/yourImage.jpg’ with the actual URL you received during the image upload process.

“Follow the previously mentioned steps to upload and obtain the image URL for all of your images.”

Try Your Self

Other Style Sections :