Slider Example

Different Arrow Styles

You can use any of the the 11 available arrow styles Gutenslider offers or even use your own svg as described in this post. This applies not only to the shape of the arrows that follow the mouse, but also arrow color, arrow background color and arrow size. The first example just displays another arrow style and arrow size.

The second example shows a different slider mode with automatic slides per view and a black and white theme, where the arrows also have the mix blend mode set to “difference”.

The post Arrows Follow Mouse WordPress Slider (Pro) appeared first on Gutenslider.

Notice how the url changes and try copy pasting the url to start at the slide you left. You can also use links to navigate with buttons or arbitrary <a> elements on your website.

Hash Navigation Settings

To enable hash navigation you can go to Gutenslider Block Advanced Settings at the very bottom and check Enable Hash Navigation, which is disabled by default.

In Gutenslider Pro, you can additionally set a slider hash id: That is the id that shows in the browsers location, as long as a slide is active that does not have its own hash id.

In the example above we set it to holidays and you can see it on slides 3,4,5,6. The first to slides have their own hash id which you can find in the slides’ block settings. Check the example, where slide 1 has the id: flamingo and slide 2 the id beach.

In Gutenslider Free you can totally use hash navigation to set direct links to your slides, you can however not control the displayed text in the browser location bar.

That said, go ahead and hash navigation to your sliders if you feel like it.

The post Hash Navigation appeared first on Gutenslider.

See lightGallery and Gutenslider in action

Different slider, different lightgallery transition / color. See below for all available settings.

All available settings in Gutenslider Pro

• Lightgallery Background Color
• Lightgallery Font / Icon Color
• Thumbnails
• Zoom Icon
• Show Counter
• Lightgallery Transition (pick from >20)
• Lightgallery Media Title (which title should be displayed below the image)
• Lightgallery Media Caption (which caption should be displayed below the image)

More Info about Gutenslider Pro

Gutenslider Free Lightgallery Settings

You also get a full working lightgallery implementation on all your slider images starting from Gutenslider 5.4.0. If you want more controls over the lightgallery. Pick the Pro version.

And onle last example showing image titles from the media library (Pro)

Portraits

Portraits

Get started by creating your sliders now with Gutenslider free from the WordPress plugin directory or with advanced features and Gutenslider Pro

The post Gutenslider x lightGallery appeared first on Gutenslider.

WordPress 5.8 offers native webp support out of the box when your webserver has the imagemagick plugin installed.

We checked that everything is also working fine with Gutenslider. All you have to do is upload your .webp images in the Media Library or directly in Gutenslider to get you started saving lots of KB. The below image slider uses WordPress and Gutenslider to serve beautiful compressed webp images.

The post Gutenslider supports webp images appeared first on Gutenslider.

Gutenslider 5.0 out now!

Gutenslider 5.0 out now!

We are very happy to announce a big update for Gutenslider. We worked on it for almost half a year now and it will bring lots of improvements for you as well as maintainability and faster updates (for us developers) that let you profit from new features faster.

The biggest change is the transition from the slider library slick to swiper. Not only is swiper more modern, with more features but also, unfortunately, slick is discontinued since some years, which makes swiper more secure as well.

Another big change, lots of you asked for is a better UX for the editor. And with new Gutenberg features (that are constantly released very quickly), we can now deliver a much better UX without the need to switch between preview mode and edit mode for slide editing. Also the preview in the editor is now much closer to the final result on the front.

All Changes in Version 5.0

Gutenslider Free

• Move from slick to swiper as slider library because of maintainablity, usability and security reasons
• Improved UX (no edit / preview mode swith)
• Flip animation
• Insert images from url
• Slides per view auto
• Conditional assets loading (only load gutenslider css and js on posts/pages with Gutenslider blocks)
• Reduced file size – faster loading – better SEO score
• Improve Lazy Loading and srcset

Gutenslider Pro / Expert

• Added two more animations on top:
  • coverflow
  • cube
• Added more progress options:
  • Fraction – display Slide Number
  • Progress – display a Progressbar
  • Dynamic – display dynamic bullets
  • Position of the progress
• Space between slides
• Advanced more finegrained responsive controls

Check out Pro

Gutenslider 5.0 out now!

Gutenslider 5.0 out now!

Upcoming Changes

Not only are we releasing new features with this version, but as noted above also a new software design that allows us to deliver new changes we were not able to release before. We collected all feature requests from our users as well as our own ideas on this board, where you can also vote for new features: https://shipright.community/gutenslider

We have lots of todos on our list, but upcoming changes requested by you are:

• vertical slider
• lightbox
• block transforms (from and to other blocks)
• thumbnails
• more controls over the transition
• …

So, keep your eyes open for new releases and the added features. If you have more feature requests, please use the contact form in your WordPress admin -> Gutenslider -> Contact Tab.

The post Gutenslider 5.0 out now! appeared first on Gutenslider.

The free version allows you to change the size of the arrows and to choose between three different colors (white, black, blue). In Gutenslider Pro you can choose from:

• 10 different arrow styles
• Arrow Position (left + right / bottom left / bottom right / top left / top right)
• Arrow Color
• Arrow Hover Color
• Arrow Background Color
• Arrow Background Hover Color
• Arrow X Offset
• Arrow Y Offset
• Arrow Spacing
• Arrow Mix Blend Mode

Check the final result here live:

The color palette might look different on your website, as it is determined by the theme you are using. But you can choose any custom color anyway.

In the pro version you also have the option to let the arrows follow the mouse cursor. If you want to play with all the options and see how it behaves with your content, you can always start a free-7-day pro trial here.

The post Gutenslider Arrow styles appeared first on Gutenslider.

We liked the idea of using existing fields for Gutenslider, which is especially useful for those of us, captioning each photos in their library, for example artists, photographs and other pro WordPress users. So look what we did in the latest Gutenslider release.

Gutenslider Free

1. Make sure your Media has captions ( titles, descriptions if you want to use them too).
2. Make sure the slider content mode is set to Changing Content
3. Click the Edit Content button in the block toolbar
4. For each individual slide, select the placement and the format of the automatic caption

Gutenslider Pro

In Gutenslider Pro and Expert you have the option to bulk edit slides. Especially the content placement and the captions can be edited by changing settings on the parent slider block instead of having to change each individual slide block.

1. Make sure your Media has captions ( titles, descriptions if you want to use them too.
2. Select the Gutenslider block
3. Set the Content Alignment to where you like it
4. In the block settings in the Advanced section. Find the Automatic Captions selector and set it to your desired format

Unsplash Automatic Captions

As Gutenslider works great with unsplash, and they encourage you to add attributions to the images you get from there, and we at Gutenslider love attributing free content creators, automatic attribution works too now.

undefined – – undefined

undefined – – undefined

undefined – – undefined

undefined – – undefined

undefined – – undefined

The Blog Photo is by Nathan Dumlao on Unsplash

The post Automatic Photo Captions appeared first on Gutenslider.

Enabling Parallax for your WordPress Sliders in Gutenslider

Go to the block settings to the panel “Effects” and enable the Parallax setting. Then further customize the effect by setting the direction of the parallax and the “Parallax Amount”. You can experience the results in the frontend.

Watch this introductory video, that shows how to create the slider, you find at the bottom of the page.

More examples of how Parallax can be used in your sliders

Example 1: Create a slider that showcases your photographic work.

Do the following:

• Animation to “slide”
• “Slides to show” option to 2
• the content mode to fixed to
• add a paragraph reading “Portrait Photography”
• GO!

Portrait Photography

Portrait Photography

Example 2: Create a slider that showcases your Airbnb place.

As a Airbnb host you probably want to showcase the beauty of your appartment or house to your potential visitors. A parallax slider is one nice option to do so.

Just do the following (as can also be seen in the video above):

• Add your images (e.g. from unsplash.com, to select multiple, remember to hold down the command or alt key)
• Change the slider settings. Here we set the align to wide
• Enable Parallax
• Set the direction and the amount to your desired settings
• Go!

To enable the parallax settings in the block settings bar on the right, you need to get a pro or expert version. To test it out, you can always try Gutenslider pro in a free 7-day trial, with no credit card or payment options needed and money back guarantee.

The post Add a Parallax Slider to your WordPress Page appeared first on Gutenslider.

While selecting images, hold down the Command-Key on Mac or the Alt-Key on Windows/Linux, to select multiple images.

Have fun creating with Gutenslider + Unsplash. If you want more options for customizing your slider and even adding Video slides and more, check out the Gutenslider Pro Trial.

For great WordPress plugin reviews and overviews checkout WordPress Slider Block Gutenslider review by Dessign Themes.

The post Gutenslider + Unsplash appeared first on Gutenslider.

So go ahead and start creating your adaptive height sliders with Gutenslider.

The post Adaptive Height appeared first on Gutenslider.