360 product

by Brett Miley

HTML

<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<h1>Finishing Brands 360 Product</h1>

<div id="panel-stage-wrap" class="content-wrap col-100">
    <div id="panel-stage-1" class="content col-100 panel-stage">
        <div class="product-image col-50">
            <div class="product-node node-1 jsbutton" style="top:20%; left:30%;"></div>
            <div class="product-node node-2 jsbutton" style="top:80%; left:70%;"></div>
            <img src="https://pbs.twimg.com/profile_images/2758332334/d858925f920f813118296cfe397af270_400x400.png" alt="" />
        </div>
        <div class="product-detail-1 product-details-wrap col-25">
            <img src="https://pbs.twimg.com/profile_images/2758332334/d858925f920f813118296cfe397af270_400x400.png" alt="" />
            <div class="product-details">
                 <h5>Product Title</h5>

                <p>Product description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsum at corporis et dolorem tempore nisi veniam laudantium incidunt! Dolores cupiditate provident ipsam doloremque quos nam consequuntur eligendi id iusto!</p>
            </div>
        </div>
        <div class="product-detail-2 product-details-wrap col-25">
            <img src="https://pbs.twimg.com/profile_images/2758332334/d858925f920f813118296cfe397af270_400x400.png" alt="" />
            <div class="product-details">
                 <h5>Product Title</h5>

                <p>Product description Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ipsum at corporis et dolorem tempore nisi veniam laudantium incidunt! Dolores cupiditate provident ipsam doloremque quos nam consequuntur eligendi id iusto!</p>
            </div>
        </div><div class="clear"></div>
    </div>
    <div id="panel-stage-2" class="content col-100 panel-stage">
        <div class="product-image col-50">
            <div class="product-node node-1 jsbutton" style="top:20%; left:30%;"></div>
            <div...

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
}
body {
    /* background: #ccc; */
    font-family: sans-serif;
}
img {
    max-width:100%;
    height:auto;
}
.jsbutton {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.content-wrap {
    position: relative;
}
#panel-stage-wrap{
    width:100%!important;
}

.panel-stage {
    padding: 0 32px;
    width:100%!important; 
}
.col-25 {
    width:25%;
}
.col-50 {
    width:50%;
}
.col-100 {
}
.product-image {
    display:inline-block;
    position: relative;
}
.product-image:after {
    content:"";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 8px 8px #ddd;
    box-shadow: 0 0 8px 8px #ddd;
    bottom: -20px;
    height: 4px;
    border-radius: 50%;
    left: 15%;
    display: block;
    right: 15%;
    background-color: #ddd;
}
.product-image img {
    width:100%;
}
.product-details-wrap {
    padding:24px;
}
.product-details-wrap img {
    border-radius:50%;
      border: 8px solid white;
  -webkit-box-shadow: 0 0 2px 0px #ccc;
  box-shadow: 0 0 2px 0px #ccc;
}
.product-details {
    padding: 16px 8px;
}
.product-detail-1 {
    float:left;
}
.product-detail-2 {
    float:right;
}
.product-node {
    position: absolute;
    width:40px;
    height:40px;
    background-color:#ccc;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0px 0px 10px 0px cyan;
    transform:translate(-50%, -50%);
}
.product-detail-1 img, .product-details {
    float:left;
}
.product-detail-2 img {
    float:right;
}
#navigation {
    
}
.stage-nav-button {
    position: absolute;
    z-index:200;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
#prev-stage {
    left: 0;
}
#next-stage {
    right: 0;
}

JavaScript

$('#panel-stage-wrap').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next-stage', 
    prev:   '#prev-stage' 
});