Блог

как использовать image slide jquery. я хотел, чтобы правая стрелка щелкала по одному изображению вправо, а левая — по одному изображению влево…..

        <div class="showrooms clearfix">
            <a href="" class="logo"><img src="images/top/best-auto.jpg">Best Auto</a> 
            <a href="" class="logo"><img src="images/top/cheap-car.jpg">Cheap Car</a>
            <a href="" class="logo"><img src="images/top/cosmo.jpg">Cosmo</a>
            <a href="" class="logo"><img src="images/top/golden.jpg">Golden</a>
            <a href="" class="logo"><img src="images/top/ID.jpg">ID</a>
            <a href="" class="logo"><img src="images/top/kia.jpg">KIA</a>
            <a href="" class="logo"><img src="images/top/maxano.jpg">MAXANO</a>
            <a href="" class="logo"><img src="images/top/mmm.jpg">MMM</a>
            <a href="" class="logo"><img src="images/top/nihon.jpg">Nihon</a>
            <a href="" class="logo"><img src="images/top/sakura.jpg">Sakura</a>
            <a href="" class="logo"><img src="images/top/shwe.jpg">Shwe</a>
            <a href="" class="logo"><img src="images/top/symcar.jpg">SYM</a>
            <a href="" class="logo"><img src="images/top/theingi.jpg">Theingi</a>
            <a href="" class="logo"><img src="images/top/thuhtetpyisone.jpg">Thuhtetpyisone</a>
            <a href="" class="logo"><img src="images/top/uno-korea.jpg">UNO-Korea</a>
            <span class="arrowleft">left</span>
            <span class="arrowright">right</span>
      </div><!-- End Showrooms -->
  

jquery

 $(".arrowleft").click(function(){
        // i wanted logo image is slide left
});

$(".arrowright").click(function(){
   // i wanted logo image is slide right
});
  

смотрите http://jsfiddle.net/kisspa/cggLe/1

вы пробовали этот плагин под названием flexslider?

Это очень хорошо, может делать то, что вы хотите, и к тому же очень настраиваемо. Вы можете настроить его на перемещение по одному изображению за раз, влево и вправо.

Чтобы перемещать по 1 за раз с помощью карусели, пожалуйста, следуйте инструкциям по настройке в файле read me после загрузки:

 // Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4,
    move: 1
  });
});
  

Последняя строка в приведенном выше коде: move: 1 позволяет вам изменить количество на то, сколько элементов вы хотели бы переместить. Например move: 2 , или move: 3 .

базовое перемещение вправо / влево: http://jsfiddle.net/cggLe/3 … без остановки, без анимации

добавлен внешний контейнер:

 .container {
    width:500px;
    overflow:hidden;
    position:relative;
    border:1px solid blue;
}
.showrooms {
    white-space:nowrap;
    position:relative;
    margin-bottom:40px;
    left:0;
}
  

но для получения необычных результатов попробуйте плагин galery, например «Jssor Slider»… просто найдите в Google «jquery gallery»