Swiper: it is possible to have a text fixed while swiping slides?

1

is it possible to have the text inside a slider fixed while swiping between slides?

Reason: I have a list of hotels with more than 50 photos and each hotel has a name, title, description etc… but some small text like number of stars and type of hotel need to be on the slide image, and if I do that and swipe to the next image slide the text also swipe along with the image…

In this case I had to repeat the same text in the second slide again and again in the third … etc…

it will be nice to have a text to be fixed and only the images to slide…
is it possible?

    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
        </div>

        <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
        </div>

        ...
    </div>
2

dom,add a fixed div float,code setting inner text
the key is css

1 Like
3

yes I tried this too… but the issue i see it is that adding fixed float area over the images the swipe does not work anymore because the overlay object is hiding the swiping …

do you have a sample code how to avoid this…? I want the user be able to swipe the slides and have the text always fixed on top of all images…

how you tried the way you mentioned me to see if the swipe still working?
thanks

4

Hi, I have tried the following:

      <div class="swiper-container">
        <div class="mytest">Your stars or whatever ....</div>
        <div class="swiper-wrapper">
            <!-- Slides -->

Position the fixed div:

.mytest {
	position: absolute;
	top: 300px;
	left: 100px;
	z-index: 10000;
}

This works for me but …

IMHO as user, it feels/looks better if the stars move with the image or, in case of different images of the same hotel, put the stars below the images as part of the description.

Ps,
I thought that I had to set pointer-events to none as well but apparently that is not necessary.

2 Likes
5

In my project, i do this

			<f7-swiper-slide
						v-for="slide in this.$root.$data.PetsRows"
						:key="slide.Id"	
					 	  ><p 
							v-html="slide.Name"	
						 ></p>


#swiper-pets .swiper-slide p{
	top: -56px;
    position: absolute;
	.....
}
1 Like
6

thanks for the ideas I will try to make it work following these ideas!! but I think it will be nice swiper has a way to put a block like overlay by default that can stay fixed all the time on the slides and when swiping only the images on background change:

something like a parameter like this: data-text-no-swiping=“true”

:slight_smile:

7

thanks :slight_smile: for the ideas … :slight_smile:

8

It already has such option, same as proposed by @Erik_Cornelisse. Fixed content must be placed as container direct child

1 Like