There seems to be an issue with the unslider-arrows on the unslider banner. The images are not sliding properly when transitioning to the next image without user input. Instead, they resize from small to full size starting at the top of the .banner div.
* Note: This behavior can be observed through the provided link.
The link to check out the issue: www.bravodesignbc.com
As I am not well-versed in JavaScript, I am uncertain about a solution to this problem. While I believe there might not be CSS-related issues, I could be mistaken. Below is the HTML and JavaScript code for the banner and unslider-arrows:
<div id="feature">
<div class="banner">
<div class="buttonPrev">
<a href="#" class="unslider-arrow prev"><img src="images/prev.png" /></a>
</div>
<div class="buttonNext">
<a href="#" class="unslider-arrow next"><img src="images/next.png" /></a>
</div>
<div class="bottomBanner">
<h2>Serving the lower mainland<br />
for over twenty years
</h2>
</div>
<script>
var unslider = $('.banner').unslider();
$('.unslider-arrow').click(function() {
var fn = this.className.split(' ')[1];
// Either do unslider.data('unslider').next() or .prev() depending on the className
unslider.data('unslider')[fn]();
});
</script>
<ul>
<li><img src="images/knappen.jpg" /></li>
<li><img src="images/closeupChandelier.jpg" /></li>
<li class="listBg"><h3>Slide 3</h3></li>
</ul>
</div>
</div>
Below is the CSS associated with the banner:
/*********banner********/
#feature{
margin-top: 60px;
margin-bottom: 60px;
position: relative;
height: 400px;
width: 100%;
background-color: #FFF;
}
.banner{
position: relative;
overflow: auto;
margin: 0 auto;
width: 800px;
height: 400px;
padding: 0px;
}
.banner ul{
padding: 0px;
margin: 0px;
list-style: none;
}
.banner li {
padding: 0px;
margin: 0px;
float: left;
height: 400px;
width: 800px;
}
.banner ul li img{
padding: 0px;
margin: 0px;
}
.buttonPrev {
z-index: 1;
position: absolute;
left: 3%;
top:180px;
width: 35px;
height:70px;
}
.buttonNext {
z-index: 1;
position: absolute;
right: 3%;
top:180px;
width: 35px;
height:70px;
}
.bottomBanner {
position:absolute;
z-index: 1;
bottom: 0px;
width: 800px;
height: 100px;
margin:0px;
padding:0px;
background-color: rgba( 255, 255, 255, 0.4);
}
.bottomBanner h2{
font-family: 'rockwell_stdlight', Helvetica, Arial, sans-serif;
font-weight: lighter;
color: #4B4D4E;
font-size: 36px;
padding-left: 170px;
}
.listBg{
background:url(../images/herringbone-pattern.png);
background-repeat: repeat;
}