Устранение проблем с разворачиванием изображения

Question

Когда я добавляю нерезкие стрелки на баннер без знака, он не правильно помещается между изображениями. При перемещении к следующему изображению это уменьшает размер изображения от малого до полного размера, начиная с вершины раздела .banner.
* Примечание. Он только скользит таким образом без ввода пользователем. Вы можете увидеть это по ссылке, которую я предоставил.

www.bravodesignbc.com

Поскольку я не являюсь Javascript гуру, я не знаю, как решить эту проблему. Я не думаю, что есть проблема с css, но я могу ошибаться. Вот HTML и Javascript для баннера и unslider стрел

<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>  

Вот это CSS

/*********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; 
} 

Answer 1

Похоже, вашего < сценария > блока неправильно вложенный. Я попробовал ваш код и был в состоянии получить его на работу, перемещая JavaScript инстанцирования unslider() из «знамени» ДИВ как так:

<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> 

     <ul> 
      <li class="listBg"><h3>Slide 1</h3></li> 
      <li class="listBg"><h3>Slide 2</h3></li> 
      <li class="listBg"><h3>Slide 3</h3></li> 
     </ul> 
    </div> 

</div> 

<script type="text/javascript"> 
    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>