How to properly modify the slider?

Question

css

Here is a pretty popular slider for vue.js: https://github.com/surmon-china/vue-awesome-swiper
Here are its variations: https://github.surmon.me/vue-awesome-swiper/

1) Needed here is this option:


But instead of numbers in pagination, you need to specify string names, like instead of "1", you need "page 1".
But the problem is that, as I understand it, the sizes of the "internal" (in the screenshot below) styles are rigidly set there, which causes the items in the pagination to stick together.
Of course, you can manually increase the sizes through the "available" styles (in the screenshot below), but I would like the sizes to be calculated automatically depending on the size of the text content.
Here is the result:


2)The second problem is that the slides here shape their height based on the tallest element.
That is, if the height of the first slide is, for example, 500px, and the height of the second slide is 300px, then there will be an empty space of 200px on the second slide. And you want the height of the second slide to be 300px. - that is, by the height of the content.

Answer 1

1) the sizes are set in css, you need to copy the selector from the available styles and redefine it yourself.

width: auto !important;
white-space: nowrap;

so it will adjust to the size of the text.
2) autoHeight: true add to swiperOptions