Different image for slider (mobile view)

16 replies · opened Feb 28, 2019

BbootsybubbaFeb 28, 2019

Hello,

i'd like to change a picture in a slider in mobile view (max-width: 575.98px).
In the mobile version it should be the background-image: url('img/slide-loewenrecht-1920x650px-03-mobile.jpg)
instead of background-image: url('img/slide-loewenrecht-1920x650px-03.jpg

I tried different ways, but nothing helps.

Here my HTML:

<section id="slider" class="slider-element slider-parallax swiper_wrapper clearfix" data-speed="650" style="height: 650px;">
<div class="slider-parallax-inner">
<div class="swiper-container swiper-parent">
<div class="swiper-wrapper">
<div class="swiper-slide dark" style="background-image: url('img/slide-loewenrecht-1920x650px-03.jpg');">
<div class="container clearfix">
<div class="slider-caption slider-caption-center">
<h2 data-animate="fadeInUp">Ärger mit dem Jobcenter?</h2>
<p class="d-block" data-animate="fadeInUp" data-delay="200">Wir helfen Ihnen<br>bei Problemen mit Hartz 4!<br>Schnell, kompetent, bundesweit!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

SSemicolon WebSTAFFFeb 28, 2019

Hello,

This is Definitely Possible. You can simply use the Responsive CSS Classes to implement this functionality, simply add the following CSS Code to control the Background Images for the Slides:

.device-xl .swiper-slide { background-image: url('image.jpg'); }

.device-lg .swiper-slide { background-image: url('image.jpg'); }

.device-md .swiper-slide { background-image: url('image.jpg'); }

.device-sm .swiper-slide { background-image: url('image.jpg'); }

.device-xs .swiper-slide { background-image: url('image.jpg'); }

This will definitely work fine. The Responsive Classes are as follows:

.device-xl – Class for Large Devices >=1200px

.device-lg – Class for Medium Devices >=992px to 1199px

.device-md – Class for Tablets

.device-sm – Class for Landscape Mobiles or Phablets.

.device-xs – Class for Portrait Mobiles

You can use the above code for other Elements as well in the Slider.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbootsybubbaFeb 28, 2019

Thanks for the fast answer, but maybe i'm too stupid …

Now i put this in my custom.css:

.device-xl .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-lg .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-md .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-sm .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-xs .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-xs .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03-mobile.jpg') }

but it doesn't work.

Here is a link to the side:

https://loewenrecht.typusmedia.de

SSemicolon WebSTAFFMar 1, 2019

Hello,

Simply use the following CSS code:

.device-xl .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-lg .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-md .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-sm .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-xs .swiper-slide { background-image: url('img/slide-loewenrecht-1920x650px-03-mobile.jpg'); }

Additionally, remove the background-image Inline Styles added to the .swiper-slide Element as this is conflicting with the CSS you have added to the css/custom.css File.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbootsybubbaMar 1, 2019

hmmmh, i think i tried this before.

But it doesn't work.

i changed this part:

and add the css

but then no image is visible.

BbootsybubbaMar 4, 2019

The Problem is still unsolved. Can you help me?

SSemicolon WebSTAFFMar 4, 2019

Hello,

Please provide us with a Live URL so that we can check out the exact issue and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BbootsybubbaMar 5, 2019

Here the URL:

https://loewenrecht-adm.typusmedia.de/index_test.php

SSemicolon WebSTAFFMar 5, 2019

Hello,

This issue is with the Path of the Image. Since the css/custom.css File is inside the css/ Folder, you will need to use the following codes:

.device-xl .swiper-slide { background-image: url('../img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-lg .swiper-slide { background-image: url('../img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-md .swiper-slide { background-image: url('../img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-sm .swiper-slide { background-image: url('../img/slide-loewenrecht-1920x650px-03.jpg'); }
.device-xs .swiper-slide { background-image: url('../img/slide-loewenrecht-1920x650px-03-mobile.jpg'); }

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

BbootsybubbaMar 5, 2019

Thank you for the fast answer.

Now the image is visible, but still it doesn't change in mobile view???

SSemicolon WebSTAFFMar 5, 2019

Hello,

Apologies about the Inconveniences caused!

Please update the codes online so that we can continue checking this out for you. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BbootsybubbaMar 8, 2019

Hello,

maybe you take a wrong link.

Here the Link to the updated site:

https://loewenrecht-adm.typusmedia.de/index_test

SSemicolon WebSTAFFMar 10, 2019

Hello,

We have checked out your File: https://loewenrecht-adm.typusmedia.de/css/custom.css and the CSS Codes for the .swiper-slide at the bottom of the File has not been properly copy/pasted. Please delete the pre Tags and consider checking your Page again.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbootsybubbaMar 11, 2019

Cool, that works. Thank you very much.

I have a request or suggestion for a new function in the great canvas theme.

In Germany and in Europe we have a lot of changes in webdesign because of a new data protection law (in Germany its called "DSGVO", in Europe i think its called General Data Protection Regulation "GDPR". Now we have to block cookies eg. from Google analytics, Google map, Openstreetmap, Youtube etc. first, before the visitor use the website. He need a possibility to enable or disable the cookies.

Here a link to a developer of a similar wordpress plugin:

https://borlabs.io/?noredirect=en_US&_ga=2.252803081.125719103.1552326603-1581908605.1552326603

It would be very helpful to have this function in the canvas html theme.

Best regards

BbootsybubbaMar 12, 2019

One more question about the slider …

Now i like to integrate a second slide with an other image in two sizes.

i tried this css:

.device-xl .swiper-slide .slide2 { background-image: url('../img/slide-loewenrecht-1920x650px-01-green.jpg'); }
.device-lg .swiper-slide .slide2 { background-image: url('../img/slide-loewenrecht-1920x650px-01-green.jpg'); }
.device-md .swiper-slide .slide2 { background-image: url('../img/slide-loewenrecht-1920x650px-01-green.jpg'); }
.device-sm .swiper-slide .slide2 { background-image: url('../img/slide-loewenrecht-1920x650px-01-green.jpg'); }
.device-xs .swiper-slide .slide2 { background-image: url('../img/slide-loewenrecht-1920x650px-01-mobile-green.jpg'); }

and change the div in <div class="swiper-slide dark slide2">

but it doesn't work.

Here the link:

https://loewenrecht-adm.typusmedia.de/index_test

SSemicolon WebSTAFFMar 15, 2019

Hello,

In Germany and in Europe we have a lot of changes in webdesign because of a new data protection law (in Germany its called “DSGVO”, in Europe i think its called General Data Protection Regulation “GDPR”. Now we have to block cookies eg. from Google analytics, Google map, Openstreetmap, Youtube etc. first, before the visitor use the website. He need a possibility to enable or disable the cookies.

While, this is currently only possible on WordPress Themes, we will sure try integrating in the Future Version of Canvas. Meanwhile, you can consider using this Cookie Notification Template: http://themes.semicolonweb.com/html/canvas/cookies.html .

Regarding, the Slider Issue, you are using an incorrect CSS. Please use the following:

.device-xl .swiper-slide.slide2 { background-image: url(‘../img/slide-loewenrecht-1920x650px-01-green.jpg’); }
.device-lg .swiper-slide.slide2 { background-image: url(‘../img/slide-loewenrecht-1920x650px-01-green.jpg’); }
.device-md .swiper-slide.slide2 { background-image: url(‘../img/slide-loewenrecht-1920x650px-01-green.jpg’); }
.device-sm .swiper-slide.slide2 { background-image: url(‘../img/slide-loewenrecht-1920x650px-01-green.jpg’); }
.device-xs .swiper-slide.slide2 { background-image: url(‘../img/slide-loewenrecht-1920x650px-01-mobile-green.jpg’); }

Since the .slide2 class is applied to the .swiper-slide Element, they should be written together.

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbootsybubbaMar 15, 2019

Thank you, the new css works like a charm.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard