Responsive image slider dengan jssor

Sebuah image slider pada website image galeri sangatlah dibutuhkan, sebagai penambah keselarasan sebuah website.

Namun bukan ber-arti website lain yang bukan berbasis sebagai website image galeri tidak membutuhkan image slider. Pada dasarnya image slider adalah sarana penambah informasi dengan sebuah gambar.

Buat Anda yang membutuhkan image slider, di bawah ini adalah script responsive image slider dengan jssor. Anda bisa men-download scriptnya di akhir postingan ini, Ok langsung saja simak scriptnya di bawah.

Responsive Image slider css script

body {
	margin:0px;
	padding:0;
	font-family:verdana;
	background-color:#333;
}
h1 {
	color:#fff; 
	text-align:center; 
	font-weight:normal;
	font-size:140%;  
}
.mainbox {
	position:relative;
	margin:0 auto;
	top:0px;
	left:0px;
	width:752px;
	height:500px;
	overflow:hidden;
	visibility:hidden;
}
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
    from {
        transform: rotate(0deg);
    }
	to {
        transform: rotate(360deg);
    }
}
.jssorb072 .i {
	position:absolute;
	color:#000;
	font-family:"Helvetica neue",Helvetica,Arial,sans-serif;
	text-align:center;
	cursor:pointer;
	z-index:0;
}
.jssorb072 .i .b {fill:#fff;opacity:.3;}
.jssorb072 .i:hover .b {fill:#ff0;}
.jssorb072 .iav {color:#fff;}
.jssorb072 .iav .b {fill:#000;opacity:.5;}
.jssorb072 .i.idn {opacity:.3;}
.jssora053 {display:block;position:absolute;cursor:pointer;}
.jssora053 .a {fill:none;stroke:#fff;stroke-width:640;stroke-miterlimit:10;}
.jssora053:hover {opacity:.8;}
.jssora053.jssora053dn {opacity:.5;}
.jssora053.jssora053ds {opacity:.3;pointer-events:none;}
.load {position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);}
.imageslide {cursor:default;position:relative;top:0px;left:0px;width:752px;height:500px;overflow:hidden;}
.svgimg {margin-top:-19px;position:relative;top:50%;width:38px;height:38px;}
.bul {position:absolute;bottom:12px;right:12px;}
.bulnum {width:24px;height:24px;font-size:12px;line-height:24px;}
.bulbox {position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;}
.navar {width:55px;height:55px;top:0px;left:25px;}
.aright {width:55px;height:55px;top:0px;right:25px;}
.svgvar {position:absolute;top:0;left:0;width:100%;height:100%;}
.svga {position:absolute;top:0;left:0;width:100%;height:100%;}

Responsive image slider main html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive image slider dengan jssor</title>	
</head>
<body>
    
    <h1>Responsive image slider dengan jssor</h1>

    <div id="jssor_1" class="mainbox">
        <div data-u="loading" class="jssorl-009-spin load">
            <img class="svgimg" src="https://my-id.site/editor/svg/spin.svg" />
        </div>
        <div data-u="slides" class="imageslide">
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a1.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a2.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a3.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a4.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a5.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a6.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a7.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a8.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a9.jpg" />
            </div>
            <div>
                <img data-u="image" src="https://my-id.site/images/bg/a10.jpg" />
            </div>
        </div>

        <div data-u="navigator" class="jssorb072 bul" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
            <div data-u="prototype" class="i bulnum">
                <svg viewBox="0 0 16000 16000" class="bulbox">
                    <circle class="b" cx="8000" cy="8000" r="6666.7"></circle>
                </svg>
                <div data-u="numbertemplate" class="n"></div>
            </div>
        </div>

        <div data-u="arrowleft" class="jssora053 navar" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
            <svg viewBox="0 0 16000 16000" class="svgvar">
                <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
            </svg>
        </div>
        <div data-u="arrowright" class="jssora053 aright" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
            <svg viewBox="0 0 16000 16000" class="svga">
                <polyline class="a" points="4960,1920 11040,8000 4960,14080 "></polyline>
            </svg>
        </div>
    </div>
	
<script src="https://my-id.site/editor/js/jssor.slider.min.js"></script>
<script>
    jssor_1_slider_init = function() {
        var jssor_1_options = {
        $AutoPlay: 1,
        $Idle: 2000,
        $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
        },
            $BulletNavigatorOptions: {
            $Class: $JssorBulletNavigator$
            }
        };
        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
        var MAX_WIDTH = 752;
        function ScaleSlider() {
            var containerElement = jssor_1_slider.$Elmt.parentNode;
            var containerWidth = containerElement.clientWidth;
            if (containerWidth) {
                var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
                jssor_1_slider.$ScaleWidth(expectedWidth);
            }
            else {
                window.setTimeout(ScaleSlider, 30);
            }
        }
        ScaleSlider();
        $Jssor$.$AddEvent(window, "load", ScaleSlider);
        $Jssor$.$AddEvent(window, "resize", ScaleSlider);
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
    };
	jssor_1_slider_init();
</script>

</body>
</html>

Perhatikan pada line No. 070, itu adalah JSSOR script, yang saya dapat dari situs resminya. JSSOR adalah website penyedia plugin image slider prefesional, lengkap dan menarik. *Link di bawah.

Silahkan Anda gunakan Realtime HTML Editor ↗ untuk melihat dan mengedit hasil script diatas.

Untuk mengunjungi website JSSOR dan Download script diatas, silahkan anda ikuti link ini: JSSOR.COM

Sampai disini ulasan tentang responsive image slider dengan jssor, semoga bermanfaat, dan salam sukses untuk Anda semuanya. Sampai jumpa lagi di Free script berikutnya.

Mungkin Anda Menyukai