Get Free Audit

How to Create Custom Image Slider In Prestashop 1.6 Product Page

Apr 5, 2016

3459 Lena Tsybulenko

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.

img slider

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:

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


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:


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

8 Comments

  1. Hello,

    How to Create Custom Image Slider In Prestashop 1.7 Product Page.

    Thank you my code created for 1.7 do not hesitate to the improved
    —————————————————

    {block name=’product_cover’}

    {if isset($product)}
    {foreach from=$product.images item=image}
    {assign var=imageIds value=”$product->id$image.id_image“}

    getImageLink($product->link_rewrite, $imageIds, ‘large_default’)}”
    alt=”{$product.cover.legend}”
    title=”{$product.cover.legend}”
    style=”width:100%;”
    itemprop=”image”
    id=”{$image.id_image}”
    />

    {/foreach}
    {/if}

    {/block}

    {block name=’product_images’}

    {if isset($product)}
    {foreach from=$product.images item=image name=thumbnails}
    {assign var=imageIds value=”$product->id$image.id_image“}

    getImageLink($product->link_rewrite, $imageIds, ‘home_default’)}”
    alt=”{$image.legend}”
    title=”{$image.legend}”
    width=”100″
    id=”{$image.id_image}”
    itemprop=”image”
    >

    {/foreach}
    {/if}

    {/block}

    {hook h=’displayAfterProductThumbs’}
    —————————————————
    $(document).ready(function() {
    if (!!$.prototype.bxSlider)
    $(‘#images_list_frame_custom’).bxSlider({
    minSlides: 1,
    mode: ‘fade’,
    easing: ‘easeOutBounce’,
    touchEnbabled: true,
    pagerCustom: ‘#bx-pager_builder’,
    infiniteLoop: false,
    controls: false
    });
    });
    var prodThumb = $(‘#bx-pager_builder a’);
    var i = 0;
    while (i <= prodThumb.length) {
    $(prodThumb[i]).attr('data-slide-index', i);
    i++;
    }

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

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