Warning: Trying to access array offset on value of type bool in /home/co/public_html/mn/wp-content/themes/barrel/archive.php on line 68

Slider And Carousel

Biz15.co | Learning Center > Slider And Carousel
Bio Link page, Learn, Sections, Slider And Carousel
November 17, 20230

Image with clickable slide

How To Add Circular Slide
Where To Set Image
Where To Set Title And Description
Where To Set Button Link And Text
How To Uploading & Retrieve Image URLs?
Live Demo

To integrate this Circular Slide 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

 <script src="https://biz15.com/trialone/custom/js/circleslider.js"></script>
<script>
new CircleSlider("your-unique" , {
    // TITLE
    title : "We Create Solutions for Your Business",
    // DESCRIPTION
    para : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, aut?",
    // BUTTON TITLE
    buttonName : "Get Started",
    // BUTTON LINK
    buttonLink : "#",
    // SLIDE IMAGES
    imgages : [
        "https://biz15.co/uploads/block_images/e7591fbc7a5bf73f886b99eb2ba647d3.png",
        "https://biz15.co/uploads/block_images/94d236db7f7d419228d8075dee548593.png",
        "https://biz15.co/uploads/block_images/86a67146ccd664430b6e2cc1bdcca862.png",
        "https://biz15.co/uploads/block_images/86a67146ccd664430b6e2cc1bdcca862.png",
        "https://biz15.co/uploads/block_images/86a67146ccd664430b6e2cc1bdcca862.png",
    ]
})
</script>

The result following the completion of the steps.

Live Demo

Where To Set Image

Below code for Where To Set Image:

{ 
imgages : [
"yourimage.png",
]
}

Where To Set Title And Description

Below code for Where To Set Title And Description :

 { 
// TITLE
title : "Your Title",
// DESCRIPTION
para : "Your Description",
 }

Where To Set Button Link And Text

Below code for Where To Set Button Link And Text :

 { 
// BUTTON TITLE
buttonName : "Get Started",
// BUTTON LINK
buttonLink : "#",
 }

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 : on Your Dashboard Select “File Link” panel and click “File link” button on your Top Right corner

Step Two: Select your desired image and and its name then proceed by clicking the “Create File Url” button.

Step Three: Now, you can see bellow figure that highlighted the image url and just “Copy Your Image Address.”

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

Try Your Self

Other Style Sections :

Bio Link page, Learn, Sections, Slider And Carousel
November 13, 20230

Create Infinite Carousel on Biopage

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 :