0

I am trying to create a carousel with images being fetched from salesforce database.

The carousel works fine when the images are hardcoded on the page but doesn't work when I use repeat tag and fetch the images from sf database.

here's the code which works:

<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>
    <script>
var time=1000;
var countdownTimer = setInterval('callNext()', 3000);
function callNext(){
time--;
if(time!=0){
console.log('**Time**'+time);
document.getElementById('thebutton').click();
}
else 
clearInterval(countdownTimer);
}
    </script>
<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:page>

here's the code with repeat tag that doesn't work:

<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>
<script>    
var countdownTimer = setInterval('callNext()', 4000);
var time=1000;
function callNext(){
time--;
if(time!=0){
console.log(time);
document.getElementById('thebutton').click();

}
else 
clearInterval(countdownTimer);
}

</script>
</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>


</apex:page>

apex 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;
    }
}
Improve this question
1
  • Please edit your post to describe what is not working. Do you see a blank area, just one image, or all images?
    – David Cheng
    Commented Sep 9, 2019 at 4:29

1 Answer 1

Reset to default
0

This can be done in two ways:

  1. You should have to create imageLst in the CarouselTestController's constructor like this :
public class CarouselTestController {
    public List<string> imageLst{get;set;}
    public CarouselTestController(){
       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');
    }
}

VF Code will be for this:

<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>
  1. You can also use get method to fetch your values , see the below example :
public class CarouselTestController {
     public String[] getFetchImages() {
        return new String[]{'http://lorempixel.com/1500/600/abstract/1','http://lorempixel.com/1500/600/abstract/3','http://lorempixel.com/1500/600/abstract/4'};
    }
}

VF will be :

 <apex:repeat value="{!FetchImages}" 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>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .