I'd like to make a carousel exactly like the picture below, 6 thumbnail node on the left side, 1 highlighted node in the middle and again 6 thumbnail node on the right side, and when the user clicks on the controls, the next set of nodes shows up.

enter image description here

I guess it must be possible to achieve this with the output of the views and using a module like OwlCarousel to achieve this, but so far I couldn't make it work! I'd really appreciate a full detailed answer.

  • View Fieldset module can be of some help drupal.org/project/views_fieldsets – arpitr Sep 19 '15 at 10:12
  • I assume you don't want to use JavaScript? – jonathanbell Sep 19 '15 at 13:23
  • I rather not, but if there's no way around it, I should I guess – user23288 Sep 19 '15 at 20:09
  • 1
    there is a way, think harder. – No Sssweat Sep 21 '15 at 2:47
  • 3
    @NoSssweat you should totally leave that comment as an answer so he can give you your well deserved bounty :D – Sohail Sep 23 '15 at 9:09

If you are looking for an easy to implement approach try this:

  • Make a Content-type called: "Slideshow"

Make three different Entity Reference field referencing your desired nodes (your another content-type that you want to show)

call your entity reference fields like: "Right", "Middle" & "Left".

  • Create a node of content-type "Slideshow" Using display suite module and view format of Rendered Entity define your image sizes and extra fields you want for your "Middle" node.

  • Create a views of Slideshow nodes using OwlCarousel or any other carousel module you want.

  • Do a little bit of CSS magic and you must be good to go!

  • This sounds promising, I will let you know – user23288 Oct 18 '15 at 13:48
  • That was just so simple, I don't know how I didn't come up with this myself, thanks. – user23288 Oct 18 '15 at 14:47

You could do this with the jCarousel module:

  1. Build your view to show the required nodes in the order you wish them to show.
  2. Enable jCarousel view format
  3. Create a style output template using a file name from OTHER -> Theme: Information -> Style output
  4. Copy the code from the style template offered by the jCarousel module
  5. Change the template code to output 7 rows at a time with the necessary wrappers and classes to make it look like your design
  6. Make sure the .jcarousel and .jcarousel-clip divs are outside each group of 7 rows. [edit: it appears this happens outside of the template file, so not usually something you'll need to worry about]

Here's something to get you started with the style template file:


 * @file jcarousel-view.tpl.php
 * View template to display a list as a carousel.
$count = 0;
$rowcount = count($rows);
<ul class="<?php print $jcarousel_classes; ?>">
  <?php while ($count < $rowcount): ?>
    <li class="<?php print $row_classes[$id]; ?>" style="display: none;">
      <?php // Print your seven rows here ?>


    <?php // Advance the counter ?>
    <?php $count += 7; ?>
    <?php // Depending on how you print your rows you may wish to slice 7 items off the $rows array ?>
    <?php $rows = arracy_slice($rows, 7); ?>
  <?php endwhile; ?>

Note that if you're referencing each row like $row[id] you may need to do a check before printing each one unless you're certain there will be a multiple of 7 rows in your view.

  • Okay can I still use OwlCarousel? also I know this is how I should do it, I wonder how can I make the highlighted node image style bigger – user23288 Sep 24 '15 at 16:09
  • I don't know owl carousel but I imagine the principles are the same. Give the third item in the group a different class, wrap the others in dive as pairs. – Darvanen Sep 24 '15 at 20:34
  • can you please help me with the output and elaborate more? also if I use a different class how can I use a different Image style, not just different width and height with CSS? – user23288 Sep 24 '15 at 23:09
  • Sorry, that kind of question (about CSS) belongs on Stack OverFlow. As for the output, I'll come back later, I'm at work at the moment. – Darvanen Sep 28 '15 at 23:28
  • yep thx for the reply, I'm not asking about CSS though! – user23288 Oct 5 '15 at 5:45

Simply You could build the view to get content needed then from

OTHER -> Theme: Information -> Style

make the tpl file with the name suggested

In that file you could take the source of the markup that you need to build in the image you provided and start make the content be dynamic using that piece of

foreach ($view->style_plugin->rendered_fields as $delta => $item):
 //Do stuff here, you could control items display and order to meet your case and add the html 

After building the same html markup needed for that layout, Start add your js and css files needed by that plugin

by that way you could have full control over the items being rendered and markup out of views display settings and without needing extra modules

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy