.container
  .widget
    .cycle-slideshow{'data-cycle-fx': 'carousel', 'data-cycle-allow-wrap': 'true', 'data-cycle-slides': 'figure', 'data-cycle-timeout': '0', 'data-cycle-pager': '#thumbnails', 'data-cycle-pager-template': "<a href='#' class='thumb'><img src='{{children.0.src}}'></a>", 'data-cycle-prev': '#prev', 'data-cycle-next': '#next'}

      %figure
        %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/first-course.jpg', alt: 'A Taste of the Kitchen'}

        %figcaption
          %h3 A Taste of the Kitchen
          %span.tag Served Family Style

          %p Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio.

          .rating
            - 5.times do
              %span.fa.fa-star

      %figure
        %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/second-course.jpg', alt: 'Rustic Reds'}

        %figcaption
          %h3 Rustic Reds
          %span.tag From the land of Italy

          %p Totam at eius excepturi deleniti sed, error repellat itaque omnis maiores tempora ratione dolor velit minus porro aspernatur repudiandae.

          .rating
            - 3.times do
              %span.fa.fa-star
            - 2.times do
              %span.fa.fa-star-o

      %figure
        %img{src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/third-course.jpg', alt: 'Delicious Desserts'}

        %figcaption
          %h3 Delicious Desserts
          %span.tag Seasonal Ingredients

          %p Vel nam odio dolorem, voluptas sequi minus quo tempore, animi est quia earum maxime. Reiciendis quae repellat, modi non, veniam.

          .rating
            - 4.times do
              %span.fa.fa-star
            %span.fa.fa-star-o

    .slideshow-nav
      #prev
        %span.fa.fa-lg.fa-chevron-left
      #next
        %span.fa.fa-lg.fa-chevron-right

      #thumbnails
View Compiled
@import "bourbon";

@mixin MQ { @media only screen and (min-width: 815px) { @content; } }

* {
	@include box-sizing(border-box);
}

html {
	min-height: 100%;
}

body {
	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/wine-bg.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: "Open Sans", serif;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.container {
	margin: 2em auto;
	width: 90%;
	max-width: 1100px;

	@include MQ {
		margin: 7em auto;
	}
}

.widget {
	position: relative;
	margin: 0 auto;
	max-width: 320px;
	height: 875px;
	background: #fff;

	@include MQ {
		margin: 0;
		max-width: 800px;
		height: auto;
	}
}

figure {
	margin: 0;
	@include clearfix;

	img {
		@include MQ {
			float: left;
			width: 45%;			
		}
	}

	figcaption {
		padding: 2.25em 2.5em 0;

		@include MQ {
			float: left;
			width: 55%;			
		}

		h3, .tag {
			font-family: 'Playfair Display', serif;
		}

		h3 {
			margin: 0;
			font-size: em(32);
			font-weight: 700;
			color: #3b3b3b;
		}

		.tag {
			display: block;
			margin-top: 0.5em;
			font-size: em(15);
			font-weight: 400;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: #b26943;
		}

		p {
			margin: 2em 0;
			font-size: em(14);
			line-height: em(22);
		}

		.rating {
			color: #d08946;
      .fa {
        margin-right: 5px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
	}
}

.slideshow-nav {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 100;
	width: 100%;
	height: 125px;
	background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/ricepaper2.png') repeat;
	-webkit-box-shadow: inset 0px 10px 5px -6px rgba(0,0,0,0.08);
	-moz-box-shadow: inset 0px 10px 5px -6px rgba(0,0,0,0.08);
	box-shadow: inset 0px 10px 5px -6px rgba(0,0,0,0.08);
	@include user-select(none);
	
	@include MQ {
		width: 55%;
	}

	#prev, #next {
		width: 50%;
		height: 100%;
		line-height: 125px;
		text-align: center;
		cursor: pointer;
		color: darken(#d3c8be, 10%);
		&:hover, &:focus {
			color: darken(#d3c8be, 25%);
		}
		&:active {
			color: darken(#d3c8be, 35%);
		}

		@include MQ {
			width: auto;
			height: 0;

			span {
				display: inline-block;
				padding: 10px;
				border: 2px solid #d3c8be;
				-moz-border-radius: 100px;
				-webkit-border-radius: 100px;
				border-radius: 100px;
				font-size: 0.5em;
				color: #d3c8be;
			    &:hover, &:focus {
			    	border: 2px solid darken(#d3c8be, 10%);
			    	color: darken(#d3c8be, 10%);
			    }
			    &:active {
			    	border: 2px solid darken(#d3c8be, 20%);
			    	color: darken(#d3c8be, 20%);
			    }					
			}
		}
	}

	#prev {
		float: left;
		border-right: 1px solid darken(#d3c8be, 10%);

		@include MQ {
			border-right: 0;
			margin-left: 2em;
		}
	}

	#next {
		float: right;

		@include MQ {
			margin-right: 2em;
		}	
	}

	#thumbnails {
		display: none;

		@include MQ {
			display: block;
			text-align: center;

			.thumb {
				margin: 0 0.5em;
				line-height: 100px;

				img {
					width: 75px;
					height: 75px;
					border: 3px solid #fff;
					-moz-border-radius: 50px;
					-webkit-border-radius: 50px;
					border-radius: 50px;
				}
			}

			.cycle-pager-active img {
				border: 3px solid #d3c8be;
			}			
		}
	}
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans:400|Playfair+Display:400,700
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/cycle2.js