ええ感じの画像カルーセル

ストレージサイトの画像のみ使用出来るやつ

<html ng-app="carousel" ng-controller="CarouselController">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="https://1nu.wikidot.com/local--code/carousel-s/3"></script>
    <link href="https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css" rel="stylesheet">
    <link href="https://www.scp-wiki.net/component:theme/code/1" rel="stylesheet">
    <link href="https://1nu.wikidot.com/local--code/carousel-s/2" rel="stylesheet">
</head>
<body>
    <div class="wrapper" id="background">
     <div class="carousel">
     <div class="horsie" ng-repeat="image in images track by $index"
          ng-class="[index > $index ? 'past' : null,
                     index === $index ? 'present' : null,
                     index < $index ? 'future' : null]">
     <img ng-src="{{image}}">
     </div>
     </div>
     <div class="arrow decrementor"
          ng-class="index === 0 ? 'inactive' : 'active'"
          ng-click="increment(-1)">
     <div class="image"></div>
     </div>
     <div class="arrow incrementor"
          ng-class="index === images.length-1 ? 'inactive' : 'active'"
          ng-click="increment(1)">
     <div class="image"></div>
     </div>
     <div class="bubble-holder" ng-class="[options === 'yes' ? null : 'invisible']">
     <div class="bubble" ng-repeat="image in images track by $index"
          ng-class="[index === $index ? 'present' : null]"
          ng-click="selectImage($index)">
     </div>
     </div>
     <div class="control play" ng-click="control('play')"
          ng-class="[state === 'play' ? 'active' : null,
                     options === 'yes' ? null : 'invisible']"></div>
     <div class="control pause" ng-click="control('pause')"
          ng-class="[state === 'pause' ? 'active' : null,
                     options === 'yes' ? null : 'invisible']"></div>
    </div>
</body>
</html>
html {
    width: calc(100% - 32px);
    height: calc(100% - 4px);
    margin: 0;
    padding: 0;
}
 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 2px 16px;
    background: transparent
}
 
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
 
.carousel {
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 10px);
    overflow-x: hidden;
    box-sizing: content-box;
}
 
.horsie {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    transition: transform 0.3s ease-in-out;
}
 
.horsie img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
 
.horsie.past {
    transform: translate(-100%, 0);
}
 
.horsie.future {
    transform: translate(100%, 0);
}
 
.arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 200%;
    width: 100%;
    right: 0;
    transition: .3s ease-in-out;
}
.arrow:hover {
    background: #00000021;
}
.arrow .image {
    display: none;
}
 
.arrow.inactive {
    display: none;
}
 
.arrow.inactive .image {
    opacity: 0;
}
 
.decrementor {
    left: 0;
    transform: translate(-50%, -50%);
    right: inherit;
}
 
.decrementor .image {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAdElEQVR4AezQJwKAMBQD0DCOjAfD9j1BXVUdR0OxkWzCJvHvD/x5aVxEDMZBWVfAIDB1JQwOY96IUSzGYjCaxdgMJuMwOQJ4c51jlnc0HgsCUs5pPbX82csozaQsFqVuSpksSjIpg0OJBdACqlorw7AEowAAblWUrl8sD5AAAAAASUVORK5CYII=');
}
 
.incrementor {
    right: 0;
    transform: translate(50%, -50%);
}
 
.incrementor .image {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAcUlEQVR4Ae3QpwJAUACF4WM+sU6xV9M0TdI8mmR389j+07878PfSHOjYnYAETTdtP5Sh4VAik8pZlMSkChYlM6mSRalLKWN2FqolVLNqGgsyOE/zOZ+9i5FZTMFgJBaT34gRWUzGYAABKYMZizvm75W1TreU8DMmtioAAAAASUVORK5CYII=');
}
 
.bubble-holder {
    display: flex;
    position: absolute;
    width: 100%;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: flex-end;
    bottom: 1px;
    left: 0;
    padding-right: 3px;
    box-sizing: border-box;
}
 
.bubble {
    transition: all 0.2s ease-in-out;
    background-color: white;
    width: 8px;
    height: 8px;
    flex-grow: 1;
    border: 1px solid #bfbfbf;
}
.bubble:hover {
    opacity: .3;
}
.bubble.present {
    background-color: #181818;
    border: 1px solid #181818;
}
 
.bubble-holder:hover .bubble {
    cursor: pointer;
    width: 11px;
    height: 11px;
}
 
.control {
    position: absolute;
    height: 10px;
    width: 10px;
    left: 5px;
    bottom: 5px;
    background-size: contain;
    opacity: 0.3;
    cursor: pointer;
}
 
.control.active {
    opacity: 1;
}
 
.control.play {
    display: none;
}
 
.control.pause {
    display: none;
}
function getQueryVariable(variable) {
    var query = document.location.href.match(/\?.*$/g)[0].substring(1);
    var vars = query.split("&");
    for(var i = 0; i < vars.length; i++) { // >
     var pair = vars[i].split("=");
     if(pair[0] === variable) return pair[1];
    }
    return false;
}
 
(function(){
    var carousel = angular
     .module('carousel',[])
     .controller('CarouselController',CarouselController);
 
    CarouselController.$inject = ['$scope','$timeout'];
    function CarouselController($scope,$timeout){
     $scope.images = getQueryVariable("images").split(",").map(v=>v.split('@'));
 
     for(var i = 0; i < $scope.images.length; i++) { // >
     $scope.images[i] = `http://scp-jp-storage.wdfiles.com/local--files/${$scope.images[i][0]}/${$scope.images[i][1]}`;
     }
     // $scope.images is an array of image URLs
 
     $scope.index = 0;
     $scope.increment = function(amount) {
     if(amount > 0 && $scope.index < $scope.images.length-1) {
     $scope.index += amount;
     }
     if(amount < 0 && $scope.index > 0) {
     $scope.index += amount;
     }
     $scope.state = "pause";
     }
 
     var interval = getQueryVariable("interval") || 0;
     if(interval === "{$interval}") interval = 0;
     $scope.state = "play";
     if(interval === 0) $scope.state = "pause";
     function oscillate() {
     $timeout(function() {
     if(!mouseover && $scope.state === "play") {
     if($scope.index < $scope.images.length-1) {
     $scope.index++;
     } else {
     $scope.index = 0;
     }
     }
     if($scope.state === "play") {
     oscillate();
     }
     }, interval*1000, true);
     }
 
     var mouseover = false;
     document.documentElement.onmouseover = function () {
     mouseover = true;
     }
     document.documentElement.onmouseout = function () {
     mouseover = false;
     }
 
     if($scope.state === "play") {
     oscillate();
     }
     document.getElementById('background').style.background = getQueryVariable("background");
 
     $scope.selectImage = function(index) {
     $scope.index = index;
     $scope.state = "pause";
     }
 
     $scope.control = function(direction) {
     switch(direction) {
     case "play":
     $scope.state = "play";
     oscillate();
     break;
     case "pause":
     $scope.state = "pause";
     break;
     }
     }
 
     $scope.options = getQueryVariable("options");
     if($scope.options === "{$options}") $scope.options = "yes";
    }
})();

[[include :1nu:carousel-s
|images=file:gvs.ogol|ki8t-6-2177506#gvs.ogol|ki8t-6-2177506,file:gvs.ogol-eulb|g8ka-9-2177506#gvs.ogol-eulb|g8ka-9-2177506,file:gvs.ogol-wolley|i7vm-8-2177506#gvs.ogol-wolley|i7vm-8-2177506,file:gvs.ogol-neerg|k15f-7-2177506#gvs.ogol-neerg|k15f-7-2177506,file:6057712-4-ytwy@red-> logo.svg
|width=100%
|height=300px
|position=center
]]

URL丸ごと指定するやつ

<html ng-app="carousel" ng-controller="CarouselController">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="https://1nu.wikidot.com/local--code/carousel/3"></script>
    <link href="https://d3g0gp89917ko0.cloudfront.net/v--edac79f846ba/common--theme/base/css/style.css" rel="stylesheet">
    <link href="https://www.scp-wiki.net/component:theme/code/1" rel="stylesheet">
    <link href="https://1nu.wikidot.com/local--code/carousel/2" rel="stylesheet">
</head>
<body>
    <div class="wrapper" id="background">
     <div class="carousel">
     <div class="horsie" ng-repeat="image in images track by $index"
          ng-class="[index > $index ? 'past' : null,
                     index === $index ? 'present' : null,
                     index < $index ? 'future' : null]">
     <img ng-src="{{image}}">
     </div>
     </div>
     <div class="arrow decrementor"
          ng-class="index === 0 ? 'inactive' : 'active'"
          ng-click="increment(-1)">
     <div class="image"></div>
     </div>
     <div class="arrow incrementor"
          ng-class="index === images.length-1 ? 'inactive' : 'active'"
          ng-click="increment(1)">
     <div class="image"></div>
     </div>
     <div class="bubble-holder" ng-class="[options === 'yes' ? null : 'invisible']">
     <div class="bubble" ng-repeat="image in images track by $index"
          ng-class="[index === $index ? 'present' : null]"
          ng-click="selectImage($index)">
     </div>
     </div>
     <div class="control play" ng-click="control('play')"
          ng-class="[state === 'play' ? 'active' : null,
                     options === 'yes' ? null : 'invisible']"></div>
     <div class="control pause" ng-click="control('pause')"
          ng-class="[state === 'pause' ? 'active' : null,
                     options === 'yes' ? null : 'invisible']"></div>
    </div>
</body>
</html>
html {
    width: calc(100% - 32px);
    height: calc(100% - 4px);
    margin: 0;
    padding: 0;
}
 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 2px 16px;
    background: transparent
}
 
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
 
.carousel {
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 10px);
    overflow-x: hidden;
    box-sizing: content-box;
}
 
.horsie {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    transition: transform 0.3s ease-in-out;
}
 
.horsie img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}
 
.horsie.past {
    transform: translate(-100%, 0);
}
 
.horsie.future {
    transform: translate(100%, 0);
}
 
.arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 200%;
    width: 100%;
    right: 0;
    transition: .3s ease-in-out;
}
.arrow:hover {
    background: #00000021;
}
.arrow .image {
    display: none;
}
 
.arrow.inactive {
    display: none;
}
 
.arrow.inactive .image {
    opacity: 0;
}
 
.decrementor {
    left: 0;
    transform: translate(-50%, -50%);
    right: inherit;
}
 
.decrementor .image {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAdElEQVR4AezQJwKAMBQD0DCOjAfD9j1BXVUdR0OxkWzCJvHvD/x5aVxEDMZBWVfAIDB1JQwOY96IUSzGYjCaxdgMJuMwOQJ4c51jlnc0HgsCUs5pPbX82csozaQsFqVuSpksSjIpg0OJBdACqlorw7AEowAAblWUrl8sD5AAAAAASUVORK5CYII=');
}
 
.incrementor {
    right: 0;
    transform: translate(50%, -50%);
}
 
.incrementor .image {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAcUlEQVR4Ae3QpwJAUACF4WM+sU6xV9M0TdI8mmR389j+07878PfSHOjYnYAETTdtP5Sh4VAik8pZlMSkChYlM6mSRalLKWN2FqolVLNqGgsyOE/zOZ+9i5FZTMFgJBaT34gRWUzGYAABKYMZizvm75W1TreU8DMmtioAAAAASUVORK5CYII=');
}
 
.bubble-holder {
    display: flex;
    position: absolute;
    width: 100%;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap;
    align-content: flex-end;
    bottom: 1px;
    left: 0;
    padding-right: 3px;
    box-sizing: border-box;
}
 
.bubble {
    transition: all 0.2s ease-in-out;
    background-color: white;
    width: 8px;
    height: 8px;
    flex-grow: 1;
    border: 1px solid #bfbfbf;
}
.bubble:hover {
    opacity: .3;
}
.bubble.present {
    background-color: #181818;
    border: 1px solid #181818;
}
 
.bubble-holder:hover .bubble {
    cursor: pointer;
    width: 11px;
    height: 11px;
}
 
.control {
    position: absolute;
    height: 10px;
    width: 10px;
    left: 5px;
    bottom: 5px;
    background-size: contain;
    opacity: 0.3;
    cursor: pointer;
}
 
.control.active {
    opacity: 1;
}
 
.control.play {
    display: none;
}
 
.control.pause {
    display: none;
}
function getQueryVariable(variable) {
    var query = document.location.href.match(/\?.*$/g)[0].substring(1);
    var vars = query.split("&");
    for(var i = 0; i < vars.length; i++) { // >
     var pair = vars[i].split("=");
     if(pair[0] === variable) return pair[1];
    }
    return false;
}
 
(function(){
    var carousel = angular
     .module('carousel',[])
     .controller('CarouselController',CarouselController);
 
    CarouselController.$inject = ['$scope','$timeout'];
    function CarouselController($scope,$timeout){
     $scope.images = getQueryVariable("images").split(",").map(v=>v.split('@'));
 
     for(var i = 0; i < $scope.images.length; i++) { // >
     $scope.images[i] = `${$scope.images[i][0]}`;
     }
     // $scope.images is an array of image URLs
 
     $scope.index = 0;
     $scope.increment = function(amount) {
     if(amount > 0 && $scope.index < $scope.images.length-1) {
     $scope.index += amount;
     }
     if(amount < 0 && $scope.index > 0) {
     $scope.index += amount;
     }
     $scope.state = "pause";
     }
 
     var interval = getQueryVariable("interval") || 0;
     if(interval === "{$interval}") interval = 0;
     $scope.state = "play";
     if(interval === 0) $scope.state = "pause";
     function oscillate() {
     $timeout(function() {
     if(!mouseover && $scope.state === "play") {
     if($scope.index < $scope.images.length-1) {
     $scope.index++;
     } else {
     $scope.index = 0;
     }
     }
     if($scope.state === "play") {
     oscillate();
     }
     }, interval*1000, true);
     }
 
     var mouseover = false;
     document.documentElement.onmouseover = function () {
     mouseover = true;
     }
     document.documentElement.onmouseout = function () {
     mouseover = false;
     }
 
     if($scope.state === "play") {
     oscillate();
     }
     document.getElementById('background').style.background = getQueryVariable("background");
 
     $scope.selectImage = function(index) {
     $scope.index = index;
     $scope.state = "pause";
     }
 
     $scope.control = function(direction) {
     switch(direction) {
     case "play":
     $scope.state = "play";
     oscillate();
     break;
     case "pause":
     $scope.state = "pause";
     break;
     }
     }
 
     $scope.options = getQueryVariable("options");
     if($scope.options === "{$options}") $scope.options = "yes";
    }
})();

[[include :1nu:carousel
|images=http://scp-jp-storage.wdfiles.com/local--files/file:6057712-6-t8ik/logo.svg,http://scp-jp-storage.wdfiles.com/local--files/file:6057712-9-ak8g/blue-logo,svg,http://scp-jp-storage.wdfiles.com/local--files/file:6057712-8-mv7i/yellow-logo.svg,http://scp-jp-storage.wdfiles.com/local--files/file:6057712-7-f51k/green-logo.svg,http://scp-jp-storage.wdfiles.com/local--files/file%3A6057712-4-ytwy/red-logo.svg
|width=100%
|height=300px
|position=center
]]

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License