Sign Up ›
  • Paritosh Parimal
  • NEWBIE
  • 0 Points
  • Member since 2017
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
5 replies

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>