acapitalTee
Power Member
- Dec 20, 2012
- 635
- 259
So I recently installed a new theme and my slider will not work. I am a complete novice when it comes to html/ css and whatnot and can't figure out how to fix the issue.
The slider only shows one image although I've added the images to my html code. Also, I've checked to see if I have the javascript in the header and it is.
Please help.
Here's the code:
The slider only shows one image although I've added the images to my html code. Also, I've checked to see if I have the javascript in the header and it is.
Please help.
Here's the code:
Code:
<aside class='widget widget-slider cf flyin inview' id='zp-slider-2'> <div class='main-slider flexslider'>
<div class='flex-viewport' style='overflow: hidden; position: relative;'>
<ul class='slides' style='width: 1400%; -webkit-transition: 0s; transition: 0s; -webkit-transform: translate3d(-1860px, 0, 0);'>
<li class='clone' style='width: 930px; float: left; display: block;'>
<div class='slider-item'>
<img alt='TITLE1' src='http://3.bp.blogspot.com/IMAGEFILE1.png'/>
<div class='overlay-title'>
<h2 class='slider-title'>
<a href='#'>
IMAGE SLIDE TITLE 1 HERE
</a>
</h2>
</div>
</div>
</li>
<li class='' style='width: 930px; float: left; display: block;'>
<div class='slider-item'>
<img alt='TITLE2' src='http://2.bp.blogspot.com/IMAGEFILE2.png'/>
<div class='overlay-title'>
<h2 class='slider-title'>
<a href='#'>
IMAGE SLIDE TITLE 2 HERE
</a>
</h2>
</div>
</div>
</li>
<li class='flex-active-slide' style='width: 930px; float: left; display: block;'>
<div class='slider-item'>
<img alt='TITLE3' src='http://2.bp.blogspot.com/IMAGEFILE3.png'/>
<div class='overlay-title'>
<h2 class='slider-title'>
<a href='#'>
IMAGE SLIDE TITLE 3 HERE
</a>
</h2>
</div>
</div>
</li>
<li style='width: 930px; float: left; display: block;'>
<div class='slider-item'>
<img alt='TITLE4' src='http://3.bp.blogspot.com/IMAGEFILE4.png'/>
<div class='overlay-title'>
<h2 class='slider-title'>
<a href='#'>
IMAGE SLIDE TITLE 4 HERE
</a>
</h2>
</div>
</div>
</li>
<li style='width: 930px; float: left; display: block;'>
<div class='slider-item'>
<img alt='TITLE5' src='http://3.bp.blogspot.com/IMAGEFILE5.png'/>
<div class='overlay-title'>
>
<h2 class='slider-title'>
<a href='#'>
IMAGE SLIDE TITLE 5 HERE
</a>
</h2>
</div>
</div>
</li>
<li style='width: 930px; float: left; display: block;'>
<div class='slider-item'>
<img alt='TITLE6' src='http://1.bp.blogspot.com/IMAGEFILE6.png'/>
<div class='overlay-title'>
<h2 class='slider-title'>
<a href='#'>
IMAGE SLIDE TITLE 6 HERE
</a>
</h2>
</div>
</div>
</li>
<li class='clone' style='width: 930px; float: left; display: block;'>
<div class='slider-item'>
<img alt='TITLE7' src='http://1.bp.blogspot.com/IMAGEFILE7.png'/>
<div class='overlay-title'>
<h2 class='slider-title'>
<a href='#'>
IMAGE SLIDE TITLE 7 HERE
</a>
</h2>
</div>
</div>
</li>
</ul>
</div>
<ul class='flex-direction-nav'>
<li>
<a class='flex-prev' href='#'>
<i class='icon-left-open-big'/>
</a>
</li>
<li>
<a class='flex-next' href='#'>
<i class='icon-right-open-big'/>
</a>
</li>
</ul>
</div>
</aside>
