Prestashop 1.7 Mobile Slider No Show

[Can Memiş]

Hi friends, i'm installing prestashop 1.7 classic theme. i'm anable mobile show slider but i can't see my theme mobile slider.

 

can you help me ?

 

http://prnt.sc/dqpdrq   Dekstop

 

http://prnt.sc/dqpebl   Mobile

 

[vekia]

In PrestaShop 1.7 by default standard homeslider module is disabled for mobile devices.

you can enable it with simple option switch in shop back office

 

go to modules > modules & services > installed modules

search there for "image slider" and enable option "enable mobile"

 

screenshot for reference:

 

in addition to this, please go to: themes/classic/modules/ps_imageslider/views/tempaltes/hook/slider.tpl

 

and change:

<div id="carousel" data-ride="carousel" class="carousel slide hidden-sm-down" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">

to

<div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">

[Can Memiş]

thank you so much.

[bynovita]

thank you so much. 

Super

[bugstory]

Hello,

 

I try this solution in the last version of prestashop but is not working for me.

Any idea?

 

Thanks,

 

Rafael

[delboy01]

didnt work for me either

anyone worked this out ?

[fsprinting]

the workaround above does not work for me also.  Is this thread still being read? 

[Pablo_cash]

 

In PrestaShop 1.7 by default standard homeslider module is disabled for mobile devices.

you can enable it with simple option switch in shop back office

 

go to modules > modules & services > installed modules

search there for "image slider" and enable option "enable mobile"

 

screenshot for reference:

 

in addition to this, please go to: themes/classic/modules/ps_imageslider/views/tempaltes/hook/slider.tpl

 

and change:

<div id="carousel" data-ride="carousel" class="carousel slide hidden-sm-down" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">

to

<div id="carousel" data-ride="carousel" class="carousel slide" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">

Thanks!! It's work nice in Prestashop 1.7.1.0

 

The only problem is how it looks on mobile. It does not stay centered, and typography does not change either

[Andrej Stas]

didnt work for me either

anyone worked this out ?

 

Guys, Vekia is correct and it works. If you cannot see any change make sure to clear the cache of your Prestashop first.

[kellyriverstone]

Many Thanks! Works Like a charm!

[Kaitho]

Hello

I have a problem in the slider, mobile version, the text overflows

How to adjust the size automatically for the mobile version

 

Thanks

[meska]

I have same problem. Text overflows on mobile version and on ipad. Desktop version is fine. Any ideas?

[Kunsthelden]

It's an unfixed issue as far as I've seen. You would need to amend the tpl code and a controller. Than, you change the css settings... which you need of course.

 

{if $is_mobile == 1}
<style>
.caption h2 { margin-top: -50px; margin-left: 3px; margin-right: 3px; }
.caption-description h2 { font-size:small;  margin-top: -40px; padding-top: 30px; margin-left: 3px; margin-right: 3px; }
/*.caption-description p { font-size:small; }*/
.caption-description p { display: none; }
</style>
{/if}

 

You would need somewhere an override. I did it for the homepage as such and go back after it's assigned to a variable to the standard indexController (core) .

class IndexController extends IndexControllerCore
{
    public function initContent()
    {
        parent::initContent();
    $is_mobile = preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
        $this->context->smarty->assign('is_mobile', $is_mobile);
        parent::initContent();
    }
}

 

My code is maybe not perfect but there's an idea how to resolve it until prestashop provides a fix.

 

 

[Msaustral]

Hi another solution is to modify the imageslider.scss for this:

(Prestashop 1.7.5.2, Base theme prestarocket-dev-tools) 

.slider-caption{
  position: absolute;
  top:10%;
  margin-bottom: 0;
  color: #000;
  @media (min-width: 768px) {
    left: 90px;
    max-width: 400px;
  }
  @media (max-width: 767px) {
    left: 9px;
    max-width: 170px;
    .display-1{
      font-size: 0.9rem;
    }
    h4{
      font-size: 0.5rem;
    }
  }
}

 

Edited September 12, 2019 by Msaustral (see edit history)