How can I center the thumbnail of the image displayed on the template CMS item page in the swiper.js slider in Webflow?

Published on
September 22, 2023

To center the thumbnail of the image displayed on the template CMS item page in the swiper.js slider in Webflow, you can follow these steps:

  1. Select the CMS item page where the swiper.js slider is located.
  2. Locate the swiper.js slide that contains the image thumbnail you want to center.
  3. Open the Styles panel and navigate to the Slide class.
  4. By default, the Slide class in Webflow uses a flexbox layout. To center the thumbnail, you'll need to adjust the alignment properties.
  5. Select the Slide class and click on the Flex settings icon in the Styles panel.
  6. In the Flex settings, change the Justify property to Center. This will horizontally center the thumbnail.
  7. If you want to vertically center the thumbnail as well, change the Align property to Center. This will vertically center the thumbnail.
  8. Once you've made these changes, you should see the thumbnail centered within the swiper.js slide.
  9. If needed, you can further customize the styling of the thumbnail by adjusting the other properties in the Styles panel, such as size, border, padding, etc.

By following these steps, you'll be able to center the thumbnail of the image displayed on the template CMS item page in the swiper.js slider in Webflow.