Forums (Obsolete)

Member

esolutions - 9/19/2013 3:17:20 PM

bootstrap carousel

Hello, I am trying to add the bootstrap 3 carousel (photo rotator) to work in a Kentico site. Here is the code to display the carousel:

<div id="myCarousel" class="carousel slide">
<!-- 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>
  </ol>
  <div class="carousel-inner">
    <div class="item active"><img style="width: 100%; display: block;" src="imgs/image1.png" alt="Image 1"></div>
    <div class="item"><img style="width: 100%; display: block;" src="imgs/image2.png" alt="Image 2"></div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"></a>
</div>

The code in blue I have in the template (surrounding) the webpart. The code in the red is repeated dependent on how many images they have uploaded (in this example, there is two) so some sort of repeater is going to need to be used (I think). I'm unsure how to handle the rest of the code.

I'm thinking that possibly, the Hierarchical Transformation could be used but I am really unfamiliar with how to set this up.

Does anyone have any suggestions on how I should attack this? Suggestions on what webpart/transformation I could use?

I'm fairly new with Kentico.

Thanks in advance!

Kentico Legend

Brenden Kehren - 9/20/2013 8:14:59 AM

RE:bootstrap carousel

I'll assume you are going to want to display document types in your carousel. If you don't have a carousel doc type, its very easy to create one but we will get there when the time comes. For now we'll just assume you are going to upload images in the content tree.

You'll need 2 repeaters on your page, one for the indicators, and one for the actual slider images. I'll show you how to add the one for images. The one for the indicators will be very similar to the images.

Start by adding a Repeater webpart to your page template. Set the Document types = CMS.File. Set the Transformation = cms.file.<create a new transformation>. When creating your new transformation use this code

<div class="item">
  <img style="width: 100%; display: block;" src="imgs/image1.png" alt="Image 1">
</div>

Then in the HTML Envelope set the content before =

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">

and the content after

  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"></a>
  <a class="right carousel-control" href="#myCarousel" data-slide="prev"></a>
</div>

You can set the Path to the images but by default the path is the everything below the current document, so if it becomes a problem later then change it otherwise leave it.

Setting up the indicator repeater would be very similar but you need to get creative on where you put the opening and closing <div> tags for the carousel container. You can put the opening tag in one webpart content before and the closing tag in the other webpart content after and you should be set.

Hope this helps.

Member

esolutions - 9/24/2013 8:54:45 AM

RE:bootstrap carousel

Fantastic... thanks so much. I have setup how you explained above.

So my only questions now are:

1 - for the images, I need to mark the first image with a class of "item active"

<div class="item active"><img style="width: 100%; display: block;" src="imgs/image1.png" alt="Image 1"></div>

And all remaining ones with the class of just "item":

<div class="item"><img style="width: 100%; display: block;" src="imgs/image2.png" alt="Image 2"></div>

2 - for the indicators, I need to do the same thing, the first one:

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

While all remaining ones will have no style associated with them. However, each remaining indicator is different in that the data-slide-to value should increment corresponding with how many images there are:

<li data-target="#myCarousel" data-slide-to="1"></li>

Is there a way to "count" how many images there are so that I can track how many indicators there should be (all within the transformation)?


Kentico Legend	Brenden Kehren - 9/24/2013 9:15:46 AM RE:bootstrap carousel Try this class="item<%# (DataItemIndex == 0 ? " active" : "" ) %>"


Member	esolutions - 9/24/2013 9:58:43 AM RE:bootstrap carousel Thank you very much. That worked perfectly. Is there any documentation on the "DataItemIndex" type stuff that you can use in Transformations? I'd like to give that a read to understand everything that you could use within a Transformation.


Kentico Legend	Brenden Kehren - 9/24/2013 10:23:33 AM RE:bootstrap carousel When you're editing or creating a transformation, click the ? Transformation Examples link just above the textbox with your transformation code in it. Otherwise you can get to it via your local website via http://yourdomain.com/CMSHelp/index.html?newedit_transformation_methods.htm