The
Lab

Test libraries, replacement codes, and more here.

Call Directions

Interior 360 spins

Pannellum

Pannellum is a free and open-source software tool that allows users to create interactive 360-degree panoramas for the web. Pannellum is highly customizable, with a wide range of options available for controlling the appearance and behavior of panoramas. Users can adjust the size and position of the panorama, as well as the field of view and perspective distortion. They can also choose from a range of viewing modes, including fullscreen. One of the advantages of Pannellum is that it is built using modern web technologies, such as HTML5 and WebGL. This means that panoramas created with Pannellum are lightweight and optimized for fast loading and smooth performance on a wide range of devices.

How to use

The Viewer can be used in a variety of ways depending on the needs of the user. It can run independently, or be embedded using an iframe or a JavaScript API. The standalone method is the easiest to use and requires the least integration, but the JavaScript API offers a greater level of control and flexibility. Internally, the standalone viewer processes the URL parameters and builds a JSON-based configuration, which is then used to initialize the viewer with the JavaScript API.

Features

  • Equirectangular, partial, cubic, and multi-resolution panoramas
  • WebGL and CSS 3D based renderers
  • Hot spots / tours
  • Compass headings
  • Plug-in free
  • Framework free
  • Video support
  • API
  • Just 21kB gzipped

*Panoramic images can be provided in either equirectangular, cube map, or multiresolution formats. Equirectangular is the simplest to use as only a single image is needed. In order to ensure support across all WebGL-compatible devices, it is recommended to limit the maximum image size to 4096px wide. However, 8192px is acceptable for most devices.

Browser Compatibility

Pannellum, which is built using current web standards, needs a current browser in order to operate properly.

  • Firefox 23+
  • Chrome 24+
  • Safari 8+
  • Edge

Source Code

Add the scripts below to the sitewide head script and body bottom script so that they were loaded locally from our server rather than from CDN.

Head Script

	
<link rel="stylesheet" type="text/css" href="/assets/shared/CustomHTMLFiles/Responsive/Pannellum/pannellum.css"/>

Body Bottom Script

	
<script src="/assets/shared/CustomHTMLFiles/Responsive/Pannellum/pannellum.js" type="text/javascript" defer></script>

A single pano without any advanced functionality

Body Bottom Script

	
pannellum.viewer('panorama', {
'type': 'equirectangular',
'autoLoad': true,
'yaw': -90,
'hfov': 100,
'compass': true,
'panorama': '/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Carbon-Edition-Red-Leather.jpg'
});

HTML

	
<div id="panorama"></div>

Tabbed Elements with Multiple Pano

2023 Mazda CX-9

Swipe to Spin

Touring Black Leather

Touring Sand Leather

  •

Touring Black Leather

Touring Sand Leather

  •

Carbon Edition Red Leather

Grand Touring Black Leather

Grand Touring Sand Leather

  •

Signature Chestnut Nappa Leather

Signature Parchment Nappa Leather

  •

Body Bottom Script

	
function resizeCanvas(id) {
setTimeout(() => {
const item = panels.find(p => p.id === id);
item.event.resize();
}, 300);
}
function setBtnTrigger(button, id) {
button.addEventListener('click', (evt) => {
resizeCanvas(id);
});
}
function createPanorama(id, img) {
panels.push({
id: id,
event: pannellum.viewer(id, {
"type": "equirectangular",
"autoLoad": true,
"pitch": -30,
"yaw": -90,
"hfov": 100,
"compass": true,
"panorama": img
})
});
}
function newPanorama(id, img, button) {
createPanorama(id, img);
setBtnTrigger(button, id);
}
function initPanorama() {
const panoramasElms = document.querySelectorAll('[panorama-view], [panorama-img]');
for (let button of panoramasElms) {
let itemId = button.getAttribute('panorama-view');
let itemUrl = button.getAttribute('panorama-img');
newPanorama(itemId, itemUrl, button);
}
}
var panels = [];
initPanorama();

HTML

	
<div class="section pad-vert-4x bg-alt1">
<div class="container">
<div class="trimSelector">
<div class="row margin-x pad-bottom-2x">
<div class="col-lg-12">
<h2 class="heading-lg text-center text-uppercase margin-bottom_5x">
<span id="vehicleYear">2023</span>
<span id="vehicleMake">Mazda</span>
<span id="vehicleModel">CX-9</span>
</h2>
<ul class="list-inline list-unstyled margin-bottom-x text-center text-uppercase">
<li class="active series mazdaCX5-exterior-selector br-1x h4 margin-x"><a data-toggle="tab" href="#exterior-tab">EXTERIOR</a></li>
<li class="series mazdaCX5-interior-selector h4 margin-x"><a data-toggle="tab" href="#interior-tab" onclick="resizeCanvas('panorama1')">INTERIOR</a></li>
</ul>
</div>
</div>
</div>
<div class="pad-bottom-3x">
<div class="tab-content margin-top-2x">
<div class="tab-pane fade active in" id="exterior-tab">
<div class="col-lg-12">
<ul class="tabs model pad-x list-inline list-unstyled margin-bottom-x text-center text-uppercase">
<li class="active series h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#exterior-Touring-tab">Touring</a></li>
<li class="series h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#exterior-Touring-Plus-tab">Touring Plus</a></li>
<li class="series h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#exterior-Carbon-Edition-tab">Carbon Edition</a></li>
<li class="series h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#exterior-Grand-Touring-tab">Grand Touring</a></li>
<li class="series h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#exterior-Signature-tab">Signature</a></li>
</ul>
<div class="row margin-vert-2x modelGallery">
<div class="col-md-12 col-sm-12">
<div class="containerSwipe">
<div class="img-container">
<div class="img360">
<div id="myImg" role="img" aria-label="" title="" style="padding-top: 55%;" class="img-background img-cover"></div>
</div>
<div class="text-center" id="swipeInfo">
<span class="small text-uppercase"><i aria-label="Swipe Left" class="fa fa-long-arrow-left"></i> Swipe to Spin <i aria-label="Swipe Right" class="fa fa-long-arrow-right"></i></span>
</div>
</div>
<div id="preload-imgs"></div>
</div>
</div>
</div>
<div class="pad-bottom-3x">
<div class="tab-content margin-top-2x">
<p id="colorName" class="h5 pad-top-1x text-center"></p>
<div class="tab-pane fade active in" id="exterior-Touring-tab">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="exterior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Exterior Colors: </li>
<li>
<div aria-label="Select Exterior Color: Touring Soul-Red Crystal Metallic" class="colorSelector active" data-color="Touring-Soul-Red-Crystal-Metallic" data-disclaimer=" | Extra $595" data-type="Exterior" title="Select Exterior Color: Touring Soul Red Crystal Metallic">
<div class="outershadow">
<div class="swatch ext-red"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Snowflake White Pearl Mica" class="colorSelector" data-color="Touring-Snowflake-White-Pearl-Mica" data-disclaimer=" | Extra $395" data-type="Exterior" title="Select Exterior Color: Touring Snowflake White Pearl Mica">
<div class="outershadow">
<div class="swatch ext-white"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Deep Crystal Blue Mica" class="colorSelector" data-color="Touring-Deep-Crystal-Blue-Mica" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Touring Deep Crystal Blue Mica">
<div class="outershadow">
<div class="swatch ext-blue"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Sonic Silver Metallic" class="colorSelector" data-color="Touring-Sonic-Silver-Metallic" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Touring Sonic Silver-Metallic">
<div class="outershadow">
<div class="swatch ext-silver"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Jet Black Mica" class="colorSelector" data-color="Touring-Jet-Black-Mica" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Touring Jet Black Mica">
<div class="outershadow">
<div class="swatch ext-black"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Machine Gray Metallic" class="colorSelector" data-color="Touring-Machine-Gray-Metallic" data-disclaimer=" | Extra $595" data-type="Exterior" title="Select Exterior Color: Touring Machine Gray Metallic">
<div class="outershadow">
<div class="swatch ext-gray"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="exterior-Touring-Plus-tab">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="exterior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Exterior Colors: </li>
<li>
<div aria-label="Select Exterior Color: Touring Plus Soul Red Crystal Metallic" class="colorSelector active" data-color="Touring-Plus-Soul-Red-Crystal-Metallic" data-disclaimer=" | Extra $595" data-type="Exterior" title="Select Exterior Color: Touring Plus Soul Red Crystal Metallic">
<div class="outershadow">
<div class="swatch ext-red"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Plus Snowflake White Pearl Mica" class="colorSelector" data-color="Touring-Plus-Snowflake-White-Pearl-Mica" data-disclaimer=" | Extra $395 " data-type="Exterior" title="Select Exterior Color: Touring Plus Snowflake White Pearl Mica">
<div class="outershadow">
<div class="swatch ext-white"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Plus Deep Crystal Blue Mica" class="colorSelector" data-color="Touring-Plus-Deep-Crystal-Blue-Mica" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Touring Plus Deep Crystal Blue Mica">
<div class="outershadow">
<div class="swatch ext-blue"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Plus Sonic Silver Metallic" class="colorSelector" data-color="Touring-Plus-Sonic-Silver-Metallic" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Touring Plus Sonic Silver Metallic">
<div class="outershadow">
<div class="swatch ext-silver"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Plus Jet Black Mica" class="colorSelector" data-color="Touring-Plus-Jet-Black-Mica" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Touring Plus Jet Black Mica">
<div class="outershadow">
<div class="swatch ext-black"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Touring Plus Machine Gray Metallic" class="colorSelector" data-color="Touring-Plus-Machine-Gray-Metallic" data-disclaimer=" | Extra $595 " data-type="Exterior" title="Select Exterior Color: Touring Plus Machine Gray Metallic">
<div class="outershadow">
<div class="swatch ext-gray"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="exterior-Carbon-Edition-tab">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="exterior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Exterior Colors: </li>
<li>
<div aria-label="Select Exterior Color: Carbon Edition Polymetal Gray Metallic" class="colorSelector active" data-color="Carbon-Edition-Polymetal-Gray-Metallic" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Carbon Edition Polymetal Gray Metallic">
<div class="outershadow">
<div class="swatch ext-polymetallic"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="exterior-Grand-Touring-tab">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="exterior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Exterior Colors: </li>
<li>
<div aria-label="Select Exterior Color: Grand Touring Soul Red Crystal Metallic" class="colorSelector active" data-color="Grand-Touring-Soul-Red-Crystal-Metallic" data-disclaimer=" | Extra $595" data-type="Exterior" title="Select Exterior Color: Grand Touring Soul Red Crystal Metallic">
<div class="outershadow">
<div class="swatch ext-red"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Grand Touring Snowflake White Pearl Mica" class="colorSelector" data-color="Grand-Touring-Snowflake-White-Pearl-Mica" data-disclaimer=" | Extra $395 " data-type="Exterior" title="Select Exterior Color: Grand Touring Snowflake White Pearl Mica">
<div class="outershadow">
<div class="swatch ext-white"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Grand Touring Deep Crystal Blue Mica" class="colorSelector" data-color="Grand-Touring-Deep-Crystal-Blue-Mica" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Grand Touring Deep Crystal Blue Mica">
<div class="outershadow">
<div class="swatch ext-blue"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Grand Touring Sonic Silver Metallic" class="colorSelector" data-color="Grand-Touring-Sonic-Silver-Metallic" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Grand Touring Sonic Silver Metallic">
<div class="outershadow">
<div class="swatch ext-silver"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Grand Touring Jet Black Mica" class="colorSelector" data-color="Grand-Touring-Jet-Black-Mica" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Grand Touring Jet Black Mica">
<div class="outershadow">
<div class="swatch ext-black"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Grand Touring Machine Gray Metallic" class="colorSelector" data-color="Grand-Touring-Machine-Gray-Metallic" data-disclaimer=" | Extra $595 " data-type="Exterior" title="Select Exterior Color: Grand Touring Machine Gray Metallic">
<div class="outershadow">
<div class="swatch ext-gray"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="exterior-Signature-tab">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="exterior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Exterior Colors: </li>
<li>
<div aria-label="Select Exterior Color: Signature Soul Red Crystal-Metallic" class="colorSelector active" data-color="Signature-Soul-Red-Crystal-Metallic" data-disclaimer=" | Extra $595 " data-type="Exterior" title="Select Exterior Color: Signature Soul Red Crystal Metallic">
<div class="outershadow">
<div class="swatch ext-red"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Signature Snowflake White Pearl Mica" class="colorSelector" data-color="Signature-Snowflake-White-Pearl-Mica" data-disclaimer=" | Extra $395 " data-type="Exterior" title="Select Exterior Color: Signature Snowflake White Pearl Mica">
<div class="outershadow">
<div class="swatch ext-white"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Signature Jet Black Mica" class="colorSelector" data-color="Signature-Jet-Black-Mica" data-disclaimer="" data-type="Exterior" title="Select Exterior Color: Signature Jet Black Mica">
<div class="outershadow">
<div class="swatch ext-black"></div>
</div>
</div>
</li>
<li>
<div aria-label="Select Exterior Color: Signature Machine Gray Metallic" class="colorSelector" data-color="Signature-Machine-Gray-Metallic" data-disclaimer=" | Extra $595 " data-type="Exterior" title="Select Exterior Color: Signature Machine Gray Metallic">
<div class="outershadow">
<div class="swatch ext-gray"></div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="interior-tab">
<div class="col-lg-12">
<ul class="model pad-x list-inline list-unstyled margin-bottom-x text-center text-uppercase">
<li class="active series mazdaCX9-Touring-selector h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#interior-Touring-tab" onclick="resizeCanvas('panorama1')">Touring</a></li>
<li class="series mazdaCX9-Touring-Plus-selector h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#interior-Touring-Plus-Select-tab" onclick="resizeCanvas('panorama3')">Touring Plus</a></li>
<li class="series mazdaCX9-Carbon-Edition-selector h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#interior-Carbon-Edition-tab" onclick="resizeCanvas('panorama5')">Carbon Edition</a></li>
<li class="series mazdaCX9-Grand-Touring-selector h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#interior-Grand-Touring-tab" onclick="resizeCanvas('panorama6')">Grand Touring</a></li>
<li class="series mazdaCX9-Signature-selector h4 margin-x pad-left-x pad-right-x"><a data-toggle="tab" href="#interior-Signature-tab" onclick="resizeCanvas('panorama8')">Signature</a></li>
</ul>
<div class="pad-bottom-3x">
<div class="tab-content margin-top-2x">
<div class="tab-pane fade active in" id="interior-Touring-tab">
<div class="row">
<div class="col-lg-12 text-center">
<div class="tab-content">
<div class="tab-pane active" id="intcolor1-touring-a" role="tabpanel">
<div id="panorama1" class="panorama"></div>
<p class="h5 pad-top-1x">Touring Black Leather</p>
</div>
<div class="tab-pane" id="intcolor2-touring-b" role="tabpanel">
<div id="panorama2" class="panorama"></div>
<p class="h5 pad-top-1x">Touring Sand Leather</p>
</div>
</div>
<div class="interior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Interior Colors: </li>
<li class="active" role="presentation">
<a aria-controls="intcolor1-touring-a" data-toggle="tab" href="#intcolor1-touring-a" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Touring-Black-Leather.jpg" panorama-view="panorama1" role="tab">
<div class="outershadow">
<div class="swatch int-black"></div>
</div>
</a>
</li>
<li role="presentation">
<a aria-controls="intcolor2-touring-b" data-toggle="tab" href="#intcolor2-touring-b" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Touring-Sand-Leather.jpg" panorama-view="panorama2" role="tab">
<div class="outershadow">
<div class="swatch int-sand"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="interior-Touring-Plus-Select-tab">
<div class="row">
<div class="col-lg-12 text-center">
<div class="tab-content">
<div class="tab-pane active" id="intcolor1-touring-plus-a" role="tabpanel">
<div id="panorama3" class="panorama"></div>
<p class="h5 pad-top-1x">Touring Black Leather</p>
</div>
<div class="tab-pane" id="intcolor2-touring-plus-b" role="tabpanel">
<div id="panorama4" class="panorama"></div>
<p class="h5 pad-top-1x">Touring Sand Leather</p>
</div>
</div>
<div class="interior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Interior Colors: </li>
<li class="active" role="presentation">
<a aria-controls="intcolor1-touring-plus-a" data-toggle="tab" href="#intcolor1-touring-plus-a" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Touring-Plus-Black-Leather.jpg" panorama-view="panorama3" role="tab">
<div class="outershadow">
<div class="swatch int-black"></div>
</div>
</a>
</li>
<li role="presentation">
<a aria-controls="intcolor2-touring-plus-b" data-toggle="tab" href="#intcolor2-touring-plus-b" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Touring-Plus-Sand-Leather.jpg" panorama-view="panorama4" role="tab">
<div class="outershadow">
<div class="swatch int-sand"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="interior-Carbon-Edition-tab">
<div class="row">
<div class="col-lg-12 text-center">
<div class="tab-content">
<div class="tab-pane active" id="intcolor1-carbon-edition-a" role="tabpanel">
<div id="panorama5" class="panorama"></div>
<p class="h5 pad-top-1x">Carbon Edition Red Leather</p>
</div>
</div>
<div class="interior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Interior Colors: </li>
<li class="active" role="presentation">
<a aria-controls="intcolor1-carbon-edition-a" data-toggle="tab" href="#intcolor1-carbon-edition-a" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Carbon-Edition-Red-Leather.jpg" panorama-view="panorama5" role="tab">
<div class="outershadow">
<div class="swatch int-red"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="interior-Grand-Touring-tab">
<div class="row">
<div class="col-lg-12 text-center">
<div class="tab-content">
<div class="tab-pane active" id="intcolor1-grand-touring-a" role="tabpanel">
<div id="panorama6" class="panorama"></div>
<p class="h5 pad-top-1x">Grand Touring Black Leather</p>
</div>
<div class="tab-pane" id="intcolor2-grand-touring-b" role="tabpanel">
<div id="panorama7" class="panorama"></div>
<p class="h5 pad-top-1x">Grand Touring Sand Leather</p>
</div>
</div>
<div class="interior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Interior Colors: </li>
<li class="active" role="presentation">
<a aria-controls="intcolor1-grand-touring-a" data-toggle="tab" href="#intcolor1-grand-touring-a" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Grand-Touring-Black-Leather.jpg" panorama-view="panorama6" role="tab">
<div class="outershadow">
<div class="swatch int-black"></div>
</div>
</a>
</li>
<li role="presentation">
<a aria-controls="intcolor2-grand-touring-b" data-toggle="tab" href="#intcolor2-grand-touring-b" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Grand-Touring-Sand-Leather.jpg" panorama-view="panorama7" role="tab">
<div class="outershadow">
<div class="swatch int-sand"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="interior-Signature-tab">
<div class="row">
<div class="col-lg-12 text-center">
<div class="tab-content">
<div class="tab-pane active" id="intcolor1-signature-a" role="tabpanel">
<div id="panorama8" class="panorama"></div>
<p class="h5 pad-top-1x">Signature Chestnut Nappa Leather</p>
</div>
<div class="tab-pane" id="intcolor2-signature-b" role="tabpanel">
<div id="panorama9" class="panorama"></div>
<p class="h5 pad-top-1x">Signature Parchment Nappa Leather</p>
</div>
</div>
<div class="interior-color margin-top-1x">
<ul class="tabs list-inline vert-middle list-margin-bottom-1x" role="tablist">
<li class="hidden-xs text-uppercase">Interior Colors: </li>
<li class="active" role="presentation">
<a aria-controls="intcolor1-signature-a" data-toggle="tab" href="#intcolor1-signature-a" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Signature-Chestnut-Nappa-Leather.jpg" panorama-view="panorama8" role="tab">
<div class="outershadow">
<div class="swatch int-chestnut"></div>
</div>
</a>
</li>
<li role="presentation">
<a aria-controls="intcolor2-signature-b" data-toggle="tab" href="#intcolor2-signature-b" panorama-img="/static/brand-mazda/vehicle/2023/Mazda/CX-9/MRP/Interior/Signature-Parchment-Nappa-Leather.jpg" panorama-view="panorama9" role="tab">
<div class="outershadow">
<div class="swatch int-parchment"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

OEM pages

See example:

For more information on GitHub https://github.com/mpetroff/pannellum