Creating a Bootstrap Carousel in DXM

[RichardHamlyn]

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="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></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>
  </ul>
  <!-- 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>
    <div class="carousel-item">
      <img src='<%= asset["page_carousel_2"]%>' alt="Carousel Image" width="1100" height="500">
    </div>
    <div class="carousel-item">
      <img src='<%= asset["page_carousel_3"]%>' alt="Carousel Image" width="1100" height="500">
    </div>
  </div>
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

• 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.

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

• Save the asset and select Preview mode.

• You now have a Carousel.

Notes:

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.