Elements - Content Slider

Next to our slider element and sliders as background for containers you can also use our Content sliders preset, which allows you to animate more than just images in a carousel. Easily slide texts, videos, graphics, even your webshop or pretty much any element Sitejet offers and customze your slider and slider behaviour with just a couple lines of Javascript.

But do not worry about breaking anything, this article will show you exactly where to find content sliders, what to look for in your Javascript editor and what to change, add or remove to acquire the desired results.

Add your content slider

To add your content slider go to Add content > Preset > Features > Content Slider. Then drag it into your editor (hold [CTRL] to place it inside a container). You can also double-click the preset to include it after any element that is currently selected. Once you integrated the preste into the editor you will see the following structure:

To make editing the slider easier each slide is put beneath each other. The orange borders are only visible in your editor and distinguish each slide from another. A little label also shows you the number of each slide and the general order. There are a couple preset settings when clicking the puzzle icon, to adjust border of each slide and the size of the slider arrow. But most settings can be adjusted in Javascript.

Where to search in Javascript

To access all the options of our content slider we will have to visit the Javascript editor. Find it under the Code button on the top right of your CMS or press [CTRL + ALT + J]. An easy way to find any part of the code is to press [CTRL + F] to open a search bar. Enter "content slider" and it should automatically jump to wherever the code has been produced (it was integrated the moment the preset has been dragged into the CMS editor, usually near the bottom of the JS code). If you cannot find such a code block perhaps your content slider preset wasn't inserted properly. This is how it should look like by default:

The options you already have

Let's have a look at what is already part of the code block. Don't mind the first couple lines. Important are the variables inside the function, from autoplay to fade. These are settings usually also found inside your regular slider elements. Let's explain each one in detail:

  • autoplay: can be set to true or false. This determines whether the slider is supposed to slide automatically or only when using slider navigation.
  • arrows:  can be set to true or false. This will show or hide the sliders used to navigate the slider.
  • preArrow & nextArrow: you can ignore these values. They create buttons in the HTML  structure to use for navigation, so leaving them like this works fine in most cases.
  • speed: set in miliseconds. This determines the duration of each changing slide. The bigger the number, the longer it takes to transition from one slide to the next.
  • autoplaySpeed: set in miliseconds. This determines the pause between each changing slide.
  • dots:  can be set to true or false. Another way to navigate your slider are dots that show which slide you are currently on. These will be shown beneath the slider by default.
  • adaptiveHeight:  can be set to true or false. When true, the height of the slider will always change according to the height of its contents. This means any content coming after the slider will be moved up and down, should there be several different heights inside the slider. When false, the slider will automatically take the height of the largest slide inside of it and not change heights at all when sliding.
  • fade:  can be set to true or false. This will determine whether the slider slides from right to left or fades out the old slide and fades in the new one.

Note how each variable and its value are separated by a comma at the end, except for the very last one. When adding or removing variables it's important to keep this structure. Don't place variables outside of this function either.

Adding more variables for more functionality

Our sliders are all based on the slick library on github. Here you can find many examples to create the perfect slider for you. This can be daunting at first, so we pick some useful new variables that you might like.

  • slidesToShow: use positive natural numbers bigger than 0 to determine how many slides should be visible at all times. Depending on the size of its contents an amount from 1 to 6 is recommended.
  • slidesToScroll: use positive natural numbers bigger than 0 to determine how many slides should slide at the same time. E.g. showing 2 slides and scrolling 2 slides will replace all slides at once.

Code: 

viewport.promise('api.slick.ready', function() {
		viewport.jQuery('.content-slider-wrap > .inner').slick({
			arrows: true,
			prevArrow: '<button type="button" data-role="none" class="slick-prev" tabindex="0" role="button"></button>',
			nextArrow: '<button type="button" data-role="none" class="slick-next" tabindex="0" role="button"></button>',
			speed: 300,
			dots: true,
			adaptiveHeight: true,
			infinite: true,
			slidesToShow: 2,
			slidesToScroll: 2

		});
	}).requireSlick();
  • centerMode: can be set to true or false. Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow (3,5,7,etc) for best results.
  • draggable: can be set to true or false. Enable mouse dragging on desktop. Swiping for mobile devices is active by default.
  • pauseOnHover: can be set to true or false. Pause Autoplay on hover (needs autoplay to be set to true)
  • lazyLoad: determines whether images should only load when sliding into sight. Can be set to ondemand (load only when visible) or progressive (load on slider initialization)
  • responsive: this determines breakpoints on which the slider needs to behave differently (most commonly: show one instead of more slides simultaneously)

Example code:

viewport.promise('api.slick.ready', function() {
		viewport.jQuery('.content-slider-wrap > .inner').slick({
			arrows: true,
			prevArrow: '<button type="button" data-role="none" class="slick-prev" tabindex="0" role="button"></button>',
			nextArrow: '<button type="button" data-role="none" class="slick-next" tabindex="0" role="button"></button>',
			speed: 300,
			dots: true,
			adaptiveHeight: true,
			infinite: true,
			slidesToShow: 3,
			slidesToScroll: 1,
			responsive: [{
					breakpoint: 1024,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 1,
						arrows: false
					}
				}, {
					breakpoint: 767,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1,
						arrows: false,
						dots: false
					}
				}
				// You can unslick at a given breakpoint now by adding:
				// settings: "unslick"
				// instead of a settings object
			]
		});
	}).requireSlick();

This code will generate a slider with dots and arrows to navigate the slider and puts 3 slides next to each other, slinding one item at the time and starting over from slide 1 once we reached the last slide. Adaptive height will adjust the height of the slider to the contents (with multiple slides it will keep the height of the biggest slide). The responsive settings are triggering at the respective viewports for tablets (1024px) and phones (767px). On tablets we reduce the simultaneous slides to 2 and remove the arrows as well., one phones we reduce them to 1 and remove the dots. This is how it looks like on all viewports:

Still need help? Contact Us Contact Us