ええ感じの画像カルーセル
ストレージサイトの画像のみ使用出来るやつ
<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
]]
