Showcase Carousel Demo

Purchase Slide Anything Pro

Get Slide Anything Pro and add IMAGE, VIDEO and HTML popups to your sliders for only $10.

Creating a Showcase Carousel

A Showcase Carousel has a width exceeding the width of the container that it’s placed in, which results in the leftmost and rightmost visible slides becoming partially visible – which can be seen in the above demo.

A Showcase Carousel only really works when you have 3 or more items (slides) displayed on the screen at a time. Typically you will display a Showcase Carousel on desktops and possibly tablets only, and then disable the Showcase Carousel on mobile devices. So in the example screenshot (right), you will see that there are 3 or more slides displayed on tablets and desktops, and the ‘Use on Mobiles‘ checkbox has NOT been ticked. In this case the carousel will become a normal carousel on mobile devices, where the carousel container width is 100% the width of the device screen/window.

Regarding setting the Showcase widths, in the example above I have used 120% for the ‘Desktop Width‘ – this means the carousel container is 20% wider than the container that has been placed in, and is wider on the left and right by 10% on each side. Now as 10% width translates to a smaller pixel amount on tablets, I have added settings where you can define different carousel widths on tablets and mobiles. I have therefore used 130% for the ‘Tablet Width‘.

Purchase Slide Anything Pro

Get Slide Anything Pro and add IMAGE, VIDEO and HTML popups to your sliders for only $10.

Content & Settings for the Demo Slider

Listed below are all the settings I’ve used to create the Demo Showcase Carousel at the top of this page.

Content for for each slide

Click the thumbnail below to open screenshot:
Showcase Carousel Settings - Slide Content
Each slide consists of a single centred image.
H3 text is used for the product name and H4 text for the price.

Slider Settings

Click the thumbnail below to open screenshot:
Showcase Carousel Settings - Slider Settings

The Responsive CSS for this slider

#showcase_demo .owl-item div  {
   text-align:center; }
#showcase_demo .owl-item h3 {
   max-width:280px; margin:0px auto; padding:0px 0px 5px; font-size:18px;
   line-height:24px; color:#000000; }
#showcase_demo .owl-item h4 {
   text-align:center; margin:0px; padding:0px; font-size:14px;
   line-height:20px; color:crimson; }
/* the following rules are NOT applicable to mobile devices */
@media only screen and (min-width:768px) {
   /* set a semi-transparent white overlay over the left/right slides */
   #showcase_demo .sc_partial img { opacity:0.3 !important; }
   /* hide the text displayed on the left/right slides */
   #showcase_demo .sc_partial h3, #showcase_demo .sc_partial h4 { color:#ffffff; }
   /* set a 0.2 second animation delay for the above 2 css rules */
   #showcase_demo .owl-item img,
   #showcase_demo .owl-item h3,
   #showcase_demo .owl-item h4 {
      -webkit-transition:all 0.2s ease-in; -moz-transition:all 0.2s ease-in;
      -o-transition:all 0.2s ease-in; transition:all 0.2s ease-in; }
}

To target the leftmost & rightmost visible slides, i.e. the partially visible slides use the CSS:
#showcase_demo .sc_partial
(Replace “#showcase_demo” with the CSS ID of your slider)

Slider Style

Click the thumbnail below to open screenshot:
Showcase Carousel Settings - Slider Style
CONTACT US