Episerver Carousel using Bootstrap 4

In this post, I will show you how to implement a carousel in Episerver with Bootstrap. Check out demo here first.

1. Create the carousel block

   The carousel model can be as simple as a container of all carousel items. So in our implementation, we only have one property to our carousel:

   [ContentType(DisplayName = "Carousel Block", 
   	GUID = "419a365c-d6dc-4258-a777-294973fd4580", 
   	Description = "Used to display a Carousel")]
   public class CarouselBlock : BlockData
   {
   	[Display(
   		Name = "Carousel Items",
   		GroupName = SystemTabNames.Content,
   		Order = 1)]
   	[AllowedTypes(typeof(CarouselBlockItem))]
   	public virtual ContentArea Items { get; set; }
   }

2. Create the carousel item block

   This will represent the single carousel item in the slider which consists of the following:

   • Background Image
   • Title
   • Subtitle

   [ContentType(DisplayName = "Carousel Block Item", 
   	GUID = "3afed2b7-c199-4504-a940-1096f14dac80", 
   	Description = "Used to represent a single item in a Carousel")]
   [AvailableContentTypes(Availability.Specific, IncludeOn = new []{ typeof(CarouselBlock) })]
   public class CarouselBlockItem : BlockData
   {
   	[Display(
   		Name = "Background Image",
   		GroupName = SystemTabNames.Content,
   		Order = 1)]
   	[UIHint(UIHint.Image)]
   	public virtual ContentReference BackgroundImage { get; set; }
   
   	[CultureSpecific]
   	[Display(
   		Name = "Title",
   		GroupName = SystemTabNames.Content,
   		Order = 2)]
   	public virtual string Title { get; set; }
   
   	[CultureSpecific]
   	[Display(
   		Name = "Subtitle",
   		GroupName = SystemTabNames.Content,
   		Order = 3)]
   	public virtual string Subtitle { get; set; }
   }

3. Implement the view

   Now it’s time to take the Bootstrap markup of a carousel. If you have your own markup, you will need to then hookup the new blocks from step 1 to your own view. Sample below:

   @using EpiserverTutorials.Models.Blocks
   @using EPiServer
   @using EPiServer.ServiceLocation
   @model CarouselBlock
   	
   @{
      var isCarouselNotEmpty = Model.Items != null && Model.FilteredItems.Any();
      var contentRepository = ServiceLocator.Current.GetInstance<IContentRepository>();
   }
   	
   <div id="demo-carousel" class="carousel slide" data-ride="carousel" @Html.EditAttributes(m => m.Items)>
      @if (isCarouselNotEmpty)
      {
         <ul class="carousel-indicators">
            <li data-target="#demo-carousel" data-slide-to="0" class="active"></li> 
            @for (var i = 1; i < Model.Items.FilteredItems.Count(); i++) 
            { 
               <li data-target="#demo-carousel" data-slide-to="@i"></li> 
            } 
         </ul> 
         <div class="carousel-inner">
            @foreach (var carouselItem in Model.Items.FilteredItems)
            {
               var block = contentRepository.Get<CarouselBlockItem>(carouselItem.ContentLink);
               @Html.DisplayFor(m => block)
            }
         </div>
         <a class="carousel-control-prev" href="#demo-carousel" data-slide="prev">
            <span class="carousel-control-prev-icon"></span> 
         </a> 
         <a class="carousel-control-next" href="#demo-carousel" data-slide="next"> 
            <span class="carousel-control-next-icon"></span>
         </a>
      }	
   </div>

4. Make sure to add the CSS/JS

   Don’t forget to add the following CSS/JS if you are relying on Bootstrap’s carousel

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <style>
   /* Make the image fully responsive */
   	.carousel-inner img {
   		width: 100%;
   		height: 100%;
   	}
   </style>
   https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
   https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js
   https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js

5. Run your code and you should see your carousel

Any question/comment/review, post below 🙂