<\/p>\n
Creating a New Carousel Slider<\/h2>\n
First, navigate Image Hover> Image Hover> Extension> Carousel Slider <\/strong>from your dashboard.<\/p>\n <\/p>\n Then, create a new Carousel Style by clicking on the Create Style button like below<\/p>\n <\/p>\n Now, after you create a new Carousel Slider it’s time to go further and add\/style data to your extensions. Let’s start this section:<\/p>\n <\/p>\n \u039eCarousel Query-<\/span> Here in this section, you can define the primary query of your Carousel Slider.<\/p>\n <\/p>\n \u21d2Carousel Style:<\/strong> You can add an image effect on the carousel slider by selecting a Shortcode here. Confirm Your Shortcode name which one you wanna create a carousel here.<\/p>\n Note: If you want to customize the style effects of the carousel, then kindly go to the associated effects page and perform the edits. The style effects of the Carousel Slider will also change after saving & reloading the page.<\/p>\n \u21d2Item to Slide:<\/strong> You can restrict items per slide to display a specific number of slides on a single carousel. It takes a numeric value which signifies the number of items to be displayed at a time.<\/p>\n \u21d2Autoplay:<\/strong> Enable\/disable the Autoplay of the carousel.<\/p>\n \u21d2Autoplay Speed (ms):\u00a0<\/strong>Set the Autoplay speed in the carousel based on ms.<\/p>\n \u21d2Animation Speed (ms): <\/strong>Set the Animation speed in the carousel based on ms.<\/p>\n \u21d2Pause On Hover:\u00a0<\/strong>Want to pause your carousel on hover? Enable\/disable it here.<\/p>\n \u21d2Infinite Loop:<\/strong> Enable\/disable the infinite loop to the carousel.<\/p>\n \u21d2Adaptive Height:<\/strong> Set the adaptive height to the carousel.<\/p>\n \u21d2Center Mode:<\/strong> Enable\/disable the center mode of the carousel slider.<\/p>\n \u21d2Arrows:<\/strong> Enable arrows as the navigation in the carousel slider.<\/p>\n \u21d2Dots: <\/strong>Enable dots as the pagination in the carousel slider.<\/p>\n <\/p>\n <\/p>\n \u039eCarousel Arrows-<\/span> And this section is for customizing the carousel arrows for the carousel slider.<\/p>\n \u21d2Choose Arrow:<\/strong> Add icon to the carousel arrow for both the left and right arrow.<\/p>\n \u21d2Size: <\/strong>Manually customize the size of the arrows for different dimensions.<\/p>\n \u21d2Position X:<\/strong> Set the arrow icon position for the X-axis in different dimensions.<\/p>\n \u21d2Position Y:<\/strong> Set the arrow icon position for the Y-axis in different dimensions.<\/p>\n <\/p>\n \u21d2Color:<\/strong>\u00a0Add a custom color to the carousel arrow in the carousel slider for both normal and hover view.<\/p>\n \u21d2Background Color:<\/strong> Add a custom background color to the navigator arrows for both normal and hover. Know more about Background Color<\/a>.<\/p>\n \u21d2Border Type:<\/strong>\u00a0Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the navigator arrow for different dimensions. You can link the values together or customize them individually.<\/p>\n \u21d2Border Color:<\/strong>\u00a0Add a custom color to the border for both normal and hover view.<\/p>\n \u21d2Box Shadow:\u00a0<\/strong>Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset. Know more about Box-Shadow<\/a>.<\/p>\n \u21d2Border Radius:<\/strong>\u00a0Set the border-radius around the arrow for different dimensions.<\/p>\n \u21d2Padding:<\/strong>\u00a0Set the padding value for the top, right, bottom and left around the arrow for different dimensions. You can link the values together or customize them individually.<\/p>\n \u039eCarousel Dots-<\/span> This section is for customizing the carousel dots for the carousel slider.<\/p>\n \u21d2Size: <\/strong>Manually customize the size of the carousel dots for different dimensions.<\/p>\n \u21d2Width & Height: <\/strong>Manually customize the width & height of the carousel dots for different dimensions.<\/p>\n \u21d2Position Y:<\/strong> Set the carousel dots position for the Y-axis in different dimensions.<\/p>\n \u21d2Spacing:<\/strong> Add a custom space to the carousel dot.<\/p>\n <\/p>\n \u21d2Color:<\/strong> Add a custom color to the carousel dots in the carousel slider for normal, hover, and active view.<\/p>\n \u21d2Background Color:<\/strong> Add a custom background color to the carousel dots for normal, hover and active view. Know more about Background Color<\/a>.<\/p>\n \u21d2Border Type:<\/strong> Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the carousel dot for different dimensions. You can link the values together or customize them individually.<\/p>\n \u21d2Border Color:<\/strong> Add a custom color to the border.<\/p>\n \u21d2Border Radius:<\/strong> Set the border-radius around the dots for different dimensions.<\/p>\n Here you’ll find a box where you can add your custom CSS code. Advanced developers can use this option for their convenience. After entering the codes, developers can see the live preview by reloading the page.<\/p>\n Once you finish coding hit the “Save” button to make your changes.<\/p>\n![\"\"](\"https:\/\/www.oxilabdemos.com\/image-hover\/wp-content\/uploads\/2020\/01\/Screenshot_16.png\")
<\/a><\/p>\n<\/h2>\n
Customizing & Adding Data<\/h2>\n
General Settings<\/h3>\n
<\/a><\/p>\n<\/h2>\n
<\/h2>\n
Custom CSS<\/h3>\n