TricksWay always try to share some good and unique article among to their readers, now days our team start to share designing articles to make easy blogging and web designing. If I talk about slider, it's become most common use to blog and website. Many software's and tool's can make slider easily but if you think about awesome and unique you may disappoint. In this post I'm going to share beautiful hex slider and it can be simply use on blogger and website to.

Demo

Hex Slider For Blogger and Website:

Simply copy and paste below code via blogger dashboard.

(Dashboard > Layout > Add Gadgets > Html/JavasScripts)

<link href="https://raw.githubusercontent.com/himstar/Hex-Slider/gh-pages/hexaflip.css" rel="stylesheet" type="text/css">
<link href="https://raw.githubusercontent.com/himstar/Hex-Slider/gh-pages/demo.css" rel="stylesheet" type="text/css">
<div class="container">
<div class="main">
<div class="buttons">
<div id="prev" class="disc-button">&lt;</div>
<div id="next" class="disc-button">&gt;</div>
</div>
<div id="hexaflip-demo4" class="demo"></div>
</div>
</div>
<script src="https://raw.githubusercontent.com/himstar/Hex-Slider/gh-pages/hexaflip.js"></script>
<script>
var hexaDemo4,
images = [
'../images/1.jpg',
'../images/2.jpg',
'../images/3.jpg',
'../images/4.jpg',
'../images/5.jpg',
'../images/6.jpg'
];
document.addEventListener('DOMContentLoaded', function(){
hexaDemo4 = new HexaFlip(document.getElementById('hexaflip-demo4'), {set: images},{
size: 500
});
document.getElementById('prev').addEventListener('click', function(){
hexaDemo4.flipBack();
}, false);
document.getElementById('next').addEventListener('click', function(){
hexaDemo4.flip();
}, false);
}, false);
</script>