How to create a carousel?
You can create only one carousel per page. If you try to create multiple carousel, the carousel only topmost in the page is functional.
The function of the carousel is available in the editor (in static pages and articles).
In the editor, insert all the images you want to appear in the carousel.
1 -
For the carousel works, it is imperative that all the images are the same size (in pixels loan)
For our example, we create five images with this size : 400 pixels x 200 pixels
Place the images one over the other.
2 -
Note : the images must be placed in exactly the same location (pixel loan) otherwise the carousel will not work.
For our example we will place the images at the pixel L:130 and the pixel T:20
Note : The first image you will place on the page will be the last image that you will see in the carousel. The last image you will place in the page will be the first that will be seen in the carousel.
For our example, we placed the image number 5 in first, followed by the image number 4, the image number 3, the image number 2 and finally the picture number 1 on top. In this way, in the website, this will be the image number 1 will be the first in the carousel, followed by image number 2, the image number 3, the image number 4 and finally the image number 5 last.
Save your work by clicking the small disk in the editor.
3 -
The following icon will appear on the last image you have placed, confirming that the carousel works.
Go to your site and refresh the page. You can see your carousel.
4 -
Automatically, there are a number of seconds between displaying images, arrows and buttons that have been configured for the carousel but you can change them according to your tastes and needs.
To access the tools to customize the carousel, double-click the first image of the carousel, the tools appear.
Note 1 : The tools to customize the carousel are visible only if the image on which you double-click is in the carousel.
Note 2 : When you make changes and you go to your site to check the result, do not forget to refresh your site to see the changes you've made.
- The number of seconds between the display of the images :
Click in the circle that corresponds to the number of seconds you want there between viewing images. A small black circle will appear, confirming your choice. If you choose number 4, there will be 4 seconds of delay between the display of each image.
- The effect of the display of the images :
For the images are bonded to each other and slide from left to right, choose this option :
For the images are displayed one after the other without slipping, choose this option :
- Insert a link to images of the carousel :
If you want that clicking on an image of your carousel, the customer is redirected to another page, you must :
A ) On each image, enter the link to the page where you want the client to be redirected in the function ''Put the URL or E-mail''.
B ) Then select this option :
If you want that is the next picture that appears when a customer clicks on an image of the carousel, choose this option :
Note : if there is an address listed in the section ''''Put the URL or E-mail'', the customer is redirected to this address if the user clicks on the image. You must delete the address listed in the section ''''Put the URL or E-mail'' for the client see the next image when clicking on an image carousel.
- The order of display of the images on the carousel :
If you want that the images appear in the order that which you have placed on the page, choose this option :
If you want that the images appear randomly without taking into account the order in which you placed the images in the page, choose this option :
- The download icon :
You can choose the color of the icon that appears to mean that the images of the carousel are still downloading. Click in the circle of the color of the download icon that suits you best, a small black circle will appear, confirming your choice.
Here is the result in the site :
If you do not want a download icon, click in the empty circle without an icon, a small black circle will appear, confirming your choice.
- Buttons to change the images of the carousel :
If you do not want buttons to change the display of the images, choose this option :
If you want buttons to change the display of the images, choose this option :
For buttons appear to the left of the carousel, choose this option :
Here is the result in the site :
For buttons appear in the middle of the carousel, choose this option :
Here is the result in the site :
For buttons appear to the right of the carousel, choose this option :
Here is the result in the site :
To determine the location of the buttons, enter a number in the box. You can enter a number between -50 and 500.
Example : You enter the number -20.
Here is the result in the site :
Example : You enter the number 150.
Here is the result in the site :
You can choose the type of button, so click in the circle below the button that suits you best, a small black circle will appear, confirming your choice.
- Arrows to change the images of the carousel :
If you do not want arrows to change the display of the images, choose this option :
If you want arrows to change the display of the images, choose this option :
If you want that the arrows appear at the top of the carousel, choose this option :
Here is the result in the site :
If you want that the arrows appear in the middle of the carousel, choose this option :
Here is the result in the site :
If you want that the arrows appear at the bottom of the carousel, choose this option :
Here is the result in the site :
To determine the location of the arrows, enter a number in the box. You can enter a number between -60 and 60.
Example : You enter the number -30.
Here is the result in the site :
Example : You enter the number 4.
Here is the result in the site :
You can choose the type of arrow, so click in the circle under the arrows that suit you best, a small black circle will appear, confirming your choice.
Why my carousel do not work?
There are three possible reasons :
1 - Your images are not all the same size.
2 - Once you have placed the images one above the other, there are one or more images that are not placed at exactly the same location (pixel loan).
3 - You attempted to insert text or image between the images of the carousel.
The carousel and mobile
The carousel is not visible in the mobile version of your site.
If you want there is still an image that is visible in the mobile version to the place of the carousel, do this :
1 -
Insert image on the page that you want to appear in the mobile version, the image it should be slightly smaller (a few pixels) that the image of your carousel.
Example : images of the carousel is 400 pixels by 200 pixels. The image that you want to appear in the mobile version measuring 399 pixels x 199 pixels
Place the image slightly smaller first. Then place the other images (which are in the carousel) over the smaller image.
2 -
In this way, customers will be in the regular version of your site will see the carousel and customers who are in the mobile version of your site will see the image only slightly smaller (without the carousel).