Make changes to new carousel

[TimOsahenru]

Make changes to the new carousel feature based on the conversation in this PR #544

TODOS:

• Only show the blog posts that are in recent posts. This also means that we can de-emphasize that section and make it smaller. #580
• The circle image makes it hard to see some images, it may be better as a full width image [more ...]
• With the new featured image setup, we should be able to use that for articles with
• Make carousel 100% [more ...] #579
• Auto generate post descriptions #556
• The section is margined inside the container making it smaller than the content near it. We can fix that by changing the width of the container from 85% to 100%
• The default image seems to be a little buggy. Instead of giving the default image it like creates an image of the raw content... we can fix this by removing default: post.content | split: '!' | first | split: '(' | last | split: ')' | first |
• Investigate load time difference between using using bootstrap and traditional CSS [more ...]
• Use appropriate naming conventions for CSS file [more ...]
• Include the following testcases #578
  • Test 1:
    • Add a small post as a demo (in test as a test case and destroy it after)
    • Wait and let it rebuild and then check to see if the default image is grabbed.
  • Test 2:
    • If you select the next_button you expect the image to change to a new one. Same for prev_button
  • Test 3:
    • That slides match the links in the recent posts section
  • Test 4:
    • When you click the links in the carousel they go to the corresponding webpages

[kjaymiller]

In order to test we need to make sure that we can compare the first active tile with the latest post...

currently in _includes/latest-posts.html the title header doesn't have a class which means that styling and testing is harder