var nodes = document.querySelectorAll('.case .items .item') function swiperListener(node) { node.addEventListener('click', function(e) { var index = e.target.dataset.index; if(index) { if(index == 0) { flagChange() nodes.forEach(function(changeNode){ changeNode.innerHTML = '' if(changeNode.dataset.index == 1) changeNode.dataset.index = 2 else if(changeNode.dataset.index == 2) changeNode.dataset.index = 0 }) e.target.dataset.index=1 } if(index == 2) { flagChange() nodes.forEach(function(changeNode){ changeNode.innerHTML = '' if(changeNode.dataset.index == 0) changeNode.dataset.index = 2 else if(changeNode.dataset.index == 1) changeNode.dataset.index = 0 }) e.target.dataset.index=1 } e.target.innerHTML = flagMapping[flag] } }) } function startAutoPlay() { interval = setInterval(function() { $('.case .items .item[data-index="2"]').trigger('click') }, 4000) } function stopAutoPlay() { clearInterval(interval) } $(document).ready(function () { nodes.forEach(function(node) { swiperListener(node) }) startAutoPlay(); $('.case .items .before')[0].addEventListener('click', function(e) { stopAutoPlay() $('.case .items .item[data-index="0"]').trigger('click') startAutoPlay() }) $('.case .items .after')[0].addEventListener('click', function(e) { stopAutoPlay() $('.case .items .item[data-index="2"]').trigger('click') startAutoPlay() }) document.querySelectorAll('.case .items .item').forEach(function(item) { item.addEventListener('mouseenter', function(e) { stopAutoPlay() }) }) document.querySelectorAll('.case .items .item').forEach(function(item) { item.addEventListener('mouseleave', function(e) { startAutoPlay() }) }) })