In this documentation, we will discuss the customization of the Sniper Slider, brought to you by the Prime Slider addon for Elementor.
Enable The Sniper Slider
To use the Sniper Slider from Prime Slider, first, you have to enable the slider.
- Go to WordPress dashboard > Prime Slider Plugin dashboard.
- Then, Click the Core Widgets Tab.
- Search the Sniper slider name.
- Enable the Sniper slider.
- Hit the Save Settings Button.
Inserting The Sniper Slider
1. Go to the Elementor Editor Page and Hit the “+” icon Button.
2. Search the Sniper slider.
3. Drag the widget and drop it on the editor page.
Work With The Content Tab
Sliders Section
Go to Content > Sliders
1. Close Item: You can delete the Slider item by clicking the Close icon button.
2. Copy Item: This option lets you copy the same item.
3. Add Item: You can add a new item by clicking the “+”Add Item button.
1. Sub Title: This option lets you change the sub title text.
2. Title: This option lets you change the title text.
3. Title Link: This option lets you set a link under the title.
4. Image: You can set an slides image from here.
Additional Options Section
Go to Content > Additional Options
1. Height: This option lets you set the slider height.
2. Show Title: Enable or disable the show title switcher button to show/hide the title from slider. From here you also can set the Title HTML tag (H1 to H6, Div, Span, and P).
3. Show Sub Title: Enable or disable the show sub title switcher button to show/hide the sub title from slider. From here you also can set the Title HTML tag (H1 to H6, Div, Span, and P).
4. Show Navigation: Enable or disable the show navigation switcher button to show/hide the navigation from slider.
5. Show Pagination: Enable or disable the show pagination switcher button to show/hide the pagination from slider.
6. Alignment: You can set the title and subtitle alignment as – Left, Right and Center.
7. Image Resolution: You can change the image resolution with this option.
Slider Settings Section
Go to Content > Slider Settings
1. Autoplay: By enabling this option, you can automatically play the slides one after another. This option lets you set the time delay between each slide transition.
2. Pause on Hover: Enable the switcher to pause autoplay when the user hovers over the slider.
3. Slides to scroll: It represents how many slides will slide at once.
4. Center Slide: If you enable the Switcher option, then your Active slider will show the center (depending on your widget style).
5. Grab The Cursor: Your mouse pointer icon will be changed into a grab cursor. Visitors can slide your slider manually with your mouse cursor.
6. Drag Free Mode: In this mode, you can easily make it visible by Dragging your slider into the slide Area.
7. Loop: Enable the switcher to go back to the first automatically after the last slide.
8. Mousewheel: If you activate the mousewheel switcher button, when you scroll your mousewheel then the Slider will change with the scroll. You also can set the Mousewhell Animation Speed as you need.
9. Observer: If you enable the option then you are able to use the slider/carousel in any hidden places (such as in tabs, Accordion, etc).
10. Swiper Effects: This option lets you set the Swiper Effects as Slide, Fade, Cube, CoverFlow, Flip, Shutters, Slicer, Tinder, GL, and Creative.
Work with The Style Tab
Sliders Section
Go to Style > Sliders
1. Background Color: You can set the slider background color from here.
2. Overlay Type: You can set the overlay type- Classic and Gradient. Here we set the overlay type classic.
3. Overlay Color: This option lets you set the overlay color.
Come to the Sliders section, you will get three sub-sections; Title, Sub Title, and Grid Line.
Let’s start with the Title Tab –
1. Color: You can change the title color with this option.
2. Hover Color: You can change the title hover color with this option.
3. Active Color: You can change the title active color with this option.
4. First Word Color: You can change the title first word color with this option.
5. First Word Active Color: You can change the title first word active color with this option.
6. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
7. Text Stroke: If you want to add a stroke (outline) around the text, you can use the Text Stroke property. you also can change the Text Stroke Color as your working demand.
8. Text Shadow: The Text Shadow property is used to create the shadow around the text. It takes three values: horizontal offset, vertical offset, and blur radius. Here you can also change the Text Shadow Color.
1. Color: This option lets you change the Sub Title text color.
2. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
3. Sub Title Spacing: You can adjust the sub title spacing by this option.
Grid Line Color: This option lets you set the grid line color.
Navigation Section
Go to Style > Navigation
1. Arrows Color: This option lets you set the arrows color.
2. Arrows Hover Color: This option lets you set the arrows hover color.
Come to the navigation section, you will get more two sub-sections; Fraction Pagination, and Scrollbar. Lets proceed with the Fraction Pagination section-
1. Pagination Color: This option lets you set the pagination color.
2. Pagination Total Color: This option lets you set the pagination total color.
3. Typography: Change the font family, size, weight, style, transform, decoration, line height, letter spacing, and word spacing from here.
Come to the Scrollbar section, you will get the below options-
1. Line Color: This option lets you set the line color.
2. Line Active Color: This option lets you set the line active color.
All done! You have successfully customized the Sniper Slider widget on your website.
Video Assist
You can also watch the video tutorial Learn more about the Sniper Slider widget. Please visit the demo page for examples.
Thanks for being with us.
