Plugin Directory


Slider Huge-IT is an awesome WordPress Slider Plugin with many nice features. Just need to install and build slider in a few minutes.

WordPress Slider step by step guide

Step 1. Installation of Slider plugin

  • To install Slider plugin go in Plugins > Add New > search for slider plugin, after you find Huge-IT Slider, click on > Install Now > as soon as slider plugin is installed, press on > Activate and slider is ready to work with.

For the PRO version of slider installation is almost the same

  • Plugins > delete the FREE version of the slider from WordPress > Add New > Upload Plugin> use the zip file of the Huge-IT slider which you get after the purchase, and after installation again activate the slider.

After activation you can see Huge-IT Slider on the left toolbar

Step 2. Adding Slider.

  • To add a Slider, go to Huge IT Slider > Slider >Add New Slider.

2.1 Click on Add Images.

  • Using Standard Media Upload option you should select the images you want to add to your slider. Images in slider can be added multiple at once, Pressing ctrl and selecting several images, add all in the slider with one click.
  • Let's have a look at the individual features of the images.
  • Title. Here you can provide a Title which will lay on the slider image.
  • Description. Provide the details for the slider image. This will be visible above the image, so it is advised to make it as short as possible
  • URL. This is an optional feature. You can provide a link on the slider to take to specific location on your website or another website. The URL should be provided in http:// form. Clicking on the image of the slider you will be straight directed to that URL link.

2.2 Video Slider (pro)

  • The slider in professional version allows to add videos from Youtube and Vimeo sources.
  • Press on “Add Video Slide” and in the Popup paste the link of the video
  • Add a few configurations, such as:
  • Quality. This is the default quality level of the video
  • Volume. The default volume level of the video
  • Show Controls. Select if you want to see the controllers of the video in the slider
  • Show info. This can be the title and other layers on the video which comes from the vimeo or youtube straight on the slider

Step 3. Current Options.

This is the free options of the slider which allow to configure most basic settings, which is important for having a nice slider in your site.

  • Width. Specify the width of the slider in pixels.
  • Height. Specify the height of the slider in pixels.
  • Effects. Select the effect of the slider transition which will be applied.
  • Pause time. Specify the pause time for the WordPress Slider in milliseconds.
  • Change speed. Specify the change speed of the slider effect in milliseconds.
  • Slider Position. Slider can be placed on Left Right or Center within your page
  • Loading Icon. ON - will enable the loading spine on the place of the slider when the site is slow
  • Navigate By. This option allows to turn off any navigation, and make it dots or arrows
  • Pause on Hover. Choose whether to pause when the mouse is above the slider or leave it changing to the next image.
  • Video AutoPlay (PRO) This will allow the video in the slider to autoplay
  • Random. The option slides the image in the slider \in random order

Step 4. Editing General Options.

  • To change the styles and colors of the slider you should go to Huge IT Slider > Slider Options.

4.1 Slider Styles

The general styles of the slider which can make it look as desired>

  • Background Color. Select the background color for the image in the slider, when Image Behaviour is set on ”Natural” this shows some background in the slider. The color will be visible with during the slide change within specific effects.
  • Image Behavior. “Natural” and slider will show images in real proportions, otherwise will stretch them due to the slider size
  • Border size. Set the border around the slider.
  • Border color. Select the slider’s border color.
  • Border radius. Set the border radius of the slider corners.
  • Slider Loading Image. Pick up some loading icon for the slider loading

4.2 Description Styles

The description of the slider lays on the slider in any position, and it has some styles options listed below:

  • Description Color. Set the color for the slider image description.
  • Description background color. Choose the color for the cell containing the slider image description.
  • Description font size. Specify the font size for the slider image description.
  • Description border size. Specify the border for the slider image description.
  • Description border color. Select the border color for the slider image description.
  • Description border radius. Set the border radius for the slider image description cell.
  • Description position. Select the positioning of the description within the slider. Please make sure it does not coincide with the slider title position avoiding overlapping.

4.3 Title Styles

Slider has a title which is accomplished with the number of style option available here:

  • Title Color. Set the color for the title on the slider.
  • Title background color. Choose the color for the cell containing the title.
  • Title font size. Specify the font size for the image title of the slider.
  • Title border size. Set the border for the title.
  • Title border color. Select the border for the title.
  • Title border radius. Set the border radius for the title.
  • Title position. Define the position of the title within the slider, using the view graph.

4.4 Navigation Thumbnails Styles

Navigation thumbnails will help to show the other images of the slider, make them looks nice by configuring several options.

  • Count of Thumbs Slides. The number of the thumbnail images that are shown on the slider
  • Slider Thumb Height. Set the height of the thumbnail image
  • Thumbnails Background Color. In case if the images are different there can be background
  • Passive Thumbnail Overlay Color. The overlay of the image which is not selected
  • Passive Thumbnail Overlay Transparency. The transparency of the non selected thumbnail

4.5 Navigation Dots Styles.

Slider offers several navigation types, such as dots and arrows, which styles can be picked up here:

  • Navigation Dots Position. Set the position for the navigation dots within the slider, it has two positions .
  • Navigation Dots Color. Select the dot color for the navigation.
  • Navigation Active Dot Color. Specify the color for the dot for the currently displayed image.
  • Show navigation Arrows. Select to navigate the images in the slider using arrows
  • Navigation Type. Select the type of the navigation arrows to be used for the website. There are 13 different types for the slider

Step 5. Inserting the Slider.

You should use the automatically generated codes. The shortcodes of the slider are in the Usage section, Slider has 2 types of shortcodes. One for the Slider in post or page, the other one, which is php shortcode is made for a Slider integration into the template area

5.1 Inserting the Slider into the Post or Page.

  • In the Post or Page the shortcode takes the following form: [huge_it_slider id=N] , where N is the number ID of the created WordPress Slider. Copy and Paste the Shortcode into the Visual Editor of the post/page, if you forgot to copy the shortcode, the slider plugin provides a button in the post/page editor, clicking on the button will automatically add the shortcode of your Slider in the page.

5.2 Inserting the Slider into the template.

  • The shortcode can be easily inserted into a template/theme which corresponds to the WordPress standards. To do so go in Appearance > Editor > choose the appropriate file, where you want to have the slider and insert the following shortcode:

  • Where N is the number ID of the created Slider.

  • Make sure the php shortcode of the slider is not inserted in another php code of the theme, in order the slider could function properly.

5.3 Use the Slider into the widget.

  • Slider can be easily inserted into the widget area of your template and be see in the sidebar. By going into Appearance > Widgets find the Huge-IT Slider block, then drag and drop it into the right place, Save the results and watch the slider in your sidebar.

Step 6. Some useful notes

6.1 Media Formats

  • Slider plugin in Free version can accept the following media formats: jpeg, png, gif

  • Slider plugin in Pro version besides the formats listed above can also accept video links from YouTube and Vimeo.

6.2 Slider Background Transparency

  • Slide has a background, which can be seen if you select Image Behaviour - Natural from general Options, this option will show every image with its natural dimensions, and as the images are different the slider can have a background, in case if you want to back the background of the slider transparent then use the following codes:

Slider.php file

  • Line 1271

    .huge_it_slideshow_image_wrap_<?php echo $sliderID; ?> {
            list($ri,$gi,$bi) = array_map('hexdec',str_split($paramssld['slider_slider_background_color'],2));
            echo 'rgba('.$ri.','.$gi.','.$bi.',1)';?>;

    Write 0 instead of number 1

6.3 Put two sliders side by side

  • Please try to do the following: search the .huge_it_slideshow_image_wrap_ { code in the slider.php file (it is approximately in the 997 line). Press the enter and write the float: left; after the brace { and then write the width of the two sliders, which may fit your theme container on the frontend (you can change the width of the slider’s from the current options).

Requires: 3.0.1 or higher
Compatible up to: 4.6.1
Last Updated: 3 weeks ago
Active Installs: 100,000+


4.3 out of 5 stars


6 of 19 support threads in the last two months have been marked resolved.

Got something to say? Need help?


Not enough data

0 people say it works.
0 people say it's broken.

100,1,1 0,1,0 0,1,0 0,1,0
100,3,3 100,1,1 100,1,1 100,1,1
50,2,1 100,1,1 75,4,3 0,1,0 100,2,2 0,1,0 0,1,0 67,3,2 100,1,1 100,1,1
100,1,1 100,4,4
80,5,4 50,2,1
0,2,0 0,1,0
100,1,1 0,1,0
100,1,1 0,2,0 0,1,0 0,1,0
50,2,1 100,3,3
100,1,1 100,1,1
100,1,1 0,1,0