Swiper: data-background with linear gradient opacity


#1

I just needed to fade the images in swiper to highlight the text over the images in my case this are hotels with images and the information is on the images but the problem that the font get lost in the background image… so I wonder if F7 has a way to set the data-background with linear gradient so I can put any text in swiper over the image and can be read easily…

I had to modify the framework7.js line 26712 and add this code line to do this:

before:

$imageEl.css(‘background-image’, (“url(”" + background + “”)"));

After:

$imageEl.css(‘background-image’, (“linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)),url(”" + background + “”)"));

it will be nice that swiper in framework7 can has some extra attributes to do this from the html code like:

data-background=“imagepath/image.jpg” data-linear-gradient=“true” data-linear-opacity=“0.7”

Thanks Vladimir if you consider it!!!


#2

Can you show a live example of such swiper or illustrate better what you are trying to achieve. I’m sure there must be another way of doing this


#3

I am trying to use linear gradient opacity only over the image with lazy loading in swiper so the text over the slide can have more contrast and can be read easily!

with added linear gradient

without linear gradient before making the changes


#4

I think i do not need a live sample to show it so here I posted the images!! and the difference with css it is not possible to do this since the f7 overwrite the data-background argument to display after background-image only and using the lazy loading now it works perfect but I had to modify this line of f7 .js

Any other ideas let me know but I guess it will be good to have more options to control the images style inside the slides in swiper :slight_smile:

also with this linear gradient style the font is not affected by the opacity and only applied to the image so i do not need to create an overlay to do this anymore… very useful i think…


#5

It can be easily achieved with pseudo elements, e.g.:

<div data-background="..." class="with-gradient">...</div>
.with-gradient {
  position: relative;
}
.with-gradient:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3));
}

#6

thanks i will use it if it works great this way then I do not alter the .js… for it…
big thanks Vladimir!


#7

It works perfect that way thanks for the tips!


#9

Vladimir do you have a solution for this?

infinite-scroll-with-swiper-added-dynamically

big thanks if you take a look!