The structure of my pages is:
Page1.aspx
Page2.aspx
Page3.aspx
With URL rewriting I have this struture:
Folder1/Page1
Folder1/Page2
Page3
If I put a modal inside Page3.aspx, the modal works perfectly.
If I instead put a modal inside Page1.aspx or Page2.aspx, the modal doesn't work.
Here is my code:
<img src="../images/RecuperoDati/Brochure1.jpg" class="img-responsive" data-toggle="modal" data-target="#Modal1"/>
....
<!-- Modal 1-->
<div class="modal fade" id="Modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel1">rftyguhij</h4>
</div>
<div class="modal-body center">
<img src="../images/RecuperoDati/Brochure1.jpg"/>
</div>
<div class="modal-footer">
Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.
</div>
</div>
</div>
</div>
If I read the HTML with the browser, the id is Modal1. So what Is wrong?
It's difficult to say when you've only given some of the code, but my guess is you URL rewriting is changing the path you need to use for bootstrap.js.
E.g. in Page3 if your path to the JS is ./js/bootstrap.js then in Page1, which becomes Folder1/Page1, you would need ../js/bootstrap.js instead.
Related
I am writting an article on my Drupal 7 site directly with HTML source code.
When i save my content and want to modify it again, all my HTML source code has changed structure.
The display is what i want but the html source code is more complex then mine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Ligne (collapse) -->
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-19">
<!-- Titre ligne -->
<div class="col-md-5 col-xs-12 titre-ligne">Transport en commun<i class="glyphicon glyphicon-info-sign"></i></div>
<!-- Contenu ligne -->
<div class="col-md-7 col-xs-12">
<div class="vals">
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
<div class="col-xs-4"><i class="glyphicon glyphicon-ok"></i></div>
</div>
</div>
</a>
<!-- Contenu caché (collapse) -->
<div class="row collapse" id="ligne-collapse-19">
<div class="ligne-detail">
<div class="col-md-8 col-xs-10 col-center">
Profitez d'un mois gratuit* sur votre assurance auto pour toute nouvelle souscription.
</div>
</div>
</div>
<!-- Fin Ligne -->
Becomes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-5 col-xs-12 titre-ligne"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1">Responsabilité civile<i class="glyphicon glyphicon-info-sign"></i></a></div>
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1">
<!-- Contenu ligne -->
</a>
<div class="col-md-7 col-xs-12">
<div class="vals">
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
<div class="col-xs-4"><a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"><i class="glyphicon glyphicon-ok"></i></a></div>
</div>
</div>
<a class="row ligne" data-toggle="collapse" href="#ligne-collapse-1"> </a>
<!-- Contenu caché (collapse) -->
<div class="row collapse" id="ligne-collapse-1">
<div class="ligne-detail">
<div class="col-md-8 col-xs-10 col-center">Elle couvre les dommages occasionnés par votre véhicule impliqué dans l'accident et constitue le minimum exigible de tout contrat d'assurance auto.</div>
</div>
</div>
<!-- Fin Ligne -->
All my links <a href="..." are splitted... what can i do to avoid this ?
As we can see in comments, there are no simple way to avoid Drupal from modifying custom HTML :
With a module hook into the core (thanks #headmax)
With Text format attribute put on "PHP Code"
I chose Text format because i have no time to spare on a new module.
Thanks for your answers
If you're using the WYSIWYG module, there's a setting called "Apply simple source formatting" (at /admin/config/content/wysiwyg/) that will reformat your code, even if you are editing the source directly.
How do I align my 3 buttons horizontal side by side? I think it looks bad as it is now.
class= btn btn-danger
How do I write the css for that?
my code
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
LÆS MERE
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
LÆS MERE
</div>
</div>
</div>
Two options.
Add css to give h3 and p element fixed height (adjust numbers)
.col-sm-4 p {
height: 200px;
}
.col-sm-4 h3 {
height: 50px;
}
OR
Extract buttons to a new row.
<div class="row">
<div class="col-sm-4">
<h3>Stationær & bærbar reparationer</h3>
<p>Vi kan udskifte alle typer hardware de mest almindelige reparationer omfatter</p>
</div>
<div class="col-sm-4">
<h3>Fjernelse af virus</h3>
<p>Hvis din computer er inficeret med virus kan vi hjælpe dig med at rense ud i dit system. Vi kan herudover også hjælpe dig med at sikre dit system mod kommende virus angreb.</p>
</div>
<div class="col-sm-4">
<h3>Data recovery</h3>
<p>Hvis din harddisk er defekt skifter vi den billigt og hurtigt, vi kan genskabe dine data tilbage i de fleste tilfælde. eller hvis Windows er gået ned, kan vi også redde din data. </p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
<div class="col-sm-4">
LÆS MERE
</div>
</div>
</div>
Edit: Adding code
but i see that not the way to do it, if i should use that class again, i may have to add one more class to the parent element and retarget it as you said, just need to figure out how :) i am just a noob and pretty new at this.
but it looks good so far i think
My new PC service site
I wrote some code for an advanced liquid slider. But as my header slider contains some major content like h-tags p-tags and some images. I asked myself "can I consider each slide as an article". Because I can't find the correct answer maybe somebody can help me. The question is, is my code correctly nested and the right use of Semantic Elements. The code is:
<header id="masthead" class="site-header" role="banner">
<div id="main-slider" class="liquid-slider">
<article id="slider-1" class="liquid-slide-wrapper" style="background: url(images/back-99.jpg) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">Professionele, betaalbare website nodig?</h2>
<h2 style=" color:#fff; display:none;">Zelf uw website aanpassen?</h3>
</header>
<p style="display:none; color:#fff;">Onze unieke websites worden afgeleverd met een wordpress CMS systeem.<br>
Hiermee kan u zelf uw website aanpassen!<br> Vat de kudu bij de horens en contacteer ons voor meer info!
</p>
<p style="display:none;"><button type="button" class="btn btn-primary btn-lg">Mail Ons</button> <button type="button" class="btn btn-transparent btn-lg">0494 / 77 22 61</button></p>
</section>
<section class="section-img-right clearfix">
<img class="slider-img-right fadeInRight animated" style="display:none; width:100%; max-width:692px; height:auto;" src="images/imac.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/straf-webdesign.png" />
<img class="slider-img-right fadeIn animated-slow" style="display:none; width:100%; max-width:692px; height:auto;" src="images/responsive-webdesign.png" />
</section>
</article>
<article id="slider-2" style="background: url(images/background-7.png) 50% 50% /cover; repeat:no-repeat; min-height:450px;">
<section class="section-text-left">
<header>
<h1 class="title" style=" color:#f7740a; display:none;">JustOnWeb wordt Kudu Concepts!</h2>
<h2 style="display:none; color:#000;">Een nieuwe naam, met een professionelere aanpak!</h3>
<header>
<p style="display:none; color:#fff;">Een website bestaat uit meer dan een lay-out. <br>Met kudu Concepts gaan we verder daar waar anderen stoppen!<br>
We bedenken een volledige filosofie voor uw website en <br> combineren dit met onze kennis van Online Marketing!
</p>
</section>
</article>
</div>
</header>
According to W3School semantic here : http://www.w3schools.com/html/html5_semantic_elements.asp
< section > contain < article >
it is not recommanded to use < section > inside < article > and inside < header >
According W3C, a section is "a thematic grouping of content, typically with a heading."
< header > is on top of parent element, so on top of body (the header) but also on top of sections or articles or any other div
In your code :
< h1 > should be close with < / h1 > and not h2, same for < h2 >
I have this link
<a href='' data-toggle='modal' data-target='#modalC'>Book Now</a>
And i have this code which opens a bootstrap modal popup.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
</div>
</div>
</div>
</div>
Everything appearing inside div with id content is what appears inside modal popup, so my question is is there a way to show my already created aspx webform inside the modal popup without having to copy all the html and codebehind to this div?
I've heard something about window.open but i think it is not the case, Thank you in advance.
You can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
if you want to load the page everytime you open the modal, you can add the iframe src when you click on the button you use to open the modal (or whichever method you use to open it).
Maybe this code can help you:
Add jquery and bootstrap
$(document).ready(function () {
initializeEvents();
});
var initializeEvents = function () {
$("#btnCarga").click(function () {
//agregas el aspx que quieres mostrar, el titulo y el pie de página pueden ser opcionales
ShowModalIframe('OtherPage.aspx', 'Tittle', 'Footer');
});
};
//Crea un modal con un iframe en el contenido donde se mostrará el aspx
var ShowModalIframe = function (uriContent, tittle = 'Titulo', footer='Carga completada') {
var html = '<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">\
<div class="modal-dialog modal-xl">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title">'+tittle+'</h5>\
<button type="button" class="close" data-dismiss="modal" aria-label="Close">\
<span aria-hidden="true">×</span>\
</button>\
</div>\
<div id="modal-body" class="modal-body">\
<div class="embed-responsive embed-responsive-21by9">\
<iframe id="iframe-modal" class="embed-responsive-item" src="'+document.location.origin+'/'+uriContent+'"></iframe>\
</div>\
</div>\
<div class="modal-footer">\
'+footer+'\
</div>\
</div>\
</div>\
</div>';
var dialog = $(html);
dialog.modal({
backdrop: 'static',
keyboard: false
});
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button id="btnCarga" type="button" class="btn btn-primary" >
Mostrar modal
</button>
Can anyone help me with an example on how to start the animation when the carousel item is active.
I am using daneden.me/animate/ his css and the animation starts right after the next item is fired. Now what i want is to let it start after the slide is done.
This is my HTML
<div class="item active">
<div class="row" style="position:relative;">
<div class="col-lg-6">
<h1 class="animated fadeInLeft">Bespaar kosten met een overstap naar LED!</h1>
<div class="lead">
<p class="animated fadeInLeft animation-delay-hs">
Met LED verlichting bespaard u al snel <strong>40 tot 60%</strong> op uw energy kosten. <strong>wat LED u?</strong>
</p>
Vraag een offerte op maat aan
Lees meer
</div>
</div>
<div class="col-lg-6 hero-led" style="position:absolute; bottom:0; right: 0;">
<img src="img/hero-1.png" class="animated fadeInRightBig img-responsive hero-led-light" alt="">
<img src="img/hero-1-light.png" class="animation-delay-2s hero-light-delay animated fadeIn img-responsive" alt="">
<img src="img/hero-1-light-2.png" class="animation-delay-3s hero-light-delay animated fadeIn img-responsive" alt="">
<img src="img/hero-1-light-3.png" class="animation-delay-4s hero-light-delay animated fadeIn img-responsive" alt="">
</div>
</div>
</div>
The css is loaded from the animated.css from daneden.
When i read you question and see your html code. I do not understand why your transition classes are already in it.
For the transition you will have to start with the element hidden (opacity:0;). After this add the transition class which make it visible with some effect. https://github.com/daneden/animate.css shows how you can do this with jQuery.
I think you should do something like this. Create a carousel and transitions for some slide.
Run the carousal, stop it at your transition slide, play your transition and restart the carousel.
Example with transitions on the second slide (index = 1):
$('.carousel').carousel();
$(".carousel").on('slid.bs.carousel', function(evt) {
if( $(this).find('.active').index() == 1)
{
$(this).carousel('pause');
/* run your transitions */
transitions();
/*restart your carousel */
}
});
Find the index of the active slide: https://stackoverflow.com/a/18690905/1596547
Stop (and restart) your carousel: https://stackoverflow.com/a/14753680/1596547
Transitions
Bootstrap came with transition.js you could use the th add some fall backs to your code. To prevent your code from running when a transition runs you will need to add it in a timeout. See: jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function
for example a create this function:
function transitions()
{
var j = 1;
for(var i=1; i<=4; i++)
{
setTimeout(
function()
{
if (!$.support.transition){$('#z'+i).removeClass('inactive')}
else
{
$('#z'+j).addClass('animated').addClass('fadeInLeft');
$('#z'+j).one($.support.transition.end, function(){$('#z'+i).removeClass('inactive')}).emulateTransitionEnd(2000);
}
j++
},
2000*(i-1));
}
}
This code add the transition classes for every z* element. The next transition starts 2 seconds (2000ms in the timeout) after the first.
html:
<p class="inactive" id="z1">
Met LED verlichting bespaart u al snel <strong>40 tot 60%</strong> op uw energie kosten. <strong>wat LED u?</strong>
</p>
<p class="inactive" id="z2">
Met LED verlichting bespaart u al snel <strong>40 tot 60%</strong> op uw energie kosten. <strong>wat LED u?</strong>
</p>
<p class="inactive" id="z3">
Met LED verlichting bespaart u al snel <strong>40 tot 60%</strong> op uw energie kosten. <strong>wat LED u?</strong>
</p>
<div class="inactive" id="z4">
Vraag een offerte op maat aan
</div>
css:
//hide the z* elements
.inactive{opacity:0;}
Restart
Cause the above code preforms 4 transition of 2 second the carousel will be restart after 5 x 2 seconds:
var that = $(this);
/*restart your carousal */
setTimeout(function(){
that.carousel('next');
that.carousel('cycle');
/* hide transitions again */
$("#slide2 [id^='z']").removeClass().addClass('inactive');
},2000*5);
Example:
see: http://bootply.com/83200
Complete code:
<!DOCTYPE html>
<html>
<head>
<title>Carousel with transitions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<style type="text/css">
</style>
<link href="/bootstrap3/bootstrap-master/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/animate.min.css" rel="stylesheet">
<style>
body {padding-top:80px;}
.inactive{opacity:0;}
</style>
</head>
<body>
<header class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="col-10">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo Text</a>
</div>
<nav class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="home_button"> <span class="glyphicon glyphicon-home"></span> </li>
<li class="dropdown">
<b class="caret"></b>
<ul class="dropdown-menu">
<li> <a href="#" > My Account </a> </li><br>
<li> Logout </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container" style="max-width:900px;">
<div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example-captions" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="1"></li>
<li class="" data-target="#carousel-example-captions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img data-src="holder.js/900x500/auto/#777:#777" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAH0CAYAAABl8+PTAAALGUlEQVR4nO3XoQEAMAyAsH7d87czKoiIxzK7+wAAAOiZ6wAAAABuGEIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABD1AcvKO4a+zjA6AAAAAElFTkSuQmCC" alt="900x500">
<div class="carousel-caption">
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item" id="slide2">
<img data-src="holder.js/900x500/auto/#666:#666" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAH0CAYAAABl8+PTAAALGklEQVR4nO3XIQEAMAzAsKmdfwe/jIEGhJd2dvcBAADQM9cBAAAA3DCEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAg6gP2OvaFOB4oKwAAAABJRU5ErkJggg==" alt="900x500">
<div class="carousel-caption">
<h3>Second slide label</h3>
<p class="inactive" id="z1">
Met LED verlichting bespaart u al snel <strong>40 tot 60%</strong> op uw energie kosten. <strong>wat LED u?</strong>
</p>
<p class="inactive" id="z2">
Met LED verlichting bespaart u al snel <strong>40 tot 60%</strong> op uw energie kosten. <strong>wat LED u?</strong>
</p>
<p class="inactive" id="z3">
Met LED verlichting bespaart u al snel <strong>40 tot 60%</strong> op uw energie kosten. <strong>wat LED u?</strong>
</p>
<div class="inactive" id="z4">
Vraag een offerte op maat aan
</div>
</div>
</div>
<div class="item">
<img data-src="holder.js/900x500/auto/#555:#5555" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAH0CAYAAABl8+PTAAALGklEQVR4nO3XIQEAMAzAsJmcfym/jIEGhJd2dvcBAADQM9cBAAAA3DCEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAgyhACAABEGUIAAIAoQwgAABBlCAEAAKIMIQAAQJQhBAAAiDKEAAAAUYYQAAAg6gMgubGT543s8gAAAABJRU5ErkJggg==" alt="900x500">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/bootstrap3/bootstrap-master/dist/js/bootstrap.js"></script>
<script>
function transitions()
{
var j = 1;
for(var i=1; i<=4; i++)
{
setTimeout(
function()
{
if (!$.support.transition){$('#z'+i).removeClass('inactive')}
else
{
$('#z'+j).addClass('animated').addClass('fadeInLeft');
$('#z'+j).one($.support.transition.end, function(){$('#z'+i).removeClass('inactive')}).emulateTransitionEnd(2000);
}
j++
},
2000*(i-1));
}
}
$('.carousel').carousel();
$(".carousel").on('slid.bs.carousel', function(evt) {
if( $(this).find('.active').index() == 1)
{
$(this).carousel('pause');
/* run your transitions */
transitions();
var that = $(this);
/*restart your carousal */
setTimeout(function(){
that.carousel('next');
that.carousel('cycle');
/* hide transitions again */
$("#slide2 [id^='z']").removeClass().addClass('inactive');
},2000*5);
}
});
</script>
</body>
</html>