Free amazing carousels and more ....

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
User avatar
tommy888
 
 
Posts: 214
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Free amazing carousels and more ....

Post by 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. :)
Last edited by tommy888 on Tue Nov 11, 2014 11:18 am, edited 1 time in total.
User avatar
miguelss
 
 
Posts: 135
Joined: Thu Aug 15, 2013 12:25 pm
Location: Madrid, Spain

Re: Free amazing carousels and more ....

Post by miguelss »

Hi tommy888!

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

Cheers!
Miguel
electrochrisso
 
 
Posts: 43
Joined: Mon Aug 19, 2013 8:39 am
Location: Darling River

Re: Free amazing carousels and more ....

Post by 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. :)
WYSIWYG THE GREATEST Web Builder EVER
User avatar
tommy888
 
 
Posts: 214
Joined: Mon Sep 28, 2009 5:41 pm
Location: Poland
Contact:

Re: Free amazing carousels and more ....

Post by tommy888 »

See the post above :)
Post Reply