#5 - 360 degree image slider

5-360-degree-image-slider.markdown

#5 - 360 degree image slider

360 degree image view. Image slider. ThreeSixty.js demo.

A Pen by Uriel Wilson Jr. on CodePen.

License.

index.html

<div class="wrapper">
  <h1>ThreeSixty.js</h1>
  <p>Drag, use keyboard arrows (&larr; & &rarr;) or click to rotate image.</p>
  <p>
    <a class="g-hub" href="https://github.com/mladenilic/threesixty" target="_blank">Check out ThreeSixty.js on Github</a>
  </p>
	<div id="threesixty"></div>
  <div class="buttons-wrapper">
    <button class="button" id="prev">Prev</button>
	  <button class="button" id="next">Next</button>
  </div>
</div>

script.js

var threesixty = new ThreeSixty(document.getElementById('threesixty'), {
  image: 'https://s3.eu-central-1.amazonaws.com/threesixty.js/watch.jpg',
  width: 320,
  height: 320,
  count: 31,
  perRow: 4,
  speed: 100,
  inverted: true,
  prev: document.getElementById('prev'),
  next: document.getElementById('next')
});

threesixty.play();

scripts

<script src="https://rawgit.com/mladenilic/threesixty/master/src/threesixty.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

.wrapper {
	font-family: 'Open Sans', sans;
	text-align: center;
  color: #444;
}

#threesixty {
	margin: 0 auto;
  user-select: none;
}

.g-hub {
  color: #444;
  font-size: 0.9em;
}

.buttons-wrapper {
  max-width: 200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.button {
  position: relative;
  appearance: none;
  border: none;
  padding: 40px 7px 5px;
  cursor: pointer;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    border-left: 3px solid #000;
    border-top: 3px solid #000;
    width: 20px;
    height: 20px;
    transform: translate(-45%) rotate(-45deg);
  }
  
  &::after {
    transform: translate(5%) rotate(-45deg);
  }
}

#next {
  
  &::before {
    transform: translate(-90%) rotate(135deg);
  }
  
  &::after {
    transform: translate(-50%) rotate(135deg);
  }
}