Image Carousel

What’s this?

This allows a loop of more than one image in a horizontal banner. Great for logos or any collection of images. It’s responsive and you can swipe it on touch screens. Check out some examples below.

Responsive

Get code

[image_carousel items="3" responsive="0:1,600:2,850:3"]
[image src="..." height="50"]
[/image_carousel]

Automatic scrolling + infinity loop

Get code

[image_carousel items="3" autoplay="1" loop="1"]
[image src="..." height="50"]
[/image_carousel]

Slower automatic scrolling + infinity loop

Get code

[image_carousel items="3" autoplay="1" autoplay_timeout="5000" loop="1"]
[image src="..." height="50"]
[/image_carousel]

Dots navigation

Get code

[image_carousel items="2" dots="1"]
[image src="..." height="50"]
[/image_carousel]

Image frames

Get code

[image_carousel items="2" responsive="0:1,600:2,850:4"]
[image src="..." frame="style2" height="190"]
[/image_carousel]

Variations

Change the Skin for this Case Study

Demos

React Hub
Lens
Berri
Replika
Press
Second
Storm
View all Demos React Hub Copy current page content
[box type="custom-boxed-item" align="center" text_align="textcenter"] [fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header] This allows a loop of more than one image in a horizontal banner. Great for logos or any collection of images. It's responsive and you can swipe it on touch screens. Check out some examples below. [icon icon="fas fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"] [/box] [section_break type="blank" margin_bottom="30" /] [fancy_header bold="1" type="style1" text_align="textcenter" margin_top="80" margin_bottom="50"]Responsive[/fancy_header] [image_carousel items="3" responsive="0:1,600:2,850:3"] [image src="2014/06/vc.png" height="50"] [image src="2014/06/goportfolio.png" height="50"] [image src="2014/06/slider-rev.png" height="50"] [image src="2014/06/woocom.png" height="50"] [image src="2014/06/vimeo_logo_blue.png" height="50"] [/image_carousel] [section_break type="blank" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[image_carousel items="3" responsive="0:1,600:2,850:3"]
[image src="..." height="50"]
[/image_carousel]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" text_align="textcenter" margin_top="80" margin_bottom="50"]Automatic scrolling + infinity loop[/fancy_header] [image_carousel items="3" autoplay="1" loop="1" responsive="0:1,600:2,850:3"] [image src="2014/06/vc.png" height="50"] [image src="2014/06/goportfolio.png" height="50"] [image src="2014/06/slider-rev.png" height="50"] [image src="2014/06/woocom.png" height="50"] [image src="2014/06/vimeo_logo_blue.png" height="50"] [/image_carousel] [section_break type="blank" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[image_carousel items="3" autoplay="1" loop="1"]
[image src="..." height="50"]
[/image_carousel]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" text_align="textcenter" margin_top="80" margin_bottom="50"]Slower automatic scrolling + infinity loop[/fancy_header] [image_carousel items="3" autoplay="1" autoplay_timeout="5000" loop="1" responsive="0:1,600:2,850:3"] [image src="2014/06/vc.png" height="50"] [image src="2014/06/goportfolio.png" height="50"] [image src="2014/06/slider-rev.png" height="50"] [image src="2014/06/woocom.png" height="50"] [image src="2014/06/vimeo_logo_blue.png" height="50"] [/image_carousel] [section_break type="blank" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[image_carousel items="3" autoplay="1" autoplay_timeout="5000" loop="1"]
[image src="..." height="50"]
[/image_carousel]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" text_align="textcenter" margin_top="80" margin_bottom="50"]Dots navigation[/fancy_header] [image_carousel items="2" dots="1" responsive="0:1,600:2"] [image src="2014/06/vc.png" height="50"] [image src="2014/06/goportfolio.png" height="50"] [image src="2014/06/slider-rev.png" height="50"] [image src="2014/06/woocom.png" height="50"] [image src="2014/06/vimeo_logo_blue.png" height="50"] [/image_carousel] [section_break type="blank" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[image_carousel items="2" dots="1"]
[image src="..." height="50"]
[/image_carousel]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" text_align="textcenter" margin_top="80" margin_bottom="50"]Image frames[/fancy_header] [image_carousel space="15" items="4" responsive="0:1,600:2,850:4"] [image src="2014/06/3740308199_0341325acb_o-300x201.jpg" frame="style1"] [image src="2015/07/Dollarphotoclub_670853251-300x200.jpg" frame="style1"] [image src="https://react.themecatcher.net/wp-content/uploads/2015/07/Dollarphotoclub_673507581-300x200.jpg" frame="style1"] [image src="2015/07/Dollarphotoclub_65235347-300x200.jpg" frame="style1"] [image src="2014/06/3740308199_0341325acb_o-300x201.jpg" frame="style1"] [image src="2015/07/Dollarphotoclub_670853251-300x200.jpg" frame="style1"] [image src="https://react.themecatcher.net/wp-content/uploads/2015/07/Dollarphotoclub_673507581-300x200.jpg" frame="style1"] [image src="2015/07/Dollarphotoclub_65235347-300x200.jpg" frame="style1"] [/image_carousel] [section_break type="blank" /] [accordion style="plain"] [accordion_toggle title="Get code"]
[image_carousel items="2" responsive="0:1,600:2,850:4"]
[image src="..." frame="style2" height="190"]
[/image_carousel]
[/accordion_toggle] [/accordion]
Download - $69