Exterior 360 spins

How it works

360° Exterior View

The 360 Exterior Spin sequence contains 8 images of the vehicle in different angles. Users can rotate the vehicle image by dragging the mouse horizontally or by swiping their finger over the image on a touchscreen. All Exterior 360° Spins come with swatches (color selector) that show the available exterior colors of the model.

Creating the 360 Spins

There are 4 components to build the spin:

HTML
Styles, Custom Code > Head Script
Javascripts, Custom Code > Body Bottom Script
Image Assets: Color swatches, and 8 model images of different angles for each model color

In the HTML, the data-color corresponds to the folder name of the different exterior colors available. Model color images for the 360° spins are uploaded through FTP. These are the 8 sequential angles for each color spin:

angular front left (angle1.png)
profile left (angle2.png)
angular rear left (angle3.png)
rear view (angle4.png)
angular rear right (angle5.png)
profile right (angle6.png)
angular front right (angle7.png)
front view (angle8.png)

Display

An example of Nissan Armada page using the 360 exterior spins

2023 Nissan Armada

Swipe to Spin

Code Snippet

HTML

In the HTML, the data-color corresponds to the folder name of the different exterior colors available.

	
<div class="container">
<h2 class="heading-lg text-center">
<span id="vehicleYear">2023</span>
<span id="vehicleMake">Nissan</span>
<span id="vehicleModel">Armada</span>
</h2>
<div class="row">
<div class="col-md-12 text-center modelGallery">
<div class="containerSwipe">
<div class="img-container">
<div class="img360">
<div id="myImg" role="img" aria-label="" title="" style="padding-top: 45%;" 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 id="colorSelectTabDisplay">
<div id="exteriorColor">
<ul class="list-inline colorSelect colorExterior text-center">
<li>
<div aria-label="Select Exterior Color: Coulis Red Pearl" data-disclaimer="Extra cost option." title="Select Exterior Color: Coulis Red Pearl" data-type="Exterior" data-color="Coulis-Red-Pearl" style="background-image: url('/static/brand-nissan/misc/2023-armada/Coulis-Red-Pearl.png');" class="img-background img-cover colorSelector active"></div>
</li>
<li>
<div aria-label="Select Exterior Color: Aspen White TriCoat" data-disclaimer="Extra cost option." title="Select Exterior Color: Aspen White TriCoat" data-type="Exterior" data-color="Aspen-White-TriCoat" style="background-image: url('/static/brand-nissan/misc/2023-armada/Aspen-White-TriCoat.png');" class="img-background img-cover colorSelector"></div>
</li>
<li>
<div aria-label="Select Exterior Color: Brilliant Silver Metallic" data-disclaimer="" title="Select Exterior Color: Brilliant Silver Metallic" data-type="Exterior" data-color="Brilliant-Silver-Metallic" style="background-image: url('/static/brand-nissan/misc/2023-armada/Brilliant-Silver-Metallic.png');" class="img-background img-cover colorSelector"></div>
</li>
<li>
<div aria-label="Select Exterior Color: Gun Metallic" data-disclaimer="" title="Select Exterior Color: Gun Metallic" data-type="Exterior" data-color="Gun-Metallic" style="background-image: url('/static/brand-nissan/misc/2023-armada/Gun-Metallic.png');" class="img-background img-cover colorSelector"></div>
</li>
<li>
<div aria-label="Select Exterior Color: Super Black" data-disclaimer="" title="Select Exterior Color: Super Black" data-type="Exterior" data-color="Super-Black" style="background-image: url('/static/brand-nissan/misc/2023-armada/Super-Black.png');" class="img-background img-cover colorSelector"></div>
</li>
<li>
<div aria-label="Select Exterior Color: Hermosa Blue Pearl" data-disclaimer="" title="Select Exterior Color: Hermosa Blue Pearl" data-type="Exterior" data-color="Hermosa-Blue-Pearl" style="background-image: url('/static/brand-nissan/misc/2023-armada/Hermosa-Blue-Pearl.png');" class="img-background img-cover colorSelector"></div>
</li>
</ul>
</div>
</div>
<hr class="margin-vert-1x">
<p id="colorName" class="h4 text-center"></p>
</div>
</div>
</div>

Head Script

Custom Code > Head Script

	
<link rel="stylesheet" type="text/css" href="/assets/shared/CustomHTMLFiles/Responsive/ColorSelect/Nissan/new-colorSelect-Styles.css"/>

Body Bottom Script

Custom Code > Body Bottom Script

	
<script src="/assets/shared/CustomHTMLFiles/Responsive/ColorSelect/touchSwipe.min.js" type="text/javascript" defer></script>
<script src="/assets/shared/CustomHTMLFiles/Responsive/ColorSelect/colorSelect.js" type="text/javascript" defer></script>

The
Lab