Swap between spin and static images

This demo shows a single 360 degree product view with some static images of a product.

Click thumbnails to select them. Drag them to move the slider:










The scroller used in this demo is Magic Scroll. To achieve the same effect as above, download Magic Scroll. For configuration assistance, submit the form in your account to contact the Sirv support team.

Thumbnail image sliders can be placed to the top, right, bottom or left of the main image. The slider can contain unlimited numbers of images and 360 spins.

If you don’t already have a Sirv account, create one here.

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://scripts.sirv.com/sirv.js"></script>
<script type="text/javascript" src="/link/to/your/file/magicscroll.js"></script>
<link href="/link/to/your/file/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
/* You must download magicscroll.js and and magicscroll.css and upload to your server. */
<div class="SirvScrollContainer" style="">
    <div class="selectorsContainer">
        <div class="MagicScroll" data-options="items:7; orientation:vertical;height:410px;">
            <img data-slide="0" class="selector active" href="#" src="https://magictoolbox.sirv.com/images/misc/360icon.jpg?scale.width=75"/>
            <img data-slide="1" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-1.jpg?scale.width=75"/>
            <img data-slide="2" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-2.jpg?scale.width=75"/>
            <img data-slide="3" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-3.jpg?scale.width=75"/>
            <img data-slide="4" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-4.jpg?scale.width=75"/>
            <img data-slide="5" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-5.jpg?scale.width=75"/>
            <img data-slide="6" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-6.jpg?scale.width=75"/>
            <img data-slide="7" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-7.jpg?scale.width=75"/>
            <img data-slide="8" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-8.jpg?scale.width=75"/>
            <img data-slide="9" class="selector" href="#" src="https://sirv.sirv.com/website/demos/vivo/vivo-static-9.jpg?scale.width=75"/>
        </div>
    </div>
    <div class="slideContainer">
        <div class="slide active" id="slide-0">
            <div class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo.spin"></div>
        </div>
        <div class="slide" id="slide-1"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-1.jpg"/></div>
        <div class="slide" id="slide-2"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-2.jpg"/></div>
        <div class="slide" id="slide-3"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-3.jpg"/></div>
        <div class="slide" id="slide-4"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-4.jpg"/></div>
        <div class="slide" id="slide-5"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-5.jpg"/></div>
        <div class="slide" id="slide-6"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-6.jpg"/></div>
        <div class="slide" id="slide-7"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-7.jpg"/></div>
        <div class="slide" id="slide-8"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-8.jpg"/></div>
        <div class="slide" id="slide-9"><img class="Sirv" data-src="https://sirv.sirv.com/website/demos/vivo/vivo-static-9.jpg"/></div>
    </div>
</div>
<div style="clear:both;"></div>

 <style type="text/css">
    .SirvScrollContainer { padding-left:80px; }
    .SirvScrollContainer .selector { cursor:pointer; }
    .selectorsContainer { display:inline-block;width:80px; float: left; margin-left:-80px; }
    .slideContainer { display:block; max-width:100%; }
    .slideContainer .slide { display: none; /*max-height:470px;*/ }
    .slideContainer .slide img { }
    .slide.active { display: block; }
    .mcs-item img { border:1px solid transparent; }
    .mcs-item img.active { border-color:#000; }
</style>