DP Owl Image Carousel
The DP Owl Image Carousel module can be used to manually load images or any content added using the text editor into a horizontal carousel. The following options are available in the DP Owl Image Carousel module:
ADD NEW IMAGE – The Add New Image box at the top of the Content tab allows you to add new carousel items to the carousel. Each carousel item has its own Content and Design tab to control the options for that item.
Elements
ARROWS – Turn the left and right arrows that rotate the carousel items on or off. Arrows will only display if the number of available posts exceeds the number of thumbnails set to display per slide. For example, if you have the Thumbnails to Display option in the Design tab set to display five posts (default value) but only have five posts or less total, the arrows will not display.
ITEMS PER SLIDE ACTION – This controls how many carousel items will be rotated left or right when the left or right arrows are clicked. It will also control how many carousel items will be rotated left or right when the Automatic Rotate option is turned on in the Design tab.
CONTROLS – Turn the dot navigation controls on or off. The dot navigation will be displayed at the bottom of the carousel and is used to rotate faster through the carousel than using the arrows.
ITEM PER CONTROL ACTION – This controls how many carousel items will be rotated left or right when the control dots are clicked.
USE NAVIGATION THUMBNAIL IMAGES – Turning this option on will replace the dot navigation controls with thumbnail images of the featured images.
CAROUSEL BEHAVIOR – Choose Loop if you want your carousel to continuously loop through the posts. Choose Rewind if you want the carousel to change direction when it reaches the last post.
CAROUSEL DIRECTION – Choose which direction you want the carousel to advance.
CENTER – Turn this option on if you want the first carousel item to be centered in the carousel. This option must be on if you want to center the clicked image in the carousel when using Navigation Thumbnails.
AUTO WIDTH IMAGES -Turn this option on if you want to display images in the size set in the Thumbnail Size option in the Design tab. Leave this option off if you want images to display evenly and adhere to Thumbnails Per Slide option in the Design tab.
The Design tab contains font control options for for title, custom fields, etc. We have also added the following options to the Design tab:
Arrow
ARROWS COLOR – Controls the color of the left and right arrows.
ARROWS SIZE – Controls the size of the left and right arrows. Choose between small, medium and large. There is also a custom CSS box in the Advanced tab for each arrow for more control of the appearance.
Controls
CONTROL COLOR – Controls the color of the dot navigation controls.
CONTROL SIZE – Controls the size of the dot navigation controls. Choose between small, medium and large. There is also a custom CSS box in the Advanced tab for controls and active control for more control of the appearance.
Thumbnails
ORIGINAL SIZE – Turning this option on will load the original image instead of looking for the image thumbnail size set in the option below. If images are small and do not have a thumbnail in the size selected, this option will load the full size of the image. If your images are not displaying in the carousel, turn this option on.
THUMBNAIL SIZE – This is the size of the featured image that will get loaded into the carousel. Please note that the image size that gets displayed will depend on the number of images set to display in the option below and the Items Margin value set. Images will fill the carousel container. To prevent this, turn on the Auto Width Images option in the Content tab.
THUMBNAILS TO DISPLAY – This value determines how many carousel items will be initially displayed on the screen.
ITEM MARGIN – This value determines the amount of space between each carousel item.
Thumbnails Navigation
NAVIGATION THUMBNAIL ALIGNMENT – Determines whether the navigation thumbnail images at the bottom of the carousel should be aligned left, center or right. The Use Navigation Thumbnail Images option in the Content tab must be turned on to show navigation thumbnails in place of the control dots.
NAVIGATION THUMBNAIL SIZE – This determines the size of the navigation thumbnail images. You can further adjust the image size using CSS in the Navigation Thumbnail Image box in the Advanced tab.
The Advanced tab contains CSS boxes for additional control over the carousel and carousel items and the following options:
Animation
AUTOMATIC ROTATE – Turn this option off if you don’t want the carousel to automatically rotate through the carousel.
AUTOMATIC ROTATE SPEED – (Automatic Rotate option must be turned on for this option to display) Determines how fast the carousel will automatically rotate the carousel. Value is in milliseconds.
PAUSE ON HOVER – Turn this option off if you don’t want the carousel to pause when the user’s mouse hovers over the carousel