This is the link of my website which is looking good in firefox.but in IE items are not in the same line how to fix it
your problem is in the HTML, not in the css, you have two extra closing divs at the bottom for each 'item_container span3'
<form method='post' name='form124' id='form124' action='/app/site/backend/additemtocart.nl?c=3563610&n=1' onsubmit="return checkmandatory124();">
<div class="item_container span3">
iPhone 5
<div class="heading_price">
<span class="price">Price:
<span id=itemprice124>?.?.?2?444?00 3,649.00 SAR</span>
</span>
</div>
<div class="itemlist-img">
<a href="/s.nl/c.3563610/it.A/id.124/.f">
<a href='/s.nl/c.3563610/it.A/id.124/.f'>
<img src='/core/media/media.nl?id=959&c=3563610&h=b417dd449e62d8ecd270&resizeid=-1&resizeh=214&resizew=160' border='0' alt='Item Images13.jpg' title='Item Images13.jpg'></a></a>
</div><div><p class="item_desc">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p></div>
<div class="cart_details"> VIEW DETAILS
<span class="cart_btn"><a href="#inline_content" class='inline'>ADD TO CART</a></span>
</div></div>
<--- this --->
**</div></div>**
<------------>
</form>
Related
I have created a modal and then put some design elements in it. Every components work great except Dojos. They are working but when i click on it to chose date the windows stays behind of modal. so I can not control it. I tried z-index or similar thinks but I could not succeeded. I could not get it front. This problem happens only in Modal. Otherwise All of Dojo elements works 100%. So I do now know Where to start digging :(
<!-- This codes below is the whole modal dialog codes.. -->
<xp:link escape="true" id="addUnvan" styleClass="text-primary list-icons-item"
rendered="#{javascript:document1.isEditable()}">
<xp:this.attrs>
<xp:attr name="type" value="button"></xp:attr>
<xp:attr name="data-target" value="#modal_theme_custom"></xp:attr>
<xp:attr name="data-toggle" value="modal"></xp:attr>
<xp:attr name="data-popup" value="popover"></xp:attr>
<xp:attr name="data-trigger" value="hover"></xp:attr>
<xp:attr name="data-content"
value="Çalışanın görevi değiştiyse onun eski görevini yeni görevinden bir gün önce bitecek şekilde kapatır. Yeni unvan eklerim.."></xp:attr>
<xp:attr name="data-original-title" value="Ne Mi Yaparım?"></xp:attr>
<xp:attr name="data-placement" value="right"></xp:attr>
</xp:this.attrs>
<i class="icon-stack-plus"></i>
</xp:link>
<!-- This codes below is the whole modal dialog codes.. -->
<div id="modal_theme_custom" class="modal fade" tabindex="-1"
style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<xp:div id="divUnvanContent" styleClass="card">
<div class="card-header header-elements-inline">
<h5 class="card-title">
<xp:text escape="true" id="computedField5" value="#{unvanDoc.AdSoyad}"
rendered="false">
</xp:text>
</h5>
<div class="header-elements">
<div class="list-icons">
</div>
</div>
</div>
<div class="card-body">
<div class="modal-body">
<xp:div styleClass="bootstrap-duallistbox-container row moveonselect">
<xp:div styleClass="col-lg-12 col-md-12">
<xp:div id="divGTarih" styleClass="form-group row">
<xp:label value="Geçerlilik Tarihi:" id="label2"
styleClass="col-form-label col-lg-3 col-md-3"></xp:label>
<xp:div styleClass="col-lg-9 col-md-9">
<xe:djDateTextBox styleClass="form-control pickadate picker__input"
id="BasTarih" value="#{document1.BasTarih}">
<xe:this.converter>
<xp:convertDateTime type="date"
dateStyle="short">
</xp:convertDateTime>
</xe:this.converter>
</xe:djDateTextBox>
<xe:djDateTextBox id="BitTarih" value="#{document1.BitTarih}"
styleClass="ml-6">
<xe:this.converter>
<xp:convertDateTime type="date"
dateStyle="short">
</xp:convertDateTime>
</xe:this.converter>
</xe:djDateTextBox>
</xp:div>
</xp:div>
</xp:div>
</xp:div>
</div>
</div>
</xp:div>
</div>
</div>
</div>
UPDATE
I could not find the correct z-index property of DojoComponent I mean correct class. Please find the picture of code. When click on it I see lots of classes. I have tried so many classes but I am tired of trying :((( is there any clue that i can follow..
Thanks in advance...
I want use ngb-carousel with ngFor,My code like this:
code
but this make some error like this:
<ngb-carousel>
<template ngFor let-home [ngForOf]="homes | async" >
<ngbSlide [home]="home">
<img src="{{item.thumb}}" alt="Random first slide">
</ngbSlide>
</template>
</ngb-carousel>
home.component.html?c8ce:1 Error: Template parse errors:(…)
who can give me a example use ngb-carousel with ngFor?
The syntax for ng-bootstrap slides is <template ngbSlide> and we don't have the <ngbSlide> element / component hence the parsing error. What you should be doing instead is to have ngFor generate <template ngbSlide> like so:
<ngb-carousel>
<template *ngFor="let imgIdx of [1, 2, 3]" ngbSlide>
<img src="http://lorempixel.com/900/500?r={{imgIdx}}" alt="Random slide no {{imgIdx}}">
<div class="carousel-caption">
<h3>slide label no {{imgIdx}}</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</template>
</ngb-carousel>
Here is a working plunker showing this in action: http://plnkr.co/edit/FXx9Q0UO14sp0RqbPnVh?p=preview
This might be a late answer, but if your the images from your database or anywhere for that matter is an Array. So you can iterate through them using NgFor on the HTML.
carousel.component.html
<ngb-carousel *ngIf="images!=null">
<div *ngFor="let image of images">
<ng-template ngbSlide>
<div class="picsum-img-wrapper">
<img src="{{image}}" alt="image">
</div>
</ng-template>
</div>
</ngb-carousel>
The ngfor will create ng-template equal to the length of the array.
carousel.component.ts
images = ['image1', 'image2', 'image3'];
At the first picture everything is ok.
But if i make the width of my browser a little bigger, the result is the following:
Each md-card overlaps the next one and adds overflow-y. This issue is only on xs resolutions. Here is my html:
<div ng-view="" flex="" class="ng-scope flex">
<md-content layout-xs="column" layout="row" class="md-padding ng-scope layout-xs-column layout-row">
<div layout="column" layout-gt-xs="row" layout-wrap="" infinite-scroll="ctrl.nextArticles()" infinite-scroll-disabled="ctrl.isBusy || ctrl.isEnd" infinite-scroll-distance="1" class="layout-wrap ng-isolate-scope layout-gt-xs-row layout-column">
<!-- ngRepeat: article in ctrl.articles -->
<div ng-repeat="article in ctrl.articles" class="post ng-scope flex-xs-100 flex-xl-20 flex-sm-50 flex-md-33 flex-lg-25" flex-xs="100" flex-sm="50" flex-md="33" flex-lg="25" flex-xl="20">
<md-card>
<md-card-header>
<md-card-avatar>
<img src="/images/sidenav-icons/Bomb.svg">
</md-card-avatar>
<md-card-header-text>
<span class="md-title ng-binding">FakeTitle147</span>
<span class="md-subhead ng-binding">FakeRubric3</span>
</md-card-header-text>
</md-card-header>
<img ng-src="/images/test-img.jpg" alt="*ALT*" class="md-card-image" src="/images/test-img.jpg">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card header</span>
</md-card-title-text>
</md-card-title>
<md-card-content>
<p>
The titles
</p>
</md-card-content>
<button class="md-button md-ink-ripple" type="button" ng-transclude="" ng-click="ctrl.showArticle(article._id)" aria-label="Button">
<span class="ng-scope">Button</span>
</button>
</md-card>
I have no custom css (only background-color). Thanks for your ideas.
The problem was in layout="column". I just replaced this:
<div layout="column" layout-gt-xs="row" layout-wrap="" ...
to this:
<div layout="row" layout-wrap="" ...
This solution is OK for me.
<li style="width: 20%">
<div class="thumbnail" style="width: 200px">
<div class="fader">
<img src="./Images/slide-01.jpg" alt="">
</div>
<div class="caption">
<h5>
Thumbnail label</h5>
<p>
porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p>
<p align="center">
<asp:Button runat="server" class="btn btn-primary" ID="lnk" Text="View" />
</p>
</div>
</div>
</li>
If i want to repeat list 12 times using for loop or some other looping condition.
Can you help how to solve !!
You can use a asp:repeater for this type of scenario if using webforms
using a repeater
Bind repeater to generic list
Since you're using ASP.NET and you want to display server-side controls (asp:Button) you can't simple construct your HTML as string and output it to the page.
Define your UL/OL tag with runat = "server" attribute, so it is accessible in server-side code.
<ul id="myList" runat="server" ></ul>
Then add LI and the rest of them as child Controls of the original element.
Dim li As HtmlGenericControl
For I = 1 To 12
li = New HtmlGenericControl("li")
li.Style("width") = "width: 20%"
myList.Controls.Add(li)
Next
The VB.NET example above builds UL with 12 LI elements. Similarly an LI element has .Controls property of it's own to which you can add other controls (DIV etc.)
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>