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.
Free amazing carousels and more ....
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
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
Free amazing carousels and more ....
Last edited by tommy888 on Tue Nov 11, 2014 11:18 am, edited 1 time in total.
Re: Free amazing carousels and more ....
Hi tommy888!
Thanks for sharing!
But, how we can customize into WWB10?
Cheers!
Miguel
Thanks for sharing!
But, how we can customize into WWB10?
Cheers!
Miguel
-
-
- Posts: 43
- Joined: Mon Aug 19, 2013 8:39 am
- Location: Darling River
Re: Free amazing carousels and more ....
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.
3. In the page html place this code between the head tags.
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.
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="#">‹</a>
<a id="next" href="#">›</a>
</div>
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>
<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
Re: Free amazing carousels and more ....
See the post above