Infiniscroll

Demo: https://demo.wocode.com/infiniscroll

Tutorial Video

Setup

WIDGET PLACEMENT

• Place the Infiniscroll widget on your page.
• Position the widget where you would like the slideshow to be seen.
• You may resize the widget width by using the blue grab handle on the bottom right corner. Note that the widget height, as well as other sizing options are available in the widget panel (these are discussed below).
• For a full width slider, set the row the widget is placed in to “Full bleed row” in the Row options.

WIDGET OPTIONS (CONTENT)

• Unique ID: If you’re using more than one instance of the widget on your page, be sure to set unique ID’s for each widget.
• Scroll Type: Select between Multi-Image and Panoramic. There are some key differences between the scroll types:
  • Multi-Image: This mode scrolls multiple images continuously. Images beyond 1920px in width will be downsized to 1920px. It is advised to resize larger images prior to uploading.
  • Panoramic: This mode scrolls one image only. When the end of the image is reached in the scroll, the beginning will begin again. This mode allows for use of an external image that is hosted elsewhere. External images can be larger than 1920px, which is the largest image width the widget allows for uploads.
• Enable Image Links: This toggle enables links for images. Links are set in the individual list item settings.
• Images: Use these list items to load new images and to enable links.
• Height: Use this parameter to set the slideshow height.
• Enable Fixed Width and Height: This toggle should be used when you seek a uniform display of the images in your slideshow. By default, the widget fills the space needed automatically, to account for the width of the slider and browser. Fixed width and height allows the entire image to be seen, using the fixed width and height values entered. Note that every image should be prepared to maintain the exact same width and height prior to uploading.
• Scroll Direction: Choose from left or right scroll directions.
• Scroll Speed: Sets the speed of the scroll. Note that smaller numbers equal faster speeds.
• Caption Setup: Captions may be used with the widget. This section contains the caption content items: Caption Title and Description. Note that captions are stationary, and do not scroll with the images. This means that a single caption title and description are placed on a stationary overlay over the scrolling images:
  

IMAGE SETUP: MULTI-IMAGE

There are some key considerations when setting up the images for your Infiniscroll slider. When setting up a multi-image slider, you should first decide whether you need the images to “stitch” together with the appearance of one continuous panoramic image. Our demo is an example of this technique.

If you do not require the images to be stitched uniformly, you may use any image size or resolution you like. The widget will automatically fill the width as needed.

However, if you require your images to align perfectly, follow these tips:

• Do not exceed an image width of 1920px. The Without Code website builder resizes large uploaded images to a maximum width of 1920px.  Resized images may not retain uniform height after they are resized to 1920px width.
• Prepare all images prior to upload. The best way to ensure that images are uniform is to prepare them prior to upload. Use a photo editor to create several images using identical pixel dimensions. If the prepared images do not exceed 1920px in width, the site builder will not resize them. This is ideal. For example: three images with the dimensions of 1920 x 1000.
• Using Fixed Width and Height. If you find that your images are not stitching together properly, or your images are being cropped too much, consider using fixed width and height. When Fixed Width and Height is toggled on, the widget passes the values entered, allowing the images to be seen in their original aspect ratio.To use this mode, begin by setting the height you would like your slider to be. In this example, we will say that we would like the slider to be 600px high. Unless the images to be used are already 600px in height, they will need to be adjusted. If your images are 1800×1200, you will need to reduce the image size to 900×600.As another example, if you seek a slider width of 1200px, set the slider width to 1200. If using the same images as the above example, we can now increase the image size from a width of 900 to 1200. Since we need to maintain the original aspect ratio, we will increase the image height to 800. So in this example, we would resize our images to 1200×800 prior to upload.

IMAGE SETUP: PANORAMIC

The Panoramic scroll type displays a single image in the slider. Here are some tips for using a single panoramic image:

• A panoramic image should be very large in order to not appear blurry or pixelated. We suggest shooting for 5000px or so in width.
• As noted earlier, the website builder automatically resizes large images to 1920px. This means that if you are using a 6000px width image, the builder will resize the image to 1920px width. A width of 1920px will generally not have the resolution to appear sharp in a panoramic scroll type. This is the reason we offer the Use External URL for Panoramic Image option. To use this option, toggle it on, then enter a URL in the External Panoramic Image URL field.Pay close attention to the hosting location of an external image, to ensure that they do not reduce the image size, or downsample it. Some photo hosting sites do this automatically. Services such as Dropbox do not downsize images and may be ideal for external hosting.
• When Panoramic is selected as a Scroll Type, you will notice that new options are available. In addition to the two options discussed above, you will notice a Panoramic Image Link. The panoramic image link must be entered here, if using.

WIDGET OPTIONS (DESIGN)

The Design section of the widget options contains several styling options, which are labeled with their function. Since the option label describes its purpose, options will not be discussed further here.