Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
amar kumar10amar kumar10 

Implementing Image slider in VisualForce

I am tryng to implement Image Slider in visualforce. This is my code so far can anyone please help me with this. In this code i have added 3 images but Its only showing the first image and slider is also not working.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<html lang="en">
    <head>
        <!-- Bootstrap core CSS --> 
        <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/css/bootstrap.min.css')}"/>
        <title>Image Slider Using Bootstrap</title>
        
        <!-- <apex:image alt="Challenge Image1" title="Challenge1" url="{!URLFOR($Resource.Challenge1, 'Challenge1.jpg')}"/> -->
        <!-- <apex:image url="{!$Resource.Challenge1}"/> -->
    </head>
<body>
<div class="container text-center">
<!-- Inside body ----------------------------------------------------------------------------------------------------------------------------------- -->

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
     
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- <img src="http://placehold.it/1200x315" alt="..." /> -->
                <apex:image url="{!$Resource.Challenge1}"/>
                <div class="carousel-caption">
                    <h3>Caption Text</h3>
                </div>
            </div>
            
            <div class="item">
                <!-- <img src="http://placehold.it/1200x315" alt="..." /> -->
                <apex:image url="{!$Resource.Challenge2}"/>
                <div class="carousel-caption">
                    <h3>Caption Text</h3>
                </div>
            </div>
    
            <div class="item">
                <!-- <img src="http://placehold.it/1200x315" alt="..." /> -->
                <apex:image url="{!$Resource.Challenge3}"/>
                <div class="carousel-caption">
                    <h3>Caption Text</h3>
                </div>
            </div>
        </div><!-- Wrapper for slides End -->
 
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        
    </div> <!-- Carousel -->

<!--Inside Body end -------------------------------------------------------------------------------------------------------------------------------- -->    
</div>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>
    <apex:includescript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/js/bootstrap.min.js)"/>
    
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/js/bootstrap.js)"/>
</body>
</html>
</apex:page>
Manish BhatiManish Bhati
Try this:- 
<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<html lang="en">
    <head>
        <!-- Bootstrap core CSS --> 
        <apex:stylesheet value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/css/bootstrap.min.css')}"/>
        <title>Image Slider Using Bootstrap</title>
        
        <!-- <apex:image alt="Challenge Image1" title="Challenge1" url="{!URLFOR($Resource.Challenge1, 'Challenge1.jpg')}"/> -->
        <!-- <apex:image url="{!$Resource.Challenge1}"/> -->
    </head>
<body>
<div class="container text-center">
<!-- Inside body ----------------------------------------------------------------------------------------------------------------------------------- -->

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
     
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <!-- <img src="http://placehold.it/1200x315" alt="..." /> -->
                <apex:image url="{!$Resource.Challenge1}"/>
                <div class="carousel-caption">
                    <h3>Caption Text</h3>
                </div>
            </div>
            
            <div class="item">
                <!-- <img src="http://placehold.it/1200x315" alt="..." /> -->
                <apex:image url="{!$Resource.Challenge2}"/>
                <div class="carousel-caption">
                    <h3>Caption Text</h3>
                </div>
            </div>
    
            <div class="item">
                <!-- <img src="http://placehold.it/1200x315" alt="..." /> -->
                <apex:image url="{!$Resource.Challenge3}"/>
                <div class="carousel-caption">
                    <h3>Caption Text</h3>
                </div>
            </div>
        </div><!-- Wrapper for slides End -->
 
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
        
    </div> <!-- Carousel -->

<!--Inside Body end -------------------------------------------------------------------------------------------------------------------------------- -->    
</div>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <apex:includescript value="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>
    <apex:includescript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/js/bootstrap.min.js')}"/>
    
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.6-dist/js/bootstrap.js')}"/>
</body>
</html>
</apex:page>

Mark it as answer.

Cheers
Rohit K SethiRohit K Sethi
Looks like Manish Bhati was able to solve your question. Could you please mark his answer as best so that it appears as solved and he gets credit for it?
amar kumar10amar kumar10
Thanks @Manish
amar kumar10amar kumar10

Hi Manish,

I tried your code but its working same as my code. The main thing is image are not changing automatically.
Manish BhatiManish Bhati
Hi Amar,

Your code was missing some quotes because of which slider was not working when I tried, also these quotes error are hard to identify, if one has not written the code.

for changing the image automatically you have to just change line no 15 to :-
  
​<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">

if you want the image to change automatically in 3 seconds.

Hope this may help you.
 
amar kumar10amar kumar10
Hi Manish,

Thanks for your help, My image slider is working now by adding these lines.
   <script>
        $('.carousel').carousel({
            interval: 3000
        })
    </script>

Thank you very much for your time and help.
NerdyNerdy
Hello Manish, Aamar
I have a question related to this slider
I tried your code to implement slider..it works when i clik preview, but i can't add it as a VF page in layout ..I don't even find it. What's wrong ?