How to Create Slider for Homefeatured Products in Prestashop 1.6

24 Comments

1. Aleksey, controls may exist, but be not visible due to overflow. Try to take a look if controls exist in web page code. Anyway should see the link to say definitely.

2. I tried to apply the slider to another module; did everything according to the instruction.
   The items aligned the way I wanted, but there are still no scroller element.

3. Andrey, вы можете применть слайдер к любому списку.
   Посмотрите здесь подробнее: https://belvg.com/blog/how-to-create-slider-for-homefeatured-products-in-prestashop-1-6.html

   И подписывайтесь на блог, чтобы не пропустить новые посты :)

4. Здравствуйте, можно ли применить это к субкатегориям на страницах категорий?
   Спасибо Вам за полезную информацию!!

5. Hello, Amit!
   Unfortunately, it’s hard to answer your question without any investigation. I can just suppose that you have a mistake in styles.
   Please, write to our support department to request the detailed inspection: [email protected]. We’ll be happy to assist.

6. Thank you. This information is very useful.
   I changed code for home featured product and it is nicely working on Android mobile phone browsers (chrome and default browser). But when I open same site on desktop having browser (firefox, chrome or opera) slider works well till the time I do not hover mouse on the products in slider. As soon as I hover move over products in slider that area becomes grey and remains grey. Every such other products area becomes turns to grey after mouse hover on them all.

   Please suggest me some key point to solve this issue.

7. Hi Enda,
   the new article about Prestashop 1.7 has just been published. Hope, it will answer your questions!
   https://belvg.com/blog/how-to-create-featured-products-slider-in-prestashop-1-7.html

8. Hello Iryna.

   Thanks for ur information. Nice to know you :)

9. Hi Enda,
   thanks for the question!
   In Presta 1.7 the process is different indeed. But… Right now we’re writing the new article about it! Subscribe to our blog to stay tuned :)

10. Hello Lena,

    i’m interested with your tutorial.i want make it in prestashop 1.7.
    can you tell me where i can find link homefeatured.tpl, blocknweproducts-home.tpl, blockbestsellers-home.tpl in presta 1.7.
    thanks before … nice to know you :)

    Thank you

11. Any one can change for prestashop 1.7.x.x

12. in presta 1.6.1.11 blocknewproducts slider not works, homefeatured is OK .. any help

13. Hi,
    Great tutorial…

    Problem:

    The titles all stay like the tabs
    Ex: i have Specials Best Sellers and New Products
    Then all the sliders

    When i should have:
    Specials
    Slider

    Best Sellers
    Slider

    New Products
    Slider

    Can you help me fix this?

14. Hi, tabs in home not working. If i have bxslider then tabs error.
    Do you test this solition for active and deactive tabs? Sorry for my english.

15. Alberto,

    You can simply change it using CSS.

16. How can I change the Size and color of the controls? Thanks in advance

17. It works! just be careful on where you paste the .js code and where you place the brackets )};…..

18. Tried your result page on my tab and it does not scroll to “New products” section. swithing to mobile view the whole phone wrapper scrolls up and down. Any page i can test on my mobile phone?

19. hey awesome tutorial . it works. im newbie .. can i change next and prev button with fontawesome or image? please

20. Hi Dear

    Unfortunately this line
    {include file=”$tpl_dir./product-list.tpl” id=’homefeatured’ class=’homefeatured tab-pane ‘ }
    doesn’t exists in this files
    fblocknweproducts-home.tpl, blockbestsellers-home.tpl
    in theme module folder .
    could please explain more about it .

    I just edited homefeatured.tpl ,global.css and global.js and slider appeared Incompletely it seems i doesnt work well on Homefeatured Tabs.
    Is it possible to have this option on HomeSlider Tabs ?

21. Hemal,

    In global.js you need to enter the code:

    $(document).ready(function() { if (!!$.prototype.bxSlider) $('.bxslider-hometabs').bxSlider({ minSlides: 1, maxSlides: 8, slideWidth: 270, slideMargin: 10, pager: false, controls: true, nextText: 'Next', prevText: 'Prev', moveSlides:2, infiniteLoop:false, hideControlOnEnd: false }); });

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

    $(document).ready(function() {     if (!!$.prototype.bxSlider)         $('.bxslider-hometabs').bxSlider({             minSlides: 1,             maxSlides: 8,             slideWidth: 270,             slideMargin: 10,             pager: false,             controls: true,             nextText: 'Next',             prevText: 'Prev',             moveSlides:2,             infiniteLoop:false,             hideControlOnEnd: false         }); });

    CSS code:

    ul.bxslider-hometabs.product_list.grid > li.first-in-line, ul.bxslider-hometabs.product_list.grid > li.first-item-of-tablet-line {clear:none;}

    1 2	ul.bxslider-hometabs.product_list.grid > li.first-in-line,   ul.bxslider-hometabs.product_list.grid > li.first-item-of-tablet-line {clear:none;}

    enter it in global.css

22. Hello

    can you please tell me in which .js file i need to enter code and where i need to enter above code and also in which css file i need to change the code.

    Thank you

23. Pawn,

    Just set auto:true in js. Here is bxSlider options: bxslider.com/options#auto

24. Hi, thanks for this mod,, works fine.. only one question.. how to add auto play to this sliders?
    Thanks anyway