JCEM-Slider is a responsive slider made in pure CSS and opensource, with additional features in pure javascript, without dependencies. .

Features

• Pure CSS (Sass);
• Rolling transition animation;
• Fade transition animation;
• Image display in 3 different modes (standard, fitheight and cover);
• Display with or without thumbnails;
• Enabled for up to 100 images;
• Auto transition with optional pure javascript (client-side);
• Dynamic creation with optional pure javascript (client side);
• Open source under license Mozilla Public License.

Full

"Full" view means that the images will take up the entire width or height of the slide. They exist 3 modes, being the default, in which the image is displayed in its original proportion filling the overall width; the fitheight in which the images are displayed at a predetermined height, and their the width is proportional; and finally the cover mode where the image fills the entire frame, centered vertically and horizontally. In some cases, the difference between the cover is five and eight.

Standard

In this mode the images are shown in their proportional size, width of 100% of the available space and proportional height. For this case, it uses the HTML schema without any modifications. For an example, see the full HTML example.

Fixed height

As already specified, in this model, the image has a fixed height and its width is proportionally sustained. Ideal for large images like this page.

To configure this way it is necessary to add the height property to the div main, keeping it empty and in div.mgs assign the height sub-property of style with the fixed height value, following way.

Cover

In this type of slide, the images are shown in their proportional size, but taking up all the space. frame, centered vertically and horizontally. The only configuration difference in relation to the mode fitheight is that the main div must have the cover class. Everything else is the same, including the definition of the size in the style property.

With Thumbnails

It is also possible to use the same configurations previously informed, but displaying the thumbnail. On that In that case, just add the thumbnail class to the main div.

Standard with Thumbnail

Fixed height with thumbnaila

Cover with Thumbnail

Fade Effect

In any of the above modes it is possible to opt for the fade transition, just add the classse fade to the main div.

Navigator position

It is possible to display the navigation bubbles at the top by adding the topnav class to the div main.

Side Thumbnails

It is possible to display the thumbnails laterally, just apply the leftnav or righttnav class to the main div.

Important: In this case, the height sub-property of style is NOT must be placed in the .mgs element, but in the main div element.

Side text with or without thumbnails

Automatic Sliding with Javascript

Along with the package, a small and pure javascript is included, which allows automatic scrolling of the images. To activate it, just include the javascript and add the js property to the div

It is also possible to specify in the js property the milliseconds of the image transition, simply putting some numerical value, with the example below:

<div js='3000' data-slider='slider5' class='jcemslider cover' height>

It is also possible to launch a slider manually via javascript, including specifying the duration of the slider. transition, according to the following code:

jcemslider(document.querySelectorAll('div.jcemslider[data-slider][js]'), 3000);

HTML

With rare exceptions, the settings are defined in the main div.

<div class="jcemslider" data-slider="jcemlider_uid">

Only when you want to fix the maximum height (skin, cover or fitheight mode...) is it necessary to specify the size in the .mgs element.

<div class='mgs' style='height: 15rem !important;'>

Summary HTML structure:

Structural skeleton

<div class="jcemslider" data-slider="jcemlider_uid">
  <!-- navigation balls -->
  ...
  <div class="mgs">
    <!-- Items/Images -->
    ...
  </div>
  <nav class="pvnt">
    <!-- "Previous" and "next" navigation arrow. -->
    ...
  </nav>
  <nav class="seletor">
    <!-- Thumbnails -->
    ...
  </nav>
</div>
              

Example of navigation balls

<input ndc='0' id='input_id_0' type="radio" class="sldtxt" name="jcemslider_uid" checked="">
...
<input ndc='4' id='input_id_4' type="radio" class="sldtxt" name="jcemslider_uid">
              

Sample items/pictures. Note that it is possible to have no images, however the IMG tag must be retained.

<a ndc="0" class="qdr">
  <div class='mgi' style="background-image: url('uri/to/image') !important;">
    <img src='uri/to/image'> />
  </div>
  <div class='cnt'>
    <div class='ttl'>My Photo 1
    </div>
    <div class='text'>This text 1.
    </div>
  </div>
</a>
...
              

Sample code for "previous" and "next" navigation. Note that the number of browsers must equal the number of items.

<label ndc='0' for='input_id_0' class="pvnt fas"></label>
...
<label ndc='4' for='input_id_4' class="pvnt fas"></label>
              

Sample code for the thumbnail browser. Note that the number of browsers must equal the number of items.

<label ndc='0' for='input_id_0' style="background-image: url('uri/to/image');">
  <img src='uri/to/image'>
</label>
...
<label ndc='4' for='input_id_4' style="background-image: url('uri/to/image');">
	<img src='uri/to/image'>
</label>
              

Full HTML example