Swap between multiple 360 spins

You can embed as many 360 spins on your page as you wish. A gallery is a popular way to embed multiple spins.

Gallery demo

The gallery below shows 7 spins, keeping them neatly organized:

Implementation

Follow the steps below to replicate the example above.

1. Upload your spins to your Sirv account. You can store them all in one folder or put each spin in its own folder:

2. The multiple 360 slider and its thumbnails were inserted using this code:

<div class="Sirv" data-options="slide.animation.type:slide; slide.animation.duration:600">
   <div data-src="https://sirv.sirv.com/website/demos/shuwish/DARCY_GREEN_SUED_3/DARCY_GREEN_SUED_3.spin"></div>
   <div data-src="https://sirv.sirv.com/website/demos/shuwish/DARCY_RED_SUED_3/DARCY_RED_SUED_3.spin"></div>
   <div data-src="https://sirv.sirv.com/website/demos/shuwish/DARCY_YEL_SUED_3/DARCY_YEL_SUED_3.spin"></div>
   <div data-src="https://sirv.sirv.com/website/demos/shuwish/DARCY_VIO-PURP_SUED_3/DARCY_VIO-PURP_SUED_3.spin"></div>
   <div data-src="https://sirv.sirv.com/website/demos/shuwish/DARCY_MULTI_GLITT_3/DARCY_MULTI_GLITT_3.spin"></div>
   <div data-src="https://sirv.sirv.com/website/demos/shuwish/DARCY_SILV_GLITT_3/DARCY_SILV_GLITT_3.spin"></div>
   <div data-src="https://sirv.sirv.com/website/demos/shuwish/DARCY_NAVY_PAT_3/DARCY_NAVY_PAT_3.spin"></div>
</div>

<style>
  .smv-thumbnails .smv-item.smv-active .smv-selector {
    border-color:rgba(176, 177, 183, 1);
  }

  .smv-thumbnails .smv-selector[data-type="spin"]:before {
    background-image: none !important;
    background-color: transparent !important;
  }
</style>

3. Reference the sirv.js script before your </head> tag if possible, otherwise somewhere in the body of your page:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

Create your own slider

Use the Sirv Media Viewer generator to create your own gallery slider with 360 spins, videos and image zooming.

Expert help

If you need help embedding multiple 360 spins in your page, please send a message to the Sirv support team via the support form in your account.

Create an account

If you don't already have a Sirv account, get started now.