スライドショー左右画像表示滋賀県守山市のホームページ制作

★bxSlider

<script type="text/javascript">
  $(document).ready(function() {
    var obj = $('.slider').bxSlider({ // 自動再生に必須
      auto: true,
      infiniteLoop: true,
      responsive: false,
      speed: 1000,
      displaySlideQty: 1,
      pager: true,
      slideWidth: 1000,
      minSlides: 1,
      maxSlides: 1,
      moveSlides: 1,
      slideMargin: 0,
      pause: 4000,
      onSlideAfter: function() { // 自動再生に必須
      obj.startAuto();
      }
    });
  });
</script>
   <section id="topImage">
      <div id="photo">
         <div id="image-bloc">
           <ul class="slider">
              <li class="slide"><img src="img/slide/top-image01.jpg" alt=""></li>
              <li class="slide"><img src="img/slide/top-image03.jpg" alt=""></li>
              <li class="slide"><img src="img/slide/top-image02.jpg" alt=""></li>
           </ul>
         </div>
      </div>
      <!--photo-->
   </section>

/* スライドショー
-----------------------------------*/
 
#topImage {
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    clear: both;
}
 
#topImage img {
    width: 100%;
    max-width: 1000px;
    margin: 0;
}
 
#photo {
    display: block;
    margin: 0px auto;
    padding: 0;
    clear: both;
    text-align: center;
    width: 100%;
    overflow: hidden;
    border-bottom: 2px solid #0065ac;
}
 
#photo .bx-pager {
    margin: 0;
    padding: 0;
    height: 0;
    visibility: hidden;
 
}
 
#image-bloc {
    display: block;
    margin: 0px auto;
    padding: 0;
    clear: both;
    text-align: center;
    width: 100%;
    max-width: 1000px;
}
  
.bx-viewport {
  overflow: visible!important;
  width: 1026px!important;
}
  
.main-container {
    overflow: hidden;
    padding-bottom: 15px;
    padding-top: 15px;
}
  
.slider {
  list-style: none;
  margin: 0;
  padding: 0;
}
  
.slider li {
  width: 1000px!important;
  margin: 0;
  padding: 0;
}
 
/* DIRECTION CONTROLS (NEXT / PREV) */
 
.bx-wrapper .bx-prev {
    background: url(../img/slide/prev.png) no-repeat right center;
    display: block;
    position: absolute;
    top: 0;
    left: -500px;
}
 
.bx-wrapper .bx-next {
    background: url(../img/slide/next.png) no-repeat left center;
    display: block;
    position: absolute;
    top: 0;
    right: -500px;
}
 
.bx-wrapper a.bx-next {
    color: #000000;
    text-decoration: none;
}
 
.bx-wrapper a.bx-prev {
    color: #000000;
    text-decoration: none;
}
 
.bx-wrapper .bx-prev:hover {
    background: url(../img/slide/prev_hover.png) no-repeat center center;
}
 
.bx-wrapper .bx-next:hover {
    background: url(../img/slide/next_hover.png) no-repeat center center;
}
 
.bx-wrapper .bx-controls-direction a {
    position: absolute;
    margin-top: 0;
    outline: 0;
    width: 500px;
    height: 423px;
    text-indent: -9999px;
    z-index: 9999;
    color: #000000;
    text-decoration: none;
}
 
.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}