Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <title>something</title>
        
        <script src="https://code.jquery.com/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 center-block">
                    <div class="carousel slide" id="myCarousel">
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-xs-4"><a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-001.jpg" class="img-responsive"></a></div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4"><a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-002.jpg" class="img-responsive"></a></div>
                            </div>
                            <div class="item">
                                <div class="col-xs-4"><a href="#"><img src="http://aszx.altervista.org/aatest/img/carousel/carousel-003.jpg" class="img-responsive"></a></div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('#myCarousel').carousel({
                    interval: 10000
                })
                $('.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));
                    }
                });
            });
        </script>
        <style>
            .carousel {
                overflow: hidden;
            }
            .carousel-inner {
                width: 150%;
                left: -25%;
            }
            .carousel-inner > .item.next,
            .carousel-inner > .item.active.right {
                -moz-transform: translate3d(-33%, 0, 0); /* Для Firefox */
                -ms-transform: translate3d(-33%, 0, 0); /* Для IE */
                -webkit-transform: translate3d(-33%, 0, 0); /* Для Safari, Chrome, iOS */
                -o-transform: translate3d(-33%, 0, 0); /* Для Opera */
                transform: translate3d(-33%, 0, 0);
};
            }
            .carousel-inner > .item.prev,
            .carousel-inner > .item.active.left {
                -moz-transform: translate3d(-33%, 0, 0); /* Для Firefox */
                -ms-transform: translate3d(-33%, 0, 0); /* Для IE */
                -webkit-transform: translate3d(-33%, 0, 0); /* Для Safari, Chrome, iOS */
                -o-transform: translate3d(-33%, 0, 0); /* Для Opera */
                transform: translate3d(-33%, 0, 0);
}
            }
            .carousel-control.left, .carousel-control.right {
                background: rgba(255, 255, 255, 0.3);
                width: 25%;
            }
          #myCarousel .col-xs-4 {
                padding-left: 0px;
                padding-right: 0px;
}
        </style>
    </body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers