Working with JavaScript Carousel Sliders in Kentico

By: Laura Frese | Link to blog on site

Working with JavaScript carousel sliders like Owl Carousel in Kentico may be challenging depending on how you are attempting to implement it. One less desirable way might be to add the content into editable text regions in the Edit mode of the Pages application. While this may be preferable to Editors since they are able to directly add their content in each box, it could also cause the content to clone and append to the editable region multiple times (separated by commas), depending on how the page template was set up, if the carousel is set to loop.

If the client or editor insists on using this method, one way around it would be to determine if the page is in Edit Mode in Kentico and set the loop to false.

var inKentico = $(“body”).hasClass(“EditMode”); if(inKentico){$(‘#tab-thumbs’).owlCarousel({ loop: false }); } else{ $(‘#tab-thumbs’).owlCarousel();}

Another way to handle looping carousels and avoid all the potential issues is to create a custom page type for the items in your carousel and use a repeater to display the information.

Information on creating page types and displaying data can be found in the Kentico documentation at:

Regardless of the new plugins created to make pages more user friendly and responsive, Kentico is a versatile CMS that gives developers and editors multiple avenues to manage content regardless of the requirements of the plugin.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.