[kamlayka]

Пытаюсь сверстать что-то наподобие слайдера. Есть код:

<table style="border: 0px; border-color: white; padding: 30px;">
	<tbody>
		<tr>
			<td style="width: 60px;">
			<div id="moveleft" onclick="if(document.getElementById('3d').style.display='block') {document.getElementById('3d').style.display='none'; document.getElementById('2d').style.display='block'}
			else if(document.getElementById('2d').style.display='block') 
			{document.getElementById('2d').style.display='none';  document.getElementById('1d').style.display='block'}
			else if(document.getElementById('3d').style.display='block') 
			{document.getElementById('3d').style.display='none';  document.getElementById('2d').style.display='block'}
			else if(document.getElementById('4d').style.display='block') 
			{ document.getElementById('4d').style.display='none';  document.getElementById('3d').style.display='block'}
			else if(document.getElementById('5d').style.display='block') 
			{document.getElementById('5d').style.display='none';  document.getElementById('4d').style.display='block'}	
		if(document.getElementById('1d').style.display='block') {this.style.backgroundColor='white'; this.style.color='#D3D3D3';}; " onmouseout="this.style.backgroundColor='white'; this.style.color='#D3D3D3';" onmouseover="this.style.backgroundColor='#D3D3D3'; this.style.color='#F5F5F5';" style="width:38px; height:250px; background-color: transparent; color: #D3D3D3; float:left; margin: 38px 10px; font: 110px LUCIDA CONSOLE; font-weight: 900; line-height: 250px; transition: all 0.5s; cursor: pointer;">
			<div style="width: 60px; left: -15px; position: relative; transform: scaleX(0.4);">&lt;</div>
			</div>
			</td>
			<td style="width: 500px;">
			<div id="1d" style="display: block;"><iframe frameborder="0" height="333" src="//www.youtube.com/embed/06yK8rmcV3g?rel=0&amp;wmode=transparent" width="500 px"></iframe></div>

			<div id="2d" style="display: none;">
			<p><img alt="" src="http://i.imgur.com/k5GLgOx.png" style="width: 500px; height: 333px;" /></p>
			</div>

			<div id="3d" style="display: none;">
			<p><img alt="" src="http://i.imgur.com/fh572nG.png" style="width: 500px; height: 333px;" /></p>
			</div>

			<div id="4d" style="display: none;">
			<p><img alt="" src="http://i.imgur.com/dwmbAuf.png" style="width: 500px; height: 333px;" /></p>
			</div>

			<div id="5d" style="display: none;">
			<p><img alt="" src="http://i.imgur.com/WqfOaXD.png" style="width: 500px; height: 333px;" /></p>
			</div>

			<div id="6d" style="display: none;">
			<p><img alt="" src="http://i.imgur.com/BeulhS2.png" style="width: 500px; height: 333px;" /></p>
			</div>
			</td>
			<td style="width: 60px;">
			<div id="moveright" onclick="if(document.getElementById('1d').style.display='block') {document.getElementById('1d').style.display='none'; document.getElementById('2d').style.display='block'}  
			else if(document.getElementById('2d').style.display='block') 
			{document.getElementById('2d').style.display='none';  document.getElementById('3d').style.display='block'}
			else if(document.getElementById('3d').style.display='block') 
			{document.getElementById('3d').style.display='none';  document.getElementById('4d').style.display='block'}
			else if(document.getElementById('4d').style.display='block') 
			{ document.getElementById('4d').style.display='none';  document.getElementById('5d').style.display='block'}
			else if(document.getElementById('5d').style.display='block') 
			{document.getElementById('5d').style.display='none';  document.getElementById('6d').style.display='block'}
else if(document.getElementById('6d').style.display='block') {this.style.backgroundColor='white'; this.style.color='#D3D3D3';}; " onmouseout="this.style.backgroundColor='white'; this.style.color='#D3D3D3';" onmouseover="this.style.backgroundColor='#D3D3D3'; this.style.color='#F5F5F5';" style="width:38px; height:250px; background-color: transparent; color: #D3D3D3; float:left; margin: 38px 10px; font: 110px LUCIDA CONSOLE; font-weight: 900; line-height: 250px; transition: all 0.5s; cursor: pointer;">
			<div style="width: 60px; left: -15px; position: relative; transform: scaleX(0.4);">&gt;</div>
			</div>
			</td>
		</tr>
	</tbody>
</table>

Но срабатывают только переходы на вторую картинку, дальше не листается..

Я новичок и понимаю, что мой код - это костыль, поэтому прошу тапками не кидаться