<apex:page showHeader="false" sidebar="false">
Bootstrap Example.carousel-inner >.item > img,.carousel-inner >.item > a > img{width: 70%;margin: auto;}var time=1000;var countdownTimer = setInterval('callNext()', 3000);function callNext(){time--;if(time!=0){console.log('**Time**'+time);document.getElementById('thebutton').click();}elseclearInterval(countdownTimer);}<apex:page showHeader="false" sidebar="false">
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<script>
var time=1000;
var countdownTimer = setInterval('callNext()', 3000);
function callNext(){
time--;
if(time!=0){
console.log('**Time**'+time);
document.getElementById('thebutton').click();
}
else
clearInterval(countdownTimer);
}
</script>
<body>
<div class="container">
<br></br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" alt="Chania" width="460" height="345"/>
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" alt="Chania" width="460" height="345"/>
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" alt="Flower" width="460" height="345"/>
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/4" alt="Flower" width="460" height="345"/>
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<!-- Get the Images from the attachment .
<div class="item">
<img src="{!URLFOR($Action.Attachment.Download, '00P90000011kM61')}" alt="Flower" width="460" height="345"/>
<div class="carousel-caption">
<h3>Blogettan</h3>
<p>Beatiful Blogettan</p>
</div>
</div>
-->
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
</apex:page>
here's the code with repeat tag that doesn't work:
<apex:page showHeader="false" sidebar="false" controller="CarouselTestController" docType="html-5.0">
Bootstrap Example.carousel-inner >.item > img,.carousel-inner >.item > a > img{width: 70%;margin: auto;}var countdownTimer = setInterval('callNext()', 4000);var time=1000;function callNext(){time--;if(time!=0){console.log(time);document.getElementById('thebutton').click();} else clearInterval(countdownTimer); }
Chania
The atmosphere in Chania has a touch of Florence and Venice.
Next</apex:page>
<apex:page showHeader="false" sidebar="false" controller="CarouselTestController" docType="html-5.0">
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
<script>
var countdownTimer = setInterval('callNext()', 4000);
var time=1000;
function callNext(){
time--;
if(time!=0){
console.log(time);
document.getElementById('thebutton').click();
}
else
clearInterval(countdownTimer);
}
</script>
</head>
<body>
<div class="container">
<br></br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<apex:variable value="0" var="num"/>
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<apex:repeat value="{!imageLst}" var="c">
<div class="item active">
<img src="{!c}" width="460" height="345"/>
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</apex:repeat>
<a class="right carousel-control" href="#myCarousel" id="thebutton" role="button" data-slide="next" style="visibility:hidden;">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>
</html>
</apex:page>
public class CarouselTestController { public List imageLst{get;set;} public List fetchImages(){ imageLst.add('http://lorempixel.com/1500/600/abstract/1'); imageLst.add('http://lorempixel.com/1500/600/abstract/2'); imageLst.add('http://lorempixel.com/1500/600/abstract/3'); imageLst.add('http://lorempixel.com/1500/600/abstract/4'); return imageLst; } }
public class CarouselTestController {
public List<string> imageLst{get;set;}
public List<string> fetchImages(){
imageLst.add('http://lorempixel.com/1500/600/abstract/1');
imageLst.add('http://lorempixel.com/1500/600/abstract/2');
imageLst.add('http://lorempixel.com/1500/600/abstract/3');
imageLst.add('http://lorempixel.com/1500/600/abstract/4');
return imageLst;
}
}
