javascript（ジャバスクリプト）で円形のスライダーを自作してみました。【javascript circleslider】【JavaScript・WEBプログラミング・WEB初心者・WEB制作・javascript・js・js slider・js-animation・円形スライダ－】

posted on 2020.10.6

slider carouselを実装しcirclesliderと同期させる

slider carousel実装に必要なコードを一部抜き出して表示します。

/*
 * 
 Plugin_name:Ak_CircleSlider
 Author:Aturow Komori
 Author URI: https://over-creation-studio.jp/
 Version: 1.0.1
 License: Freeeeeeee < Please give me a job license > 
 *
 */
$(document).ready(function ()
{

    // $("#area").ak_cslider_plug({intervalTime: 3000});

});

(function ($) {
    /*
     * start plugin
     */
    $.fn.ak_cslider_plug = function (options) {
        /*
         * settings
         */

        var settings = $.extend({
            intervalTime: 5000,
            start: 0,
            slide_start: 0,
        }, options);
        var self = this;
        var width = self.innerWidth()  //selector width
                , height = self.innerHeight()  //selector height
                , radius = width / 2  //selector 半径
                , dot_dia = 2.5 * width / 5 //円形スライダー一つの円の直径
                , centerX = radius - dot_dia / 2 //slector（#area）の中心座標
                , centerY = radius - dot_dia / 2
                , angle_start = []
                , allimg = ['images/asami.jpg', 'images/chiaki.jpg', 'images/haruka.jpg', 'images/junon.jpg', 'images/mirin.jpg']
                , slidesAngle = 360 / allimg.length //circlesleder 1回の移動半径
                , $slides;

        /*
         * slider carousel
         */

        function slide() {

            var j = settings.start;

            //72回の呼び出しで300pxに足らなければ300pxに切り上げる
            Math.ceil((settings.slide_start) / 10) * 10;
            var s = (settings.slide_start) % (width * ($slides.length));
            //console.log(s);
            $('.overview').css({'transform': 'translateX(' + -s + 'px)'});

            //circle_slide()関数と呼び出しを合わせる
            settings.slide_start += (width / slidesAngle);

            //300pxをオーバーしたら300pxを代入。
            if (settings.slide_start >= width * j) {
                settings.slide_start = width * j;
            }


        }

        function set_timer() {

            var j = 0;
            var loopFunc = function () {
                //circle_slide(settings.start);
                slide();
                j += 1;
                if (slidesAngle >= j) {
                    setTimeout(function () {
                        loopFunc();
                    }, 10);
                }
            };
            loopFunc();
            settings.start++;
            move(settings.start);
        }

        function start_timer() {
            set_timer();
            this.timer = setTimeout(function () {
                start_timer();
            }, settings.intervalTime);

        }



        function firstFunction() {


        }

        function secondFunction() {
            firstFunction();
            start_timer();
        }

        function _initialize() {
            secondFunction();
        }

        _initialize();
        return self;

    };
})(jQuery);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

Plugin_name:Ak_CircleSlider

Author:Aturow Komori

Author URI: https://over-creation-studio.jp/

Version: 1.0.1

License: Freeeeeeee < Please give me a job license >

$(document).ready(function ()

{

// $("#area").ak_cslider_plug({intervalTime: 3000});

});

(function ($) {

* start plugin

$.fn.ak_cslider_plug = function (options) {

* settings

var settings = $.extend({

intervalTime: 5000,

start: 0,

slide_start: 0,

}, options);

var self = this;

var width = self.innerWidth() //selector width

, height = self.innerHeight() //selector height

, radius = width / 2 //selector 半径

, dot_dia = 2.5 * width / 5 //円形スライダー一つの円の直径

, centerX = radius - dot_dia / 2 //slector（#area）の中心座標

, centerY = radius - dot_dia / 2

, angle_start = []

, allimg = ['images/asami.jpg', 'images/chiaki.jpg', 'images/haruka.jpg', 'images/junon.jpg', 'images/mirin.jpg']

, slidesAngle = 360 / allimg.length //circlesleder 1回の移動半径

, $slides;

* slider carousel

function slide() {

var j = settings.start;

//72回の呼び出しで300pxに足らなければ300pxに切り上げる

Math.ceil((settings.slide_start) / 10) * 10;

var s = (settings.slide_start) % (width * ($slides.length));

//console.log(s);

$('.overview').css({'transform': 'translateX(' + -s + 'px)'});

//circle_slide()関数と呼び出しを合わせる

settings.slide_start += (width / slidesAngle);

//300pxをオーバーしたら300pxを代入。

if (settings.slide_start >= width * j) {

settings.slide_start = width * j;

}

function set_timer() {

var j = 0;

var loopFunc = function () {

//circle_slide(settings.start);

slide();

j += 1;

if (slidesAngle >= j) {

setTimeout(function () {

loopFunc();

}, 10);

}

};

loopFunc();

settings.start++;

move(settings.start);

}

function start_timer() {

set_timer();

this.timer = setTimeout(function () {

start_timer();

}, settings.intervalTime);

}

function firstFunction() {

}

function secondFunction() {

firstFunction();

start_timer();

}

function _initialize() {

secondFunction();

}

_initialize();

return self;

};

})(jQuery);

スライダーカルーセルを動かすのに必要なメソッドはslide()、set_timer()、start_timer()の3つです。

スライダーカルーセルの移動はslide()関数内で行っています。

重要なのは、circle_slide() 関数が1回の呼び出しで円形スライダーを1°移動させていたのに対して、slide()関数が1回呼び出された時のスライダーカルーセルの移動距離（px）を合わせることです。

slide()関数が1回呼び出された時のカルーセルの移動距離は、「カルセールスライダー1個分の画像が0から見えなくなるまで移動する距離(ここでは300px)」を「円形のスライダーが現在の位置から隣の位置へ移動するまでにcircle_slide()関数が何回呼びだされるか（ここでは72）」で割れば求められます。

slide()関数内でそれをおこなっているのが settings.slide_start += (width / slidesAngle);の行の(width / slidesAngle)の部分です。

正直、これだけです (∩.∩)

ここではsettings.slide_startに必ずしもジャストな数値が入ってくるわけではないので最後に細工します。

settings.slide_startに入る数値が画像1個の幅に足らなければ、Math.ceil((settings.slide_start)で settings.slide_startの値を切り上げます。オーバーした時は、画像1個の幅を代入します。

ここでもモジュロ演算を使って「画像1個の幅*画像数」以上の数値は入らないようにしています。

slide()関数だけ作れば後はcircle_slide()関数と同じです。set_timer()で画像1個分移動して、start_timer() で繰り返します。

これでスライダーカルーセルの実装の解説は終わりです。次は円形スライダーのcssでのスタイリングを簡単に確認したいと思います。

circlesliderのスタイリングをcssで設定する

始めにstylesheetを示しておきます。

CSS

@charset "UTF-8";

/*
        Author:Aturow Komori
        Author URI: https://over-creation-studio.jp/
        Version: 1.0.1
        License: Freeeeeeee < Please give me a job license >

*/

*{
    margin: 0;
    padding: 0
 box-sizing: border-box;

}

body{
    background:  url("images/tiny-squares.png");
    background-size: 190px 190px;
}


h1{
    font-family: 'Anton', sans-serif;
    color:     #2c1d20;
    text-align: center;
    font-size: 260%;
    text-shadow: 2px 2px 1px #fc6f78;
    letter-spacing: .15em;
    margin: 1em 0;

}

#area {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 8em auto 0;

}


.round {
    background: #e5e6eb url("images/");;
    z-index: 10;
    border-radius: 50%;
    position: absolute;
    background-size:100% auto;

}


#area .viewport{
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: hidden;
    margin: 0;
    border-radius: 50%;
    z-index: 50;
}

#area .overview{
    margin: 0;
    padding: 0;
    width: 1800px;
    height: 100%;
    list-style: none;
    overflow: hidden;
    position: absolute;
    transition: transform 0s cubic-bezier(.19,1,.22,1),color;
}

#area .overview li{
    display: inline-block;
    position:relative;
    background: #fff;
}



#area .overview img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
}

.thum{

    position: relative;
    z-index: 100;
}

.thum div{  
    background:  #f0f2f4;
    transition: transform 1s cubic-bezier(.19,1,.22,1),color;
    transition: background-color .5s linear .5s;
    position: absolute;
    border-radius: 50%;
    text-align: center;
}

.thum div.current{
    border: .3em solid #9bccfd;
}

.thum div h3{ 
    margin: 35% 0 0;
    font-family: 'Romanesco', cursive;
    letter-spacing: .15em;
    font-size: 155%;
    color:   #80bbf4;
}




#button{
    display: none;
}

@media only screen and (max-width:  790px){
    #area {
        margin: 0 auto;
        width: 250px;
        height: 250px;

    }

    #c_area{
        margin: 2em 0 0;
        overflow: hidden;
        padding:7em 0 0;
        width: 100%;
        position: relative
    }

    #c_area > div{
        display: block;
        margin: 0 auto;
    }


    #txt{
        width : 100%;
        margin: 7em 0 2em;
        padding: 0 2.5%;
    }

    #txt P{
        line-height: 1.45;
        font-size: 108%;    
        letter-spacing: .05em;
        margin: 0 0 .5em;

    }

    #txt p strong{
        font-weight: bold;
        font-size: 118%;
        padding: 0 .25em 0 0;
        background: linear-gradient(transparent 80%, #f9fc45 10%);
    }

}

@media only screen and (max-width:  650px){
    #area {
        width: 250px;
        height: 250px;
        margin: 0 auto;
    }

}

@media only screen and (max-width:  480px){

    #area {
        width: 210px;
        height: 210px;
        margin: 0 auto;
    }

    #c_area {

        padding: 6em 0 0;
    }

    #txt {
        padding: 0 5%;
        margin: 6.5em 0 2em;
    }

    #txt P {
        line-height: 1.3;
        font-size: 102%;
        letter-spacing: .075em;
        margin: 0 0 .5em;
    }

    .thum div h3{ 

        font-size: 115%;

    }
    .thum div p{ 

        font-size: 60%;
    }
}

@media only screen and (max-width:  400px){

    #area {
        width: 185px;
        height: 185px;
        margin: 0 auto;
    }

    .thum div h3{ 
        font-size: 100%;
    }

    .thum div p{ 
        margin: .25em 0 0;
        font-size: 50%;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

@charset "UTF-8";

Author:Aturow Komori

Author URI: https://over-creation-studio.jp/

Version: 1.0.1

License: Freeeeeeee < Please give me a job license >

margin: 0;

padding: 0

box-sizing: border-box;

}

body{

background: url("images/tiny-squares.png");

background-size: 190px 190px;

}

h1{

font-family: 'Anton', sans-serif;

color: #2c1d20;

text-align: center;

font-size: 260%;

text-shadow: 2px 2px 1px #fc6f78;

letter-spacing: .15em;

margin: 1em 0;

}

#area {

position: relative;

width: 250px;

height: 250px;

margin: 8em auto 0;

}

.round {

background: #e5e6eb url("images/");;

z-index: 10;

border-radius: 50%;

position: absolute;

background-size:100% auto;

}

#area .viewport{

height: 100%;

width: 100%;

position: absolute;

overflow: hidden;

margin: 0;

border-radius: 50%;

z-index: 50;

}

#area .overview{

margin: 0;

padding: 0;

width: 1800px;

height: 100%;

list-style: none;

overflow: hidden;

position: absolute;

transition: transform 0s cubic-bezier(.19,1,.22,1),color;

}

#area .overview li{

display: inline-block;

position:relative;

background: #fff;

}

#area .overview img{

width: 100%;

height: 100%;

object-fit: contain;

position: relative;

}

.thum{

position: relative;

z-index: 100;

}

.thum div{

background: #f0f2f4;

transition: transform 1s cubic-bezier(.19,1,.22,1),color;

transition: background-color .5s linear .5s;

position: absolute;

border-radius: 50%;

text-align: center;

}

.thum div.current{

border: .3em solid #9bccfd;

}

.thum div h3{

margin: 35% 0 0;

font-family: 'Romanesco', cursive;

letter-spacing: .15em;

font-size: 155%;

color: #80bbf4;

}

#button{

display: none;

}

@media only screen and (max-width: 790px){

#area {

margin: 0 auto;

width: 250px;

height: 250px;

}

#c_area{

margin: 2em 0 0;

overflow: hidden;

padding:7em 0 0;

width: 100%;

position: relative

}

#c_area > div{

display: block;

margin: 0 auto;

}

#txt{

width : 100%;

margin: 7em 0 2em;

padding: 0 2.5%;

}

#txt P{

line-height: 1.45;

font-size: 108%;

letter-spacing: .05em;

margin: 0 0 .5em;

}

#txt p strong{

font-weight: bold;

font-size: 118%;

padding: 0 .25em 0 0;

background: linear-gradient(transparent 80%, #f9fc45 10%);

}

@media only screen and (max-width: 650px){

#area {

width: 250px;

height: 250px;

margin: 0 auto;

}

@media only screen and (max-width: 480px){

#area {

width: 210px;

height: 210px;

margin: 0 auto;

}

#c_area {

padding: 6em 0 0;

}

#txt {

padding: 0 5%;

margin: 6.5em 0 2em;

}

#txt P {

line-height: 1.3;

font-size: 102%;

letter-spacing: .075em;

margin: 0 0 .5em;

}

.thum div h3{

font-size: 115%;

}

.thum div p{

font-size: 60%;

}

@media only screen and (max-width: 400px){

#area {

width: 185px;

height: 185px;

margin: 0 auto;

}

.thum div h3{

font-size: 100%;

}

.thum div p{

margin: .25em 0 0;

font-size: 50%;

}

始めにpositonプロパティーを使用して、createDocumentFragment()で構築したviewport、round、thumのそれぞれのドキュメントを#area上に重ねます。

move()関数でcurrentクラスが与えられた場合、borderを設定します。

後は通常のスタイリングと大差がないので割愛します。気になることがあれば確認して下さい。

circlesliderのレスポンシブ対応について

このプラグインを設定するセレクター（ここでは#area）のサイズ（width,height）によってcirclesliderに必要なドキュメントのサイズは変化するようにプラグインを記述してあります。必要に応じてcssのメディアクエリーでセレクター（ここでは#area）のサイズを再設定すると必要なドキュメントはすべて変化するので、様々なデバイスに対応できると思います。確認してみてください。

javascript（ジャバスクリプト）でcircleslider（円形のスライダー）を自作してみました。まとめ

javascript(jquery)でcirclesliderを制作し解説させて頂きました。いかがだったでしょうか？。モジュロ演算などゲームのjavascriptを記述するときなども使えると思うのでいろいろ試してみてください。多少産みの苦しみはありましたが、終わってみるとこの世界はやっぱり楽しいなと思ってます。それではまた。

1 2