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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  5. Run your code and you should see your carousel

Any question/comment/review, post below 🙂

Submit your review
1
2
3
4
5
Submit
     
Cancel

Create your own review

Average rating:  
 0 reviews

Add a Comment

Your email address will not be published. Required fields are marked *