How to Create a Full Width Slider in Prestashop 1.7

How to Create a Full Width Slider in Prestashop 1.7

Everybody knows that in the default Prestashop 1.7 theme the content part has a fixed width, that’s why the slider on the homepage has also a fixed width. Nobody likes limitations, that’s why we’re going to make the slider full width. In fact, there are a few ways how to solve the problem, but we’d like to consider the most interesting ones.

How to create a full image slider in Prestashop 1.7_1

Way 1: It’s necessary to create a hook out of the container (that means the block with .container) and output the slider into it. The way means that you can create your custom hooks and output modules into it, that’s why here you can’t find the step-by-step guide related to the topic (in case you don’t know how to do it, read the article Custom hooks in Prestashop 1.7). So first off, we create a custom hook (for example, displayHomeFullWidthSlider) and set the module output into the hook. Then open the template file “themes/classic/templates/layouts/layout-both-columns.tpl” and find the block <div class=”container”>. Before this block we put the code of the hook output {hook h=”displayHomeFullWidthSlider”}. This way is considered as the most flexible and suitable one.

Way 2: The way is suitable for those who don’t like creating custom hooks. It is based on CSS styles. We need to carry out the following on the homepage in the content part (except the slider): to make the same width as the block with .container has while the block with .container should be 100% wide. So we need to open the styles file (for example, “themes/classic/assets/css/theme.css”) and add the following code:

It should be mentioned that if new modules are to appear on the home page in the content part, they should be applied with the styles described above in order to get them centered as the rest of modules. Additionally, both ways imply horizontal scrolling appeared which can be removed if you add the following code in the styles file:

As a result, we get a full-width slider:

How to create a full image slider in Prestashop 1.7_2



10 comments

  1. I tried the first solution and the solution on the Lena’s post. I must say that they do not work on my prestashop 1.7 site. I get the blank page with your solution, and Lena’s solution does not do a thing. I did follow the guides step-by-step and checked multiple times. Could you maybe post a screenshot of the code, since several people are experiencing issues?

  2. The second solution resulted in a slightly increased image slider, nowhere near 100%. I’m using classic theme btw.

  3. Hi Aleksandar,

    I’ve just checked everything once more and added a few details in the text.
    Firstly, I edited the ‘Way 1’ paragraph. Probably, my idea wasn’t obvious with the previous edition. https://prnt.sc/iiluxl
    Secondly, I added a line in the ‘Way 2’. https://prnt.sc/iilune

    Please, try again. From my side, everything works fine.

    Hope, it’ll help.

  4. Hi, Maddy!

    The height of the slider can be set in the “themes/classic/assets/css/theme.css” file.

    The default value is
    .carousel .carousel-inner {
    height: 340px;
    }

    Changing the ‘hight’ parameter you can set the necessary slider’s hight.

    Please, pay attention to the following. In case the slider picture is bigger then the hight value the picture will be cropped from below.
    In case the picture is smaller — an empty space will appear beneath.

    I recommend setting the auto hight.
    .carousel .carousel-inner {
    height: auto;
    }

    In this case, the hight of a slider will adapt to the picture’s size. So the picture will be always displayed full size.

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *