Creating a Bootstrap Carousel in DXM

Crownpeak (Retired)
0 0 3,128

Creating a Bootstrap Carousel

The first thing to do is to create a new template.  

  • Navigate to your template location (folder) in the CMS and File -> New Template.
  • Give your template a suitable name and open the input.aspx.  You will create the data model first.
  • Add the following to your input.aspx.


    //Page Carousel
    ShowAcquireParams imgParams = new ShowAcquireParams();
    imgParams.ShowBrowse = true;
    imgParams.ShowUpload = true;
    imgParams.Extensions = Util.MakeList("jpg", "jpeg", "gif", "png");
    Input.ShowHeader("Carousel Images");
    Input.ShowAcquireImage("Image 1", "page_carousel_1", imgParams);
    Input.ShowAcquireImage("Image 2", "page_carousel_2", imgParams);
    Input.ShowAcquireImage("Image 3", "page_carousel_3", imgParams);


  • Save the input.aspx.
  • Open the output.aspx.
  • Add your HTML to render the images that will later be selected by a Content Editor.


<link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  <!-- The slideshow -->
  <div class="carousel-inner" style="text-align:center">
    <div class="carousel-item active">
      <img src='<%= asset["page_carousel_1"]%>' alt="Carousel Image" width="1100" height="500">
    <div class="carousel-item">
      <img src='<%= asset["page_carousel_2"]%>' alt="Carousel Image" width="1100" height="500">
    <div class="carousel-item">
      <img src='<%= asset["page_carousel_3"]%>' alt="Carousel Image" width="1100" height="500">
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>


  • Save the output.aspx.
  • Now navigate to a suitable place in your Site to create an asset that will use this template.  File -> New -> File.

Screenshot 46.png

  • Open your new asset 'My Carousel' and select Form editing mode.  Add your images, as shown below:

Screenshot 47.png

  • Save the asset and select Preview mode.

Screenshot 48.png

  • You now have a Carousel.


You can add the above example to any template where you want to allow editors to create (add images) to a page (asset) to have a unique carousel!

You could also create the above as a fixed Widget that will append a centrally managed carousel on any asset that uses it.

Widget (asset that will be re-used) example:


  Asset myCarousel = Asset.Load("/Path_to_your_carousel_asset/My Carousel");
  string showCarousel = myCarousel.Show();
<!-- Show carousel widget -->
<%= showCarousel %>


You could also create the above as a Component and allow your editors to add a carousel to any page (asset) through Drag & Drop.

Tags (3)
Version history
Last update:
‎04-08-2020 03:31 AM
Updated by: