.. index:: Blocks; Image-slider

####################
Blocks, Image Slider
####################
There are two types of image sliders.

* `supermint-simple <./05d-blocks-image-slider.html#id1>`_
  - a manual slide show controlled by the user with a choice of transitions.
  
* `supermint-slider <./05d-blocks-image-slider.html#id2>`_
  - an automatic slide show with many options
  
Adding a slider block
=====================
1. Reference the concrete5 
   `add a block <https://documentation.concrete5.org/editors/in-page-editing/block-areas/add-block>`_ 
   documentation.  In the **Multimedia** section choose the **Image slider**
   block.
   
2. Drag and drop the block into the intended area.

.. image:: ./figures/blocks_image_slider/blocks-image-slider-add.jpg


Edit Sliders Custom Template
============================
1. Reference the concrete5
   `in page editing <https://documentation.concrete5.org/editors/in-page-editing>`_
   documentation.
2. Click on the slider block to begin editing.

.. image:: ./figures/blocks_image_slider/blocks-image-slider-edit-block-menu.jpg

3. Choose the **Design and Custom Template** option in the pop up menu.

-----

4. Then choose the **gear** icon in the edit menu bar.

.. image:: ./figures/blocks_image_slider/blocks-image-slider-edit-block-menu2.jpg

-----

5. In **Custom Template** there are two sliders that can be selected.

* supermint-simple
* supermint-slider

.. image:: ./figures/blocks_image_slider/blocks-image-slider-edit-block-menu3.jpg

6. The design of the image-slider is made to be displayed in full width. If the
   block is inserted into a small Area, like columns, the custom class
   **into-columns** must be applied on the block.

-----

7. The Supermint options can be selected in the dashboard. Click on **Sliders**.

.. image:: ./figures/blocks_image_slider/concrete5-dashboard-theme-supermint-options2.jpg

-----

8. See the theme dashboard.

.. image:: ./figures/blocks_image_slider/blocks-image-slider-simple-theme-dashboard.jpg

Supermint Simple
----------------
A manual slide show controlled by the user with one admininstrative option
**Image Slider Transition**.  



Supermint Slider
----------------
An automatic or manual slide show with many options.

.. image:: ./figures/blocks_image_slider/blocks-image-slider-theme-dashboard.jpg

-----

Original reference: web.archive.org 
`page <https://web.archive.org/web/20180403193123/http://supermint3.myconcretelab.com:80/index.php/blocks/image-slider>`_