Product detail - more than one main image

[caesarsk]

hi all,
I need to do in my shop exactly something like that (http://row.jimmychoo.com/en/women/shoes/anouk/black-patent-leather-pointy-toe-pumps-ANOUKPAT001.html?cgid=women-shoes#start=1).
simply put, use main images carousel.
can anyone advise me how to do it?

thx

[Ghost]

"Open additional images in the main position" option makes images work similarly. If you want to make it look exactly like on that page, it's a matter of template/customization. Would need to write some custom JS and CSS.

[Ghost]

Here is basic Bootstrap carousel example for VM:

Code Select Expand

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
  <?php $i = 0; foreach($this->product->images as $image){ ?>
    <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i ?>"<?php if ($i == 0){?> class="active"<?php }?>></li>
<?php $i++;}?>
  </ol>
  <div class="carousel-inner" role="listbox">
  <?php $i = 0; foreach($this->product->images as $image){ ?>
    <div class="carousel-item<?php if ($i == 0){?> active<?php }?>">
      <img src="<?php echo $image->file_url ?>" alt="<?php echo $image->file_meta ?>">
    </div><?php $i++;}?>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only"><?php echo JText::_('JPREV')?></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only"><?php echo JText::_('JNEXT')?></span>
  </a>
</div>http://v4-alpha.getbootstrap.com/components/carousel/

[caesarsk]

thx, i try this