ACF Slider
Updated over a week ago

ACF Slider widget allows you to show ACF Gallery Field in an image slider layout.


Here you can choose one of the options.

Force Width: can force the width of all the images in the slider to any given percentage.

Force Height: can force the height of all the images in the slider.

Use as a background Image: can use the images as a background and set their position and height.


Here you can set the vertical (top and bottom padding) spacing and horizontal spacing from the slider.

Image Settings

Here you can set the image size, description, styling, box shadow, and filters.

Slider Settings

  • Transition Effect: Choose the transition effect you want. It will occur as you navigate between slider images.

  • Speed: here you can set the speed of the transition effect in ms(milliseconds, where 1000ms = 1s). By default, it is 300ms(.3s), you can increase this value for a slow transition effect.

  • Centered Slide: With this option enabled you can set the active image slide to center.

  • Space Between: this option adds spacing(right margin) to the images. As such, It is different from the force width option.

  • Slides Per View: Number of slides to show per view

  • Slides Column: set no. of slides per column, for the multirow layout.

  • Slides Per Group: Here you can set numbers of slides to define and enable group sliding. Useful to use with slidesPerView > 1


You can enable or disable the navigation and style it as you want.


You can enable or disable the pagination, choose the pagination type, and style it as you want.


you can enable or disable the scrollbar underneath the slider.


Enable this option, and set delay time in ms(milliseconds) to navigate between the slides automatically.

Autoplay Stop on hover: If enabled, autoplay will stop as the user hovers over the slider.

Autoplay stop on the last slide: By default, autoplay will work in a loop. So, if this option is enabled, autoplay will stop when it reaches the last slide.

Disable Autoplay on interaction: Set it enabled, to disable the autoplay on interaction.


When the loop is enabled, navigation will keep on working. It will start again from the no. one slide as it reaches the last slide.


This option will add an additional class ( .swiper-slide-visible ) to the active slides.


With this option, you can free the slides from the fixed positions. You can slide with the pointer or touch freely between the slides.

Keyboard / Mousewheel

  • Keyboard Control: allows you to navigate between slides with left and right keyboard buttons.

  • Mousewheel Control: this allows you to navigate between slides with the mouse wheel.

Other Options

  • Set Wrapper Size: If enabled, this option will set the width/height on the swiper wrapper equal to the total size of all the slides. It can be used as a compatibility fallback for the browsers that don't support flexbox layouts well.

  • Virtual Translate: Enable this option and the swiper will be operated as usual except it will not move, real translate values on the wrapper will not be set. Useful when you may need to create a custom slide transition

  • Auto Height: If enabled, the slider wrapper will adapt its height to the height of the currently active slide. Helpful when you have slides with different heights and you are not using the force height feature.

  • Round Lengths: enable this option to round values of slides width and height to prevent blurry texts on usual resolution screens (if you have such)

  • Nested: set to true on nested Swiper for correct touch events interception. Use only on nested swipers that use the same direction as the parent one

  • Grab Cursor: set the cursor pointer to grab.


You can enable the lightbox for the slider images and set light box type, overlay hover, and hover effects.


You can retrieve the data from the same source or the other source post.

Did this answer your question?