How to create image for Swiper

Swiper is a responsive full page image & content slider that spend the full width and height of the monitor. Because Swiper is responsive, the image will adjust it self to fit different monitor size and device shapes. So the image can look different in different devices. Desktop and mobile device shapes are very different so you will have to make the decision on the image shape that you want to optimize for.

Choosing image size for different devices

  • Image size work best for desktop are 1366×768 and 1920×1080
  • Image size work best for mobile devices are 1336×1824 and 1920px2560

As you can see the image shape for mobile is taller than desktop because mobile devices have portrait view while desktop only have landscape. Here you should choose the image shape that best fit your need. Please note these measurements are recommendation only. If you feel the image is not cropping the way you want, change and test different image shape to find your best fit

Cropping image to fit the sidebar

For Sabbatical and Quiver the sidebar can cover part of the image. To allow the image to centre you will want to crop your image a little to the left or little to the right to adjust for the sidebar of Sabbatical and Quiver. Because Sabbatical and Quiver are responsive theme, the sidebar width will change according to the size of the view port.

  • For Sabbatical, the sidebar is 23% of the monitor width. For example, if you are using 1366×768 image, you want to adjust the centre of your image 314px to the right.
  • For Quiver, the sidebar is 250px in width. To adjust for the sidebar you want to adjust the centre of your image 250px to the right

Image example:

Centre Image

Centre Image

Lean Left - Quiver

Lean Left – Quiver

Lean Right - Sabbatical

Lean Right – Sabbatical

Tags: , ,