slider

by Ting-Yuan Chang

HTML

<div class="preload"></div>
<div class="window">
  <div class="storeWrap">
    <div class="store">
    </div>
  </div>
  
  <div class="move left"></div>
  <div class="move right"></div>
</div>

CSS

.preload {
  display: none;
}
.window {
  height: 400px;
  width: 400px;
  position: relative;
  background: lightblue;
}

.storeWrap {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.store {
  height: 100%;
  width: 100%;
  position: relative;
}

.item {
  position: absolute;
  width: 400px;
  height: 400px;
}

/* .item-img {
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100%;
} */

.item-info {
  position: absolute;
  background: rgba(255,255, 255, 0.3);
  bottom: 0px;
  left: 0;
  right: 0;
  height: 150px;
  
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}


.move {
  position: absolute;
  top: 0;
  left: 400px;
  filter: drop-shadow(0 0 24px #00E0FF);
}

.move.left {
  border: 50px solid transparent;
  border-left: 0px solid;
  border-right-color: blue;
}
.move.right {
  left: 500px;
  border: 50px solid transparent;
  border-right: 0px solid;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left-color: blue;
}

JavaScript

// data
var items = [
  {src: 'https://images.dog.ceo/breeds/samoyed/n02111889_91.jpg', info: '這隻狗 $5'},
  {src: 'https://images.dog.ceo/breeds/samoyed/n02111889_3048.jpg', info: '這隻狗 $10'},
  {src: 'https://images.dog.ceo/breeds/samoyed/n02111889_1363.jpg', info: '這隻狗 $15'},
  {src: 'https://images.dog.ceo/breeds/samoyed/n02111889_5463.jpg', info: '這隻狗 $20'},
];

// preload image
var urls = '';
for(var index = 0; index < items.length; index++) {
	urls += 'url("' + items[index].src + '")';
  if(index +1 !== items.length) {
  	urls += ', ';
  }
}
$('.preload').css('background-image', urls);

// initialize
var currentIndex = 0;
addItem(items[currentIndex]);
var isAnimating = false;


$('.move.right').click(function() {
	if(isAnimating === false) {
  	isAnimating = true;
    currentIndex = (currentIndex + 1) % items.length;
    var item = addItem(items[currentIndex]);
    item.css('left', $('.window').width());
    $('.store').animate({
      left: - $('.window').width()
    }, 500, 'swing', function() {
      $('.store').css('left', '0px');
      $('.store > .item').first().remove();
      item.css('left', '0px');
      isAnimating = false;
    });
  }
});

$('.move.left').click(function() {
	if(isAnimating === false) {
  	isAnimating = true;
    currentIndex = (currentIndex - 1 + items.length) % items.length;
    var item = addItem(items[currentIndex]);
    item.css('left', - $('.window').width());
    $('.store').animate({
      left: $('.window').width()
    }, 500, 'swing', function() {
      $('.store').css('left', '0px');
      $('.store > .item').first().remove();
      item.css('left', '0px');
      isAnimating = false;
    });
  }
});

function addItem(data) {
	var item = $('<div>');
  item.addClass('item');
  item.css('background-image', 'url("' + data.src + '")');
  var info = $('<div>');
  info.text(data.info);
  info.addClass('item-info');
  
  item.append(info);
  $('.store').append(item);
  return item;
}

// initialize data
/*...