Get Free Audit

How to Create a Full Width Slider in Prestashop 1.7

Oct 24, 2017

13880 Andrey Litvin

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.

brands_slider1

Prestashop Extensions by BelVG

Take your online shop to a new level

Download here

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:

Andrey_Dubina
Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


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

Create a responsive slider in your PrestaShop webstore with our Unbound Responsive Slider module.

development_prestashop

PrestaShop Development

Take your online store to the next level with BelVG PrestaShop Development

Visit the page
Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

18 Comments

  1. Hi, Malkhaz! Thanks for your question.
    I would recommend placing this piece of code either at the end of theme.css file or any other place at the custom.css file.

  2. Hello. Firstly, I’m sorry for my bed English. Secondly, thank you so much for your job.
    Please, tell me, where is place need to add code?
    1. body.page-index #wrapper .container {
    max-width: 100%;
    and etc?
    Yes, I understand, code needs to add in theme.css, but where a place in theme.css – anyplace?

  3. Hi Dinesh,
    It’s not quite clear to me how I can help you. If I tell you anything without seeing the site, this will be just a shot in the dark. Can you send a link to your website?

  4. How to remove horizontal and vertical scroll bar. I used navfullwidth hook to display the full width slider. I don’t know how to remove my horizontal and vertical scroll bars from site.

  5. Hi, Maurya

    As far as I know, it is not possible, since this slider is not tied to product pages. You can hide the slider using styles for specific pages. For each product page, the tag has a unique class like product-id-XX (where XX is the product id). Using this class, you can hide the slider on some pages. But this is not an elegant solution because the slider will still be in the code, it will simply become invisible for the visitors.

    It’s my point of view and I recommend that you consult your web developers on this issue.

  6. Can I Disable carousel slider for products for some pages and enable other some pages in single website.

  7. 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.

  8. 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.

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

  10. 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?

Post a new comment

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