I recently did some development for the Westminster Abbey website. One of the requirements for this mobile-first site was a carousel view for both mobile and desktop which made use of Bootstrap v3 components carousel and collapse.
Example project available on Github
An example project is available on Github.
First, clone the repo.
$ git clone https://github.com/ducksoupdev/web-content-angularjs.git
Next, install everything that is required.
$ cd web-content-angularjs $ npm install $ bower install
Building the carousel
The home page of the site has a carousel showing a selection of highlighted content. The following is what the site looks like on both mobile and desktop:
The rendered components are collapse (mobile) and carousel (desktop) and are built from the following example markup:
<div class="wa-hero" data-interval="-1"> <section title="Section 1">...</section> <section title="Section 2">...</section> <section title="Section 3">...</section> </div>
The <section> elements are required for the component to work correctly. However, each section can contain any element - images, video, text etc.
An AngularJS directive, named hero, was created to render the same content in both the collapse and carousel components.
The only limitation is that the directive contains a set of section elements.
The markup does not use any AngularJS specific attributes or elements and is SEO-friendly. It also transforms the existing content to fit the view which enhances the web content for a better user experience.