Carousel - Google frequently search

The slider above works the same way as the Google frequently search slider. It was created from the "Carousel - Basic" slideshow profile, but uses a custom slideshow template. The custom slideshow template was necessary because the active slide is aligned to the left, but not to the left hand side of the slideshow (outer view) but 135 pixels from the left (the left hand side of the inner view). So the active slide will be aligned with the left side of the title "Professional athletes".

Step by Step guide:

Click on "Add New" at the top of the page under "Templates" » "Slideshow Templates" to create a new slideshow template. Give it a name, for example "Google Carousel". Please note that a CSS class that is created from the id of a slideshow template is always added to the HTML wrapper of each slideshow using the template. In this case, the CSS class will look like this: slideshow-template-google-carousel. We will use this class for styling (see the CSS tab below).
Specify the content of the slideshow template. You can find the content in the "Slideshow Template" tab below. Save changes.
Now, go to Slideshows » Slideshows and create a new slideshow. Give it a name and select the "Carousel - Basic" slideshow profile.
Set the "Google Carousel" template for the "Slideshow Template" option under "General".
You need to change other settings also. You can find them in the "Slideshow Settings" tab below.
After you have saved your slideshow, you need to add the CSS code (last tab below) to the style.css file of your child theme, or to the page where you want to use the slideshow.
To display your slideshow, use the slideshow shortcode or the slideshow widget. Remember to specify the gallery you want to display in the slideshow.

Slideshow Settings

Slideshow Template

CSS

As mentioned above, select the "Google Carousel" slideshow template under "General"
Set "Overcroll" to "min" under "General"
Set "Slide width" to 115, under "Slide Settings".
Set "Slide height" to 185, under "Slide Settings".
Set "Media width" to 115, under "Slide Settings".
Set "Media height" to 115, under "Slide Settings".

[slider_slides]
	[outer_wrapper_custom]
		[slider_button type="prev" class="google_button" /]
		[slider_button type="next" class="google_button" /]
	[/outer_wrapper_custom]
	[inner_wrapper_custom]
		[slider_buttons_wrapper type="autoplay"]
			[slider_button type="play" /]
			[slider_button type="pause" /]
		[/slider_buttons_wrapper]
		[slider_timeline /]
	[/inner_wrapper_custom]
[/slider_slides]
[range_control class="slides_bottom" /]
[slider_navigation /]

.google_button {
	width:36px;height:72px !important;text-align:center;background-color:#fff;background-color:rgba(255,255,255,0.8);box-shadow: rgba(0, 0, 0, 0.498039) -1px 0px 2px 0px;position:absolute;top:50%;margin-top:-56px;text-align:center;
}
.google_button.slider_prev_button {border-bottom-right-radius:36px;border-top-right-radius:36px;left:0;}
.google_button.slider_next_button {border-bottom-left-radius:36px;border-top-left-radius:36px;right:0;}
.google_button .font-icon {color:#333;font-size:24px;line-height:72px !important;}
.google_button.slider_prev_button .font-icon {padding-right:10px;}
.google_button.slider_next_button .font-icon {padding-left:10px;}
.slideshow-template-google-carousel .post_title, .slideshow-template-google-carousel .post_title a {color:#fff !important;font-size:13px !important;font-family:helvetica, arial, sans-serif !important;padding-top:4px;margin:0;text-align:center;}
.slideshow-template-google-carousel .slider_slides_inner_wrapper {margin-left:135px !important;margin-right:50px;}