Real Estate Swiper

Given the page is in English (apart from the Latin text), I would have thought the browser behaviour would be correct - if it is going to suggest translation when it thinks appropriate. Anyway, not a big issue as you say.

I like the new demo (great pictures too).

My images in the gallery are 300px wide, non-responsive. I want to show them in a col-12 swiper with the following properties:

is=“dmx-swiper” id=“galerij” loop=“true” keyboard=“true” effect=“coverflow” pagination=“bullets” centered-slides=“true” slides-per-view=“auto” grab-cursor=“true” space-between=“1”

So I expect to see responsive to the viewport: phone/landscape - 1 image, tablet - 2 images, tablet - 3 images, etc.
What I get is for all the viewportsizes: 1 image, not centered.
I don’t find what i do wrong.

Please provide a link to your page where we can check this.

example:
http://webcrea.be/swipe.html

Please add this to your css:

.swiper-slide {
width: auto;
}

Thank you. This works fine !
http://webcrea.be/swipe1.html

And with a full width container you can create screenwide slideshow banner !
http://webcrea.be/swipe2.html

That’s right :slight_smile: Looks really nice in full-width, with auto play on and loop :slight_smile:

Next : trying to put a static title in the center of the swiper.

Step1: Assigning a z-index 1 to the swiper.
Step2: Adding a title in the column above the swiper, packing into a div with a negative bottom margin and applying z-index 2

But the title is covered by the swiper: disillusionment :disappointed_relieved:

Probably an issue with positioning ?

I can’t tell what you are doing wrong unless i see tour page running.
Probably you want to set the title position to absolute and position it over the swiper.

As I looked up the swiper is in a relative postion with z-index:1
.swiper-container{margin:0 auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}

It should work with the title in absolute position and z-index:10.
When I toggle App Connect mode inactive I can read the title, but it disappears when App Connect Mode is active.

http://webcrea.be/swipe2.html

Should the title be covering the whole slider or appear in some slide only?
I see error in your css as well: top: 5; which must be top: 5px;

It should cover the whole slide and stay during the slider.

Just move the H1 outside the swiper then …
Screenshot_9

ok, it’s simple as that. I should have think about that :unamused:

thanks for your help.

1 Like

The new responsive options work very - thanks!

Just one other thing - a useful option would be to resume auto-play if the user interacts with the swiper and then stops (eg moves the mouse away). As it is, once you have clicked on an image (eg to view the previous one), auto-play stops. Particularly in cases where there is only a single image (it seems the cube and flip options only work with one image), someone might not realise there were any more images.

(… one more other thing: I think there is a problem with the ‘fade’ effect. The images seem to pile on top of one another - or should they be exactly the same dimensions?)

If you are using slides with images in them, then they have to be the same size. Otherwise use different effect.

Just if you’re using the fade effect? Otherwise you’ll see part of the other images behind the current one?

This reminds me of another question: what exactly does ‘Auto Height’ do? When I’ve tried it, it doesn’t seem to make the images the same height.

Swiper is not specifically image slider. It is any content slider and as such the fade effect works like that - it fades the whole slide. When one slide is above the other and the image does not fill it you see the other slide below … as your slide background is transparent. If you want to use images with different heights better use slide effect.

Auto height does not resize the content of the slides (in your case images) it adjusts the swiper height to match when slides have different heights. If you enable this option you will see the position of the paging dots changes depending on the slides height.

Thanks - that’s all very clear and makes sense.

1 Like