How to Create Custom Image Slider In Prestashop 1.6 Product Page

April 5, 2016 Lena Tsybulenko Prestashop
How to Create Custom Image Slider In Prestashop 1.6 Product Page

In this article I will describe how to create a custom image slider on the Prestashop product page. In the default Prestashop theme provides us with the product image area, but not a slider. It works like “show/hide” larger image on the thumbnail hover event. The interface is quite nice, but it may be too static/boring for some websites with creative design.

If the product page needs more dynamics, like in this template, this article is for you.

The first step on the way to image slider is to create a template for the slider. I prefer to use bxSlider, it’s included in the Prestashop default package.

Inside of the <div id=”views_block”> create a slider list <ul id=”images_list_frame_custom”>. In order to generate large size images use the attributes height=”{$largeSize.height}” and width=”{$largeSize.width}” of the <img> tag.

The second step is to generate the thumbnails. The bxSlider documentation says that you should create a template for the custom pager (thumbnails). So I’m creating my own custom thumbnails pager <div id=”bx-pager_builder”> inside the <div id=”views_block”> below  slider list:

Well done, but to make this thumbnails work you should observe the bxSlider conditions: each <a> thumbnails tag must have a data-slide-index attribute respective to the slide-index (zero-based). I enter the value for the data-slide-index attribute dynamically using JavaScript. I’ve created a variable prodThumb that contains thumbnail links. And with a simple while loop put the slider’s index into the data-slide-index value.

So now the pager’s code with the generated data-slide-index attribute looks as follows:

The slider is almost ready. Now we need to call it and say that the #bx-pager_builder item will be the holder of the custom pager:

That’s it. Live result can be found at the demo store.

Here is the whole code for the slider template:



6 comments

  1. good info..
    But need addd lazy load.

    For mobile . large image . to do slow loading page .
    so must lazy load for image. after slider touch load image.

    also how about pc ? windows after pushin turn off ((((

Post a new comment

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