Creative Slider Modification in Prestashop 1.6

Apr 2, 2015

251 Lena Tsybulenko

Creative Slider Modification in Prestashop 1.6

In this article I’ll describe how I modified the Homepage slider for Traveler Prestashop 1.6 Responsive Template I’ve created.

Here is the Traveler Theme demo:

It’s quite simple. First, we’ll achieve full width (read article in our blog “How to create full width image slider”).

Then, set slider max width to 275px in the admin panel.

Set maxSlides in homeslider.js:

Andrey_Dubina

Partner With Us

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


Then prepare your images and add some CSS. In order to achieve effect like Traveler, add CSS:


That’s it.

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

7 Comments

  1. Hi Lena

    I have got this same problem with the code.
    Css implementation (effect like Traveller) did not worked for me.

    Please help me.

  2. Thank you, Lena.
    I think I have problems seing my page in Firefox, even i see well the traveler theme. No transitional effect, there is a white space between images and the fade in/out does’t work. And, of course, I don’t know css :). But, again, thank you for your time and effort to look at it and answer.

  3. Adrian,

    Everything is OK, just need some more css

    Scale images a little, add opacity and transition.

  4. Adrian,

    Take a look carefully at your code, it should work. Or share your link and I’ll take a look.

  5. Nice to share this. But the css implementation (effect like Traveller) did not worked for me. I added the code in themes/default-bootstrap/css/modules/homeslider/homeslider.css and I had no result.

Post a new comment

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