Creative Slider Modification in Prestashop 1.6

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:

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

That’s it.



7 comments

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

  2. Adrian,

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

  3. Adrian,

    Everything is OK, just need some more css

    Scale images a little, add opacity and transition.

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

Post a new comment

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