Slider swiper full screen mobile responsive

9 replies · opened Mar 27, 2023

Rrx_69Mar 27, 2023

hi, I’m using Canvas 6.6.5. , because i want to use bootstrap 5.2.2

on this page attached, i would like the slider to be responsive on all view ports,

and "disable on interaction" should be off, if i click on a slide the slider should keep running, instead of stopping.

i ve tried some suggestions by reading here in the forum but it didn't work...

thank you

SSemicolon WebSTAFFMar 28, 2023

Hello,

  1. The Slider is responsive in All Viewports at the moment. Would you please be more kind to explain this in details so that we can understand what issues you are experiencing and help you fixing this?

  2. This option is currently not included by default. We have attached an updated js/plugins.min.js File for you in this reply. Simply, update the existing file in the js/ Folder with this file and add the data-autoplay-disable-on-interaction="false" Attribute to the .slider-element DIV. Example:
    [ch_pre][/ch_pre]

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.

Rrx_69Mar 29, 2023

Hello, sorry i have noticed i've attached the wrong html file!! my mistake.
please find attached the correct file,

as you can see on the first slide of the slider, i've added a logo and a button.
the button is to wide, it should be normal, but can't find how.

as you can see the slider is not fullsize when the viewport get smaller.
staying on the first slide...
because the slider seems not full size i've a problem with the logo which goes under the header , the logo should reduce a little in size but it should stay always below the header/navbar

this is what i would like to fix!


Thank you for the " data-autoplay-disable-on-interaction", as you can see it worked fine

Thank you
R

SSemicolon WebSTAFFApr 4, 2023

Hello,

Thanks for your Super Kind Patience and Apologies for the Delays in replying to your Support Query! We can see that one of our Support Team Member had put your Ticket on hold due to no Live URL.

Currently, we do not accept File Downloads based on our Support Policy: https://support.semicolonweb.com/support-policy/ . Please provide us with a Live URL and we can fix the issue with the Wide Button.

Regarding the issue with the Slider Height on Mobile Devices, simply find the min-vh-60 min-vh-md-100 Classes on the .slider-element DIV and replace it with min-vh-100 Class. This will ensure that the Slider is Full Screen on all the Devices. Additionally, you can consider finding the Documentation on Height Utility Classes here: https://docs.semicolonweb.com/docs/utility-classes/heights/ .

Hope this Helps!

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

SSemicolon WebSTAFFApr 5, 2023

Hello,

Thanks for the Live URL.

Based on your Issue, you can consider using this code instead of directly using the `` Tag:
[ch_pre]
View
[/ch_pre]

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.

Rrx_69Apr 5, 2023

thank you button is ok,

  • but when pages load there is always a gap on the top, between the slider and the top border of the page, for a very short time, is it possible to fix that?

  • and why the arrows icons are not showing on the slider?

https://www.weyoga.it/TEST-Canvas/index_off_2-.html

thank you

SSemicolon WebSTAFFApr 6, 2023

Hello,

  1. You can consider adding the following CSS to your css/custom.css File:
    [ch_pre]@media (min-width: 992px) {
    .slider-element {
    margin-top: -72px;

    }
    }[/ch_pre]

  2. The Font Icons are not uploaded on your Servers. You can find more about this on your Browser's Developer Console.

Hope this Helps!

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

SSemicolon WebSTAFFApr 7, 2023

Hello,

It appears that .woff2 Files are blocked on your Servers. You will need to contact your Hosting Provider to rectify this issue or simply add this MIME Type to your Server Configuration.

This will resolve the issue. Hope this Helps!

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

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