Swap between spin and static images

This demo shows a single 360 spin 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="/wp-content/themes/sirv/js/magicscroll/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
<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>