Carousel slider sliding single image in wordpress?

I am working on a plugin .I used carousel slider to slide images .But I want to slide single image on clicking arrow .I am looking for such result

here is my slider code

<div id="myCarousel" class="carousel fdi-Carousel slide">
            <!-- Carousel items -->
            <div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">
                <div class="carousel-inner onebyone-carosel">
                    <div class="item active">
                        <div class="col-xs-4">
                            <a href="#"> <img src="<?php echo plugin_dir_url(__FILE__) . 'img/download-1.jpg'; ?>"></a>
                            <div class="text-center">sajid</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/download.jpg'; ?>"></a>
                            <div class="text-center">tistimonials-four</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/download-1.jpg'; ?>"></a>
                            <div class="text-center">tistimonials-three</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/download.jpg'; ?>"></a>
                            <div class="text-center">tistimonials-two</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="col-xs-4">
                            <a href="#"><img src="<?php echo plugin_dir_url(__FILE__) . 'img/download-1.jpg'; ?>"></a>
                            <div class="text-center">tistimonials-one</div>
                        </div>
                    </div>
                </div>
                <a class="left carousel-control" href="##eventCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="right carousel-control" href="##eventCarousel" data-slide="next"><i    class="glyphicon glyphicon-chevron-right"></i></a>

            </div>
            <!--/carousel-inner-->
        </div>

script

$('.fdi-Carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});
});

css

.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
    left: 0;
    -webkit-transform: translate3d(33%, 0, 0);
     transform: translate3d(33%, 0, 0);
 }
 .carousel-inner > .item.prev,
 .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-33%, 0, 0);
      transform: translate3d(-33%, 0, 0);
 }
    .carousel-control.left,.carousel-control.right {background-image:none;}

but in my case it has such result

Above code work exactly in html project but when i used it in plugin it has a different result like above .Any help would be highly appreciated and also sorry for my English .

via Chebli Mohamed