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 web shop or pretty much any element Sitejet offers and customize your slider and slider behavior 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 a content slider go to Add content > Preset > Features > Content Slider. Then drag it into the right position in your editor (hold [CTRL] to nest it inside a container). You can also double-click the preset to include it after any element that is currently selected. Once you implemented the preset 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 of preset settings when clicking the puzzle icon, e.g. you can adjust the border of each slide and the size of the slider arrow, but most of the settings can be adjusted with JavaScript in the asset manager.

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 implemented at 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:

Variables Value Explanation
autoplay true or false This determines whether the slider is supposed to slide automatically or only when using slider navigation.
arrows true or false This will show or hide the sliders used to navigate the slider.
preArrow & nextArrow They create buttons in the HTML  structure to use for navigation, so leaving them like this works fine in most cases.
speed set in milliseconds 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 milliseconds This determines the pause between each changing slide.
dots 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 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 heights inside the slider. When false, the slider will automatically take the height of the largest slide inside it and not change heights at all when sliding.
fade 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 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.

Variables Value Explanation
slidesToShow natural numbers > 0 Use the value 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 natural numbers > 0 Use the value 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();
Variables Value Explanation
centerMode true or false Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow (3,5,7,etc) for best results.
draggable true or false Enable mouse dragging on desktop. Swiping for mobile devices is active by default.
pauseOnHover 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, sliding 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, on phones we reduce them to 1 and remove the dots. This is how it looks like on all viewports:


Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community.

Back to the top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us