Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
Plugins / Prestashop

CSS3 Slider

— Add-On to

Subscribe to our feed to stay up to date!

New! Follow us as you want it!

CSS3 Slider - CodeCanyon Item for Sale


Ad: Bluehost hosting


CSS3 Slider for Prestashop allows you to create on your homepage a slideshow using latest CSS3 technics.


Installation of the CSS3 Slider module is made by the classic step :
  • In the « Administration => Modules » tab of your shop, add the module from your computer
  • Once done, module will be visible in the « Front-office Features » part under the name « CSS3 Slider ».
  • Click « Install »


Once installed, a new link « CSS3 Slider » appears under the « Modules » tab. Slider configuration page is composed of 2 parts :
  • Creation and management of slides
  • Slider configuration


In this part, you’ll be able to create as many slides as you need. To create a new slide, simply click on the « Add new » button in the upper right corner of the page. Then you must fill in some informations :
  • A title
  • A sub-title
  • An image
You also have the choice to :
  • Add a link for your slide
  • Enable or disable the slide
CSS3 Slider configuration

Once you’ve created your slides, you’ll have the possibility to quickly manage their activation and their position thanks to the table showing your slides list. CSS3 Slider configuration

Trick : Disable all your slides to make the slider desappear from your homepage.


Second part of page allows you to configurate appearance of slideshow.

Begin with the slider configuration :

  • Height and width of the slideshow
  • Background color or image

CSS3 Slider configuration

Trick : leave color and background image empty to have a transparent background.

Continue with navigation configuration :

  • Navigation arrows images
  • Navigation arrows position from top and sides of slider
  • Thumbnails size
  • Thumbnails position from top and right of slider

CSS3 Slider configuration

Finish with design configuration :

  • Image position from top and left of the slider
  • Title width
  • Title position from top and left of the slider
  • Text color and size for title
  • Sub-title width
  • Sub-title position from top and left of the slider
  • Text color and size for sub-title

CSS3 Slider configuration

Module is compatible with every web browser (even Internet Explorer 7), but CSS3 animations only display on good browsers.

Have fun!

Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers


18 April 13

Last Update:
18 April 13

High Resolution:

Compatible Browsers:
IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Files Included:
JavaScript JS, HTML, CSS, PHP

Software Version:
PrestaShop 1.5.4, PrestaShop 1.5.3, PrestaShop 1.5.2, PrestaShop 1.5.1


eCommerce, eCommerce, All Items, css3, customizable, ecommerce, jquery, multi language, prestashop, slider