slideshow using Twitter Bootstrap Carousel

Views and Views bootstrap and you're good to go.

It seems the first thing you need is to read Views documentation: http://drupal.org/node/109604
Once you understand the way Views works, it shouldn't be a problem to build the slideshow/carousel in your example — or is there anything I'm missing in your support request?

Hi there,

For implementing TB carousel you could do next:

1. Create view:

• Unformatted list
• Add class "item" - to Row class

2. Showing fields

• For title or description
• Style settings
• Customize filed HTML
• HTML element: DIV
• Create a CSS class - Yes
• CSS class: "carousel-caption"

3. Find Theme: Information - for this view

• Create new file in theme for: Display output(for example).

In Display output add:

<div class="hidden-phone carousel slide">
    <?php if ($rows): ?>
    <div class="carousel-inner">
      <?php print $rows; ?>
    </div>
    <?php endif; ?>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

I will assume that you have all ready included bootstrap.js and jquery. Now you can add initialization for TB carousel:
$('.carousel').carousel()

Just to add to markojovanovich's good instructions above, one thing you'll struggle with is adding the .active to the first row/item. We found jQuery the best solution:

$(".carousel-inner div:first").addClass("active");

... or create an ID for the '.carousel-inner' div and use that for slightly better performance.

Hi,

I want to display the carousel on my front page.
Where in my theme do create the file and what name should i give it? and where do i add the above php code from markojovanovich? i'm trying to display the carousel on my front page in using blocks.

Grtz,

Chennard

I'm using the 7.x-3.0 branch and here's what's working for me so far in the style template:

<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
  </ol>
  <div class="carousel-inner">
    <?php foreach ($rows as $id => $row): ?>
      <div<?php if ($classes_array[$id]): ?>
        <?php print ' class="' . $classes_array[$id]; ?>
        <?php if ($id == 0) { print ' active'; } ?>
        <?php print '"'; ?>>
      <?php endif; ?>
        <?php print $row; ?>
      </div>
    <?php endforeach; ?>
  </div>

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Granted, the carousel indicators are hardcoded (i'd love to hear how folks may have had success in making these dynamic related to the number of rows in the view), but the first row finally has the "active" class without the need for additional scripts! As a non-developer, that took more time than i care to admit...

Try this for dynamically generated indicators...

<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators">
		<?php foreach ($rows as $id => $row): ?>
		<li data-target="#carousel-example-generic" data-slide-to="<?php print $id; ?>"<?php if ($id == 0) { print ' class="active"'; } ?>
		</li>
		<?php endforeach; ?>
	</ol>
	<div class="carousel-inner">
		<?php foreach ($rows as $id => $row): ?>
		<div<?php if ($classes_array[$id]): ?>
        <?php print ' class="' . $classes_array[$id]; ?>
        <?php if ($id == 0) { print ' active'; } ?>
        <?php print '"'; ?>>
			<?php endif; ?>
			<?php print $row; ?> </div>
		<?php endforeach; ?>
	</div>
	<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> 
	<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
</div>

You're just using the same process for the indicators as you are the items, i.e., looping through them and doing something different for the first one.

Adam,

Brilliant, works like a charm. Thank you!

One final question: Do you know how to/if it's possible to print the machine name of the display in this view? For example i'd like to do something like:

...
<div id="<?php print [DISPLAY_MACHINE_NAME]; ?>" class="carousel slide" data-ride="carousel">
...
<li data-target="#<?php print [DISPLAY_MACHINE_NAME]; ?>"
...
<a class="left carousel-control" href="#<?php print [DISPLAY_MACHINE_NAME]; ?>" data-slide="prev">
...

Which for me would yield:

<div id="front_featured_block" class="carousel slide" data-ride="carousel">
...
<li data-target="#front_featured_block"
...
<a class="left carousel-control" href="#front_featured_block" data-slide="prev">
...

The reason i want to do this is because i plan to use the same view (with multiple displays) to create all the Bootstrap Carousels for my website. This seems like an efficient way to eliminate the need for a whole bunch of (almost) identical templates while at the same time ensuring each instance is unique (in the case, for example, that i'm displaying two carousel blocks on the same page).

You can use:

<?php print $view->name; ?>

Adam,

Thanks again for getting me one step closer. In this case i'm actually trying to drill one level deeper into the display ID or machine name of the display within the view.

That is to say, using:
<?php print $view->name; ?>
i end up printing the name of my entire view, which is called "bootstrap_carousel". But what i really want to do is print the specific display ID or machine name. Something like:
<?php print $view->name>display_id; ?>
In my case, this would print, "front_featured_block".

Maybe this is super simple, or maybe that isn't available to this template?

You can see all of the data available to you by adding this to your template file:

 print_r($view); 

If you just want the display ID, then use: <?php echo $view->current_display; ?>, however this wont provide a truly unique id, as another view could have the same display id. Using a combination of the view machine name and display id would be best. So:

<?php echo $view->name . '-' . $view->current_display; ?>

You may want to tidy that, to change the underscores used, i.e., block_1, to hyphens. To do that:

<?php $view_id = str_replace('_', '-', $view->name . '-' . $view->current_display); echo $view_id; ?>

Adam,

I really owe you one. Everything you've shared is super helpful. The string-replace stuff was the icing on the cake...

Mission accomplished!

No problem. I think we've created a perfect Views style template for Bootstrap carousels with these different elements.

Here's a tidied up version incorporating everything from this thread...

<?php $view_id = str_replace('_', '-', $view->name . '-' . $view->current_display); ?>
<?php if (!empty($title)): ?>
<h3><?php print $title; ?></h3>
<?php endif; ?>
<div id="<?php print $view_id; ?>" class="carousel slide" data-ride="carousel"> 
	<!-- Indicators -->
	<ol class="carousel-indicators">
		<?php foreach ($rows as $id => $row): ?>
		<li data-target="#<?php print $view_id; ?>" data-slide-to="<?php print $id; ?>"<?php if ($id == 0) { print ' class="active"'; } ?>></li>
		<?php endforeach; ?>
	</ol>
	<!-- Wrapper for slides -->
	<div class="carousel-inner">
		<?php foreach ($rows as $id => $row): ?>
		<div class="item<?php if ($id == 0) { print ' active'; } ?>"> <?php print $row; ?> </div>
		<?php endforeach; ?>
	</div>
	<!-- Controls --> 
	<a class="left carousel-control" href="#<?php print $view_id; ?>" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> 
	<a class="right carousel-control" href="#<?php print $view_id; ?>" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
</div>

Fantastic.

I do hope folks using things like:

• https://drupal.org/project/bootstrap_carousel
• https://drupal.org/project/views_bootstrap
• and even support requests like Drupal 7: How to create a slideshow using Twitter Bootstrap Carousel?

will find a way to access this option more easily.

Maybe the maintainers of this and/or those modules could somehow feature this views recipe more prominently. Would it be ridiculous to think this .tpl could even go into the Bootstrap theme itself (with a good README)?

Thanks again markojovanovich, Adam Wood and others for your valuable input!

Changing category and status just in case the maintainers want to consider this. Of course they can close it right away if not.

Drupal wiki pages are editable by everyone. Please edit the Bootstrap Documentation sub-pages directly. This base theme's code base is not an appropriate place for this information.