CERN Accelerating science

Close menu

Slider

Components - MULTIMEDIA

A slider is used to let the user navigate through different pictures or media content. In the use of presenting  1 picture at a time, the slider is visualized as 2 arrows on the right and left side of the picture. In order to navigate through blocks that consist out of different pictures or media content, the slider has 3 circles and is placed under the media. 

Usage

CERN provided Drupal 8 sites:

  • Install and enable the Slider module and all its dependencies under Extend
  • After installing you can add sliders on all content types which use Paragraph components like the Landing Page
  • To create a slider just choose Slider from the Paragraph chooser (if there is one) and define your slides
  • Each slide consists out of an image, video or CDS reference
  • You can add multiple slides with the below button "Add Slide"
  • You can remove slides with clicking on the "Remove" button on each slide's top right corner
  • After defining the slides just click on save and your slider is done

Other:

  • Just include the HTML snippet provided below
  • If you're experienced with HTML and CSS you even can customise it further!

Slider COMPONENT

<div id="slider" class="component-slider">
<div id="slider" class="component-slider owl-carousel owl-theme slider-carousel owl-loaded owl-drag">

<div class="component-slide">
<div class="header-block__image">
<img src="images/1900_1380_07.jpg" width="1900" height="1380" alt="alt" typeof="foaf:Image">
</div>
<div class="component-slide__caption">
<p>Soluta anim facilisis mollitia eligendi integer modi facilis sapiente, primis. Nobis? Incididunt montes porttitor, ultricies nec aliquet doloribus, cubilia, autem! Veniam anim, do facilis volutpat, phasellus, inventore, rutrum ullam voluptate exercitationem quo condimentum eleifend minim maecenas?&nbsp;</p>
</div>
</div>

<div class="component-slide">
<div class="header-block__video">
<video controls="" autoplay="" loop="" width="100%" height="100%">
<source src="images/video-splash.mp4" type="video/mp4; length=12026730">
</video>
</div>
<div class="component-slide__caption"></div>
</div>

<div class="component-slide">
<div class="header-block__image">
<img src="images/1900_1380_10.jpg" width="1900" height="1380" alt="alt" typeof="foaf:Image">
</div>
<div class="component-slide__caption"></div>
</div>

<div class="component-slide">
<div class="header-block__image">
<img src="images/1900_1380_20.jpg" width="1900" height="1380" alt="alt" typeof="foaf:Image">
</div>
<div class="component-slide__caption"></div>
</div>

</div>
</div>
Show more code
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Source+Sans+Pro:400,600,700");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
/* ****************************************** component slide */
.component-slide {
width: 80%;
margin: 0 auto; }
.component-slide .component-slide__caption {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
margin-top: 11px; }

@media only screen and (max-width: 480px) {
.component-slide {
width: 70%; } }

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Simple-Line-Icons';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-user-female, .icon-user-follow, .icon-user-following, .icon-user-unfollow, .icon-trophy, .icon-screen-smartphone, .icon-screen-desktop, .icon-plane, .icon-notebook, .icon-moustache, .icon-mouse, .icon-magnet, .icon-energy, .icon-emoticon-smile, .icon-disc, .icon-cursor-move, .icon-crop, .icon-credit-card, .icon-chemistry, .icon-user, .icon-speedometer, .icon-social-youtube, .icon-social-twitter, .icon-social-tumblr, .icon-social-facebook, .icon-social-dropbox, .icon-social-dribbble, .icon-shield, .icon-screen-tablet, .icon-magic-wand, .icon-hourglass, .icon-graduation, .icon-ghost, .icon-game-controller, .icon-fire, .icon-eyeglasses, .icon-envelope-open, .icon-envelope-letter, .icon-bell, .icon-badge, .icon-anchor, .icon-wallet, .icon-vector, .icon-speech, .icon-puzzle, .icon-printer, .icon-present, .icon-playlist, .icon-pin, .icon-picture, .icon-map, .icon-layers, .icon-handbag, .icon-globe-alt, .icon-globe, .icon-frame, .icon-folder-alt, .icon-film, .icon-feed, .icon-earphones-alt, .icon-earphones, .icon-drop, .icon-drawer, .icon-docs, .icon-directions, .icon-direction, .icon-diamond, .icon-cup, .icon-compass, .icon-call-out, .icon-call-in, .icon-call-end, .icon-calculator, .icon-bubbles, .icon-briefcase, .icon-book-open, .icon-basket-loaded, .icon-basket, .icon-bag, .icon-action-undo, .icon-action-redo, .icon-wrench, .icon-umbrella, .icon-trash, .icon-tag, .icon-support, .icon-size-fullscreen, .icon-size-actual, .icon-shuffle, .icon-share-alt, .icon-share, .icon-rocket, .icon-question, .icon-pie-chart, .icon-pencil, .icon-note, .icon-music-tone-alt, .icon-music-tone, .icon-microphone, .icon-loop, .icon-logout, .icon-login, .icon-list, .icon-like, .icon-home, .icon-grid, .icon-graph, .icon-equalizer, .icon-dislike, .icon-cursor, .icon-control-start, .icon-control-rewind, .icon-control-play, .icon-control-pause, .icon-control-forward, .icon-control-end, .icon-calendar, .icon-bulb, .icon-bar-chart, .icon-arrow-up, .icon-arrow-right, .icon-arrow-left, .icon-arrow-down, .icon-ban, .icon-bubble, .icon-camcorder, .icon-camera, .icon-check, .icon-clock, .icon-close, .icon-cloud-download, .icon-cloud-upload, .icon-doc, .icon-envelope, .icon-eye, .icon-flag, .icon-folder, .icon-heart, .icon-info, .icon-key, .icon-link, .icon-lock, .icon-lock-open, .icon-magnifier, .icon-magnifier-add, .icon-magnifier-remove, .icon-paper-clip, .icon-paper-plane, .icon-plus, .icon-pointer, .icon-power, .icon-refresh, .icon-reload, .icon-settings, .icon-star, .icon-symbol-female, .icon-symbol-male, .icon-target, .icon-volume-1, .icon-volume-2, .icon-volume-off, .icon-users {
font-family: 'Simple-Line-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased; }

.icon-user-female:before {
content: "\e000"; }

.icon-user-follow:before {
content: "\e002"; }

.icon-user-following:before {
content: "\e003"; }

.icon-user-unfollow:before {
content: "\e004"; }

.icon-trophy:before {
content: "\e006"; }

.icon-screen-smartphone:before {
content: "\e010"; }

.icon-screen-desktop:before {
content: "\e011"; }

.icon-plane:before {
content: "\e012"; }

.icon-notebook:before {
content: "\e013"; }

.icon-moustache:before {
content: "\e014"; }

.icon-mouse:before {
content: "\e015"; }

.icon-magnet:before {
content: "\e016"; }

.icon-energy:before {
content: "\e020"; }

.icon-emoticon-smile:before {
content: "\e021"; }

.icon-disc:before {
content: "\e022"; }

.icon-cursor-move:before {
content: "\e023"; }

.icon-crop:before {
content: "\e024"; }

.icon-credit-card:before {
content: "\e025"; }

.icon-chemistry:before {
content: "\e026"; }

.icon-user:before {
content: "\e005"; }

.icon-speedometer:before {
content: "\e007"; }

.icon-social-youtube:before {
content: "\e008"; }

.icon-social-twitter:before {
content: "\e009"; }

.icon-social-tumblr:before {
content: "\e00a"; }

.icon-social-facebook:before {
content: "\e00b"; }

.icon-social-dropbox:before {
content: "\e00c"; }

.icon-social-dribbble:before {
content: "\e00d"; }

.icon-shield:before {
content: "\e00e"; }

.icon-screen-tablet:before {
content: "\e00f"; }

.icon-magic-wand:before {
content: "\e017"; }

.icon-hourglass:before {
content: "\e018"; }

.icon-graduation:before {
content: "\e019"; }

.icon-ghost:before {
content: "\e01a"; }

.icon-game-controller:before {
content: "\e01b"; }

.icon-fire:before {
content: "\e01c"; }

.icon-eyeglasses:before {
content: "\e01d"; }

.icon-envelope-open:before {
content: "\e01e"; }

.icon-envelope-letter:before {
content: "\e01f"; }

.icon-bell:before {
content: "\e027"; }

.icon-badge:before {
content: "\e028"; }

.icon-anchor:before {
content: "\e029"; }

.icon-wallet:before {
content: "\e02a"; }

.icon-vector:before {
content: "\e02b"; }

.icon-speech:before {
content: "\e02c"; }

.icon-puzzle:before {
content: "\e02d"; }

.icon-printer:before {
content: "\e02e"; }

.icon-present:before {
content: "\e02f"; }

.icon-playlist:before {
content: "\e030"; }

.icon-pin:before {
content: "\e031"; }

.icon-picture:before {
content: "\e032"; }

.icon-map:before {
content: "\e033"; }

.icon-layers:before {
content: "\e034"; }

.icon-handbag:before {
content: "\e035"; }

.icon-globe-alt:before {
content: "\e036"; }

.icon-globe:before {
content: "\e037"; }

.icon-frame:before {
content: "\e038"; }

.icon-folder-alt:before {
content: "\e039"; }

.icon-film:before {
content: "\e03a"; }

.icon-feed:before {
content: "\e03b"; }

.icon-earphones-alt:before {
content: "\e03c"; }

.icon-earphones:before {
content: "\e03d"; }

.icon-drop:before {
content: "\e03e"; }

.icon-drawer:before {
content: "\e03f"; }

.icon-docs:before {
content: "\e040"; }

.icon-directions:before {
content: "\e041"; }

.icon-direction:before {
content: "\e042"; }

.icon-diamond:before {
content: "\e043"; }

.icon-cup:before {
content: "\e044"; }

.icon-compass:before {
content: "\e045"; }

.icon-call-out:before {
content: "\e046"; }

.icon-call-in:before {
content: "\e047"; }

.icon-call-end:before {
content: "\e048"; }

.icon-calculator:before {
content: "\e049"; }

.icon-bubbles:before {
content: "\e04a"; }

.icon-briefcase:before {
content: "\e04b"; }

.icon-book-open:before {
content: "\e04c"; }

.icon-basket-loaded:before {
content: "\e04d"; }

.icon-basket:before {
content: "\e04e"; }

.icon-bag:before {
content: "\e04f"; }

.icon-action-undo:before {
content: "\e050"; }

.icon-action-redo:before {
content: "\e051"; }

.icon-wrench:before {
content: "\e052"; }

.icon-umbrella:before {
content: "\e053"; }

.icon-trash:before {
content: "\e054"; }

.icon-tag:before {
content: "\e055"; }

.icon-support:before {
content: "\e056"; }

.icon-size-fullscreen:before {
content: "\e057"; }

.icon-size-actual:before {
content: "\e058"; }

.icon-shuffle:before {
content: "\e059"; }

.icon-share-alt:before {
content: "\e05a"; }

.icon-share:before {
content: "\e05b"; }

.icon-rocket:before {
content: "\e05c"; }

.icon-question:before {
content: "\e05d"; }

.icon-pie-chart:before {
content: "\e05e"; }

.icon-pencil:before {
content: "\e05f"; }

.icon-note:before {
content: "\e060"; }

.icon-music-tone-alt:before {
content: "\e061"; }

.icon-music-tone:before {
content: "\e062"; }

.icon-microphone:before {
content: "\e063"; }

.icon-loop:before {
content: "\e064"; }

.icon-logout:before {
content: "\e065"; }

.icon-login:before {
content: "\e066"; }

.icon-list:before {
content: "\e067"; }

.icon-like:before {
content: "\e068"; }

.icon-home:before {
content: "\e069"; }

.icon-grid:before {
content: "\e06a"; }

.icon-graph:before {
content: "\e06b"; }

.icon-equalizer:before {
content: "\e06c"; }

.icon-dislike:before {
content: "\e06d"; }

.icon-cursor:before {
content: "\e06e"; }

.icon-control-start:before {
content: "\e06f"; }

.icon-control-rewind:before {
content: "\e070"; }

.icon-control-play:before {
content: "\e071"; }

.icon-control-pause:before {
content: "\e072"; }

.icon-control-forward:before {
content: "\e073"; }

.icon-control-end:before {
content: "\e074"; }

.icon-calendar:before {
content: "\e075"; }

.icon-bulb:before {
content: "\e076"; }

.icon-bar-chart:before {
content: "\e077"; }

.icon-arrow-up:before {
content: "\e078"; }

.icon-arrow-right:before {
content: "\e079"; }

.icon-arrow-left:before {
content: "\e07a"; }

.icon-arrow-down:before {
content: "\e07b"; }

.icon-ban:before {
content: "\e07c"; }

.icon-bubble:before {
content: "\e07d"; }

.icon-camcorder:before {
content: "\e07e"; }

.icon-camera:before {
content: "\e07f"; }

.icon-check:before {
content: "\e080"; }

.icon-clock:before {
content: "\e081"; }

.icon-close:before {
content: "\e082"; }

.icon-cloud-download:before {
content: "\e083"; }

.icon-cloud-upload:before {
content: "\e084"; }

.icon-doc:before {
content: "\e085"; }

.icon-envelope:before {
content: "\e086"; }

.icon-eye:before {
content: "\e087"; }

.icon-flag:before {
content: "\e088"; }

.icon-folder:before {
content: "\e089"; }

.icon-heart:before {
content: "\e08a"; }

.icon-info:before {
content: "\e08b"; }

.icon-key:before {
content: "\e08c"; }

.icon-link:before {
content: "\e08d"; }

.icon-lock:before {
content: "\e08e"; }

.icon-lock-open:before {
content: "\e08f"; }

.icon-magnifier:before {
content: "\e090"; }

.icon-magnifier-add:before {
content: "\e091"; }

.icon-magnifier-remove:before {
content: "\e092"; }

.icon-paper-clip:before {
content: "\e093"; }

.icon-paper-plane:before {
content: "\e094"; }

.icon-plus:before {
content: "\e095"; }

.icon-pointer:before {
content: "\e096"; }

.icon-power:before {
content: "\e097"; }

.icon-refresh:before {
content: "\e098"; }

.icon-reload:before {
content: "\e099"; }

.icon-settings:before {
content: "\e09a"; }

.icon-star:before {
content: "\e09b"; }

.icon-symbol-female:before {
content: "\e09c"; }

.icon-symbol-male:before {
content: "\e09d"; }

.icon-target:before {
content: "\e09e"; }

.icon-volume-1:before {
content: "\e09f"; }

.icon-volume-2:before {
content: "\e0a0"; }

.icon-volume-off:before {
content: "\e0a1"; }

.icon-users:before {
content: "\e001"; }

/* ****************************************** component slide */
.component-slider {
position: relative;
display: block; }
.component-slider .owl-nav .owl-prev,
.component-slider .owl-nav .owl-next {
height: auto;
position: absolute;
top: 50%;
font-family: 'Simple-Line-Icons';
background: transparent;
color: #0855a0;
font-size: 30px; }
.component-slider .owl-nav .owl-prev:hover,
.component-slider .owl-nav .owl-next:hover {
background: transparent;
color: #0855a0; }
.component-slider .owl-nav .owl-prev.disabled,
.component-slider .owl-nav .owl-next.disabled {
background: transparent;
color: #bebebe; }
.component-slider .owl-nav .owl-prev {
left: 0; }
.component-slider .owl-nav .owl-next {
right: 0; }
Show more code
The zip file contains the orginal SCSS files
$(document).ready(function() {
$(".slider-carousel").owlCarousel({
nav: true,
items: 1,
loop: false,
dots: false,
});
$( ".slider-carousel .owl-prev").html('<i class="icon-arrow-left icons"></i>');
$( ".slider-carousel .owl-next").html('<i class="icon-arrow-right icons"></i>');
})
Show more code

Copy/paste the provided HTML code into your site. For adding slides you need to create a complete div element with the corresponding classes applied.

For images the div under it should implement the class "header-block__image" and for videos it should implement "header-block__video". In this div you can implement your media like it is shown in the example.