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
    		Name = "Carousel Items",
    		GroupName = SystemTabNames.Content,
    		Order = 1)]
    	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
    		Name = "Background Image",
    		GroupName = SystemTabNames.Content,
    		Order = 1)]
    	public virtual ContentReference BackgroundImage { get; set; }
    		Name = "Title",
    		GroupName = SystemTabNames.Content,
    		Order = 2)]
    	public virtual string Title { get; set; }
    		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> 
          <div class="carousel-inner">
             @foreach (var carouselItem in Model.Items.FilteredItems)
                var block = contentRepository.Get<CarouselBlockItem>(carouselItem.ContentLink);
                @Html.DisplayFor(m => block)
          <a class="carousel-control-prev" href="#demo-carousel" data-slide="prev">
             <span class="carousel-control-prev-icon"></span> 
          <a class="carousel-control-next" href="#demo-carousel" data-slide="next"> 
             <span class="carousel-control-next-icon"></span>
  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">
    /* Make the image fully responsive */
    	.carousel-inner img {
    		width: 100%;
    		height: 100%;
  5. Run your code and you should see your carousel

Any question/comment/review, post below 🙂

%d bloggers like this: