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>Kitty Cat</title>
    <script src="https://use.fontawesome.com/562cb72263.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
​
    <style>
        body, .tab-pane {
            padding: 15px 0;
        }
​
        .thumbnail {
            height: 150px;
        }
    </style>
</head>
<body>
​
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#main" data-toggle="tab">Main view</a></li>
        <li>
            <a href="#shuffle" data-toggle="tab">Shuffle view</a>
        </li>
    </ul>
​
    <div class="tab-content">
        <div class="tab-pane active" id="main">
            <button class="btn btn-default" id="shift-left">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </button>
            <button class="btn btn-default" id="shift-right">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </button>
        </div>
        <div class="tab-pane" id="shuffle">
            <button class="btn btn-info" id="shuffle">Shuffle</button>
        </div>
    </div>
​
    <div class="row" id="images">
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&1"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&2"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&3"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&4"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&5"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&6"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&7"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&8"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&9"/>
        </div>
        <div class="col-sm-4 image">
            <img class="thumbnail" src="https://thecatapi.com/api/images/get?format=src&type=png&size=small&10"/>
        </div>
    </div>
</div>
​
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script>
    {
​
​
        const images = $.extend($('#images'), (() => {
​
            const rotate = (arr, reverse = false) => {
                const direction = reverse ? -1 : 1;
                return $.merge(arr.slice(direction, arr.length), arr.slice(0, direction));
            }
​
            return {
                shuffle () {
                    const $images = $(this).find('.image');
​
                    $images.sort(() => Math.floor(Math.random() * $images.length));
​
                    $(this).append($images);
                },
                shiftLeft () {
                    const $images = $(this).find('.image');
​
                    $(this).append(rotate($images));
                },
                shiftRight () {
                    const $images = $(this).find('.image');
​
                    $(this).append(rotate($images, true));
                }
            }
        })());
​
        $('#shuffle').click(() => images.shuffle());
        $('#shift-left').click(() => images.shiftLeft());
        $('#shift-right').click(() => images.shiftRight());
    }
</script>
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers