Watch the Live Coding Video

Watch on YouTube

Create a partial view called _PrevNext

@inherits UmbracoViewPage

@{
   IPublishedContent parent = Umbraco.AssignedContentItem.Parent;
   IEnumerable<IPublishedContent> children = parent.Children;
   List<int> childrenIds = children.Select(x => x.Id).ToList();
   int currentIndex = childrenIds.IndexOf(Umbraco.AssignedContentItem.Id);

   IPublishedContent prev = null;
   IPublishedContent next = null;

   if (currentIndex > 0)
   {
       prev = children.ElementAt(currentIndex - 1);
   }

   if (currentIndex < (children.Count() - 1))
   {
       next = children.ElementAt(currentIndex + 1);
   }
}

<div class="row">
   <div class="col-xs-6">
       @if (prev != null)
       {
           <a class="prevnext prev" title="@prev.Name" href="@prev.Url"><i class="fa fa-arrow-left"></i> Prev</a>
       }
    </div>
    <div class="col-xs-6">
       @if (next != null)
       {
           <a class="prevnext next" title="@next.Name" href="@next.Url">Next <i class="fa fa-arrow-right"></i></a>
       }
    </div>
</div>

To call it from a template use this

@{ Html.RenderPartial("_PrevNext"); }

Here are the style rules I created

.prevnext {
   display: block;
   background: red;
   color: #fff;
   min-width: 100px;
   text-align: center;
   padding: 15px;
   border-radius: 10px;
   -webkit-box-shadow: 2px 2px 20px 2px #4F4F4F;
   box-shadow: 2px 2px 20px 2px #4F4F4F;
}

.prevnext.prev {
   float:left;
   margin-left: 20px;
}

.prevnext.next {
   float:right;
   margin-right: 20px;
}