Free amazing carousels and more ....

[tommy888]

Amazing carousels to use free in all projects.
And not only from the Netherlands.

Here I've found amazing examples of carousels. Moreover, they are free to use in all projects as they say - http://coolcarousels.frebsite.nl/c/68/

I hope it will be of any use for all WB users and extention buillder.

[miguelss]

Hi tommy888!

Thanks for sharing!
But, how we can customize into WWB10?

Cheers!
Miguel

[electrochrisso]

These can be implemented into WB fairly easily, here what I did using
http://coolcarousels.frebsite.nl/c/59/coolcarousel.zip

1. Extract the zip
2. In WB create a new project, center the page, place a html object on the page and center it hotizontally, then move it down to 170 or where it will look best for you, and copy this code from the coolcarousel.html code into the html object, just use the code I supplied below to make it easy for now.

Code: Select all

		<div id="wrapper">
			<div id="carousel-left">
				<img src="img/rally4.jpg" width="450" height="325" />
				<img src="img/rally1.jpg" width="450" height="325" />
				<img src="img/rally2.jpg" width="450" height="325"/ >
				<img src="img/rally3.jpg" width="450" height="325" />
			</div>
			<div id="carousel-center">
				<img src="img/rally1.jpg" width="550" height="400"/ >
				<img src="img/rally2.jpg" width="550" height="400" />
				<img src="img/rally3.jpg" width="550" height="400" />
				<img src="img/rally4.jpg" width="550" height="400" />
			</div>
			<div id="carousel-right">
				<img src="img/rally2.jpg" width="450" height="325"/ >
				<img src="img/rally3.jpg" width="450" height="325" />
				<img src="img/rally4.jpg" width="450" height="325" />
				<img src="img/rally1.jpg" width="450" height="325" />
			</div>
			<a id="prev" href="#">&lsaquo;</a>
			<a id="next" href="#">&rsaquo;</a>
		</div>

3. In the page html place this code between the head tags.

Code: Select all

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
		<script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function() {
				var $l = $('#carousel-left'),
					$c = $('#carousel-center'),
					$r = $('#carousel-right');
					
				$l.carouFredSel({
					auto: false,
					items: 1,
					direction: 'right',
					prev: {
						button: '#prev',
						fx: 'uncover',
						onBefore: function() {
							setTimeout(function() {
								$c.trigger( 'prev' );
							}, 100);
						}
					},
					next: {
						fx: 'cover'
					}
				});
				$c.carouFredSel({
					auto: false,
					items: 1,
					prev: {
						onBefore: function() {
							setTimeout(function() {
								$r.trigger( 'prev' );
							}, 100);
						}
					},
					next: {
						onBefore: function() {
							setTimeout(function() {
								$l.trigger( 'next' );
							}, 100);
						}
					}
				});
				$r.carouFredSel({
					auto: false,
					items: 1,
					prev: {
						fx: 'cover'
					},
					next: {
						button: '#next',
						fx: 'uncover',
						onBefore: function() {
							setTimeout(function() {
								$c.trigger( 'next' );
							}, 100);
						}
					}
				});
			});
		</script>
		<style type="text/css">
			html, body {
				height: 100%;
				padding: 0;
				margin: 0;
			}
			body {
				background-color: #fff;
				min-height: 600px;
			}
			body * {
				font-family: Arial, Geneva, SunSans-Regular, sans-serif;
				font-size: 14px;
				color: #333;
				line-height: 22px;
			}

			#wrapper {
				width: 950px;
				height: 450px;
				margin: -225px 0 0 -475px;
				position: absolute;
				top: 50%;
				left: 50%;
			}
			#carousel-left,
			#carousel-right {
				width: 450px;
				height: 325px;
				overflow: hidden;
				position: absolute;
				top: 65px;
				z-index: 1;
			}
			#carousel-left {
				left: 25px;
			}
			#carousel-right {
				right: 25px;
			}
			#carousel-center {
				width: 550px;
				height: 400px;
				overflow: hidden;
				position: absolute;
				top: 25px;
				left: 200px;
				z-index: 2;
			}
			.caroufredsel_wrapper {
				box-shadow: 0 0 10px rgba( 0, 0, 0, 0.3 );
			}
			.caroufredsel_wrapper img {
				display: block;
				float: left;
			}
			#prev,
			#next {
				background: #ccc;
				color: #fff;
				font-size: 25px;
				font-weight: bold;
				text-align: center;
				text-decoration: none;
				text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.6 );
				line-height: 26px;
				display: block;
				width: 30px;
				height: 30px;
				margin-top: -15px;
				position: absolute;
				top: 50%;
				z-index: 0;
			}
			#prev {
				left: 0;
			}
			#next {
				right: 0;
			}
			#prev:hover,
			#next:hover {
				background: #bbb;
			}
			
			</style>

To test this you will need to publish to the coolcarousel folder you made from the downloaded zip and execute the index.html to do your previews. Also if you are working offline you will need to put the jquery library into the coolcarousel folder and change:
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
To
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>

You can also use later versions of jquery, I know 1.9.1, 1.11.1 and 2.1.1 works as I tried them and 1.7.2 also worked.

Anyway have fun.

[tommy888]

See the post above