WordPress Carousel Pro

  1. Home
  2. Docs
  3. WordPress Carousel Pro
  4. Shortcode Generator Settings
  5. Style Settings (Image Carousel)

Style Settings (Image Carousel)

Style Settings (Image Carousel)
Style Settings (Image Carousel)

(1) Space Between: Set space or gap between the slide items inside the carousel. Default value is 20px.  You can set the value as you wish.

(2) Content Position: Content position is where you want to display your carousel item contents. Select a position for the content title, description, meta, etc. Options are below:

      A. Top: Content will display Above the image.

      B. Bottom: Content will display Below the image.

      C. Right: Content will display at the Right of the image.

      D. Left: Content will display at the Left of the image.

      E. Overlay: Content will display when users hover over an image

A. Top Content Below Image:

Top Content Below Image
Top Content Below Image

B. Bottom Content Top Image:

Bottom Content Top Image
Bottom Content Top Image

C. Right Content Left Image:

Right Content Left Image
Right Content Left Image

D. Left Content Right Image:

Left Content Right Image
Left Content Right Image

E. Overlay Content:

Overlay Content
Overlay Content

Overlay Options

Overlay Content Options
Overlay Content Options

(2.1) Content Position: When a user selects Content Position Overlay, some new options appear. They are as follows:

(2.2) Overlay Content Type: This option allows you to set how you want to show your carousel content on an overlay. Available options are below:

  • Fully Covered: If you choose to the Fully Covered option,  it displays on the screen above: E.Overlay Content image.
  • Caption Style: If you choose this option, it displays like below screen.
Caption Style
Caption Style

(2.3) Overlay Content Visibility: You can set Overlay Content visibility in two ways. They are as follows:

  • Always: Check Above E.Overlay Content image to see how it looks.
  • On Hover: Check below to see how it display on the screen:
On Hover
On Hover

(2.4) Overlay Background Color: Set a background color for overlay as you wish.

(3) Slider Border: Set border around the carousel Item. The default value is 1.There are 9 different border styles. You can also set your desired border color.
Border Styles are:

  • Solid
  • Dashed
  • Dotted
  • Double
  • Inset
  • Outset
  • Groove
  • Ridge
  • None

(4) Inner Padding: Inner Padding is the space that’s inside the carousel item between the item and the border. The default value is 0.

(5) Slide Background: Set a background color for the slider item with this option.

(6) Caption: You can Show/Hide image Caption by this option. By default, the value is Show.

(7) Description: This is the option you can Show/Hide the image Description as you wish. By default description is Hide.

(8) Image Size: Image Size is the term given to describe the height and width of an image in pixels. It will determine how big or small the image is on a page of your site. This option will automatically include all the image size your site has. For instance, we are using the twenty-twelve theme that’s why you can see in the options. You can set custom image size also. The default value is the original uploaded image.

There will remain different cropping image sizes available in the option to choose, like below

  • Thumbnail – hard: 150 X 150
  • Medium – soft: 300 X 300
  • Medium_large – soft: 768 X 0
  • Large – soft: 1020 X 1024
  • Twentyseventeen-featured-image – hard: 2000 X 1200
  • Twentyseventeen-thumbnail-avatar – hard: 100 X 100
  • Original uploaded image
  • Set custom size

(9) Custom Size: This feature allows you to set a custom height and width for your image as you like. You can also select Soft-crop and Hard-crop.

  • Soft-crop: The Soft Crop in WordPress is the same as what’s commonly known as a Fit crop and is what we’d normally think of as a pure resize. It’s proportional, so the entire area of the image is retained. The entire image will be fit in a box of the dimensions you specify without cutting any of the images. So if the shape of the image is not exactly the same as the shape of the box, you’ll end up with blank space.
  • Hard-crop: The hard crop will fill a box of whatever dimensions you specify and cut out any other parts of the image that don’t fit in that box. If you want to create square thumbnails from rectangular images, make the width and height the same. You can set different types of square and rectangular hard crops. It has the property of making sure all the thumbnails are the same shape, which I prefer for its tidiness.

(10) Image Height CSS: The Image Height is one part of the information that determines a picture, photo or other image’s dimensions. You can set Image height for different screen sizes to make your site responsive.

(11) Border Radius: Set a Border-Radius for the carousel image. Border fits well in a square size image.

(12) Variable Width: Variable Width specifies the column width for the display of images in the carousel. It does not affect the resolution of the image. If this option is ON the number of the column will set depends on the column width. The Variable Width Carousel example is given below.

Variable Width Image Carousel
Variable Width Image Carousel

(13) Lightbox: Lightbox is a popup overlaying window that shows the original size of an image with the caption below or a video when clicked on it. When an image is shown in the overlaying window, the user will still be able to use keyboard functions like up / down arrows and tab to navigate on the page without closing the popup. The outside area on the page is dimmed out and clicking outside lightbox will exit the popup. Options are ON and OFF.

(14) Lazy Load: Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll down, images placed at the bottom of the page won’t even be loaded.

(15) Zoom: This option allows you to move your mouse over a small picture and instantly magnify it, without clicking or opening anything. Available options are as follows:

  • Off
  • Zoom In
  • Zoom Out

(16) Grayscale: Grayscale is a range of monochromatic shades from black to white. Therefore, a grayscale image contains only shades of gray and no color. There are 4 options available:

  • Off: No grayscale effect.
  • Gray and normal on hover: The image becomes gray but when you hover the image color becomes normal as it.
  • Gray on hover: When you hover an image the image will turn into gray.
  • Always gray: The images will be gray all the time.

(17) Image Title Attribute: It is used to provide a title for your image. The text you enter inside the title tag will not be shown to the user when an image cannot be displayed. Instead, it is displayed in a popup when a user takes their mouse over to an image. Check the below screenshot and learn how to add an Image Title Attribute and how it looks.

Add Text in the Title section to set an Image Title Attribute.

Image Title Attribute
Image Title Attribute

This is how it displayed.