Slider Arxiki

Developer
Kelly Kalouta
Size
5,909 Kb
Views
12,144
  1. Slider Arxiki Previews
  2. Slider Arxiki HTML Codes
  3. Slider Arxiki CSS Codes
  4. Slider Arxiki JS Codes

How do I make an slider arxiki?

What is a slider arxiki? How do you make a slider arxiki? This script and codes were developed by Kelly Kalouta on 14 November 2022, Monday.

Slider Arxiki Previews
IQ Test

Slider Arxiki - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slider Arxiki</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> </div> <!-- // bss-slides -->
<script src="https://leemark.github.io/better-simple-slideshow/demo/js/hammer.min.js"></script><!-- for swipe support on touch interfaces -->
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BUCdl2cD5WE/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Off-duty outfit. Get the look in our #6400 relaxed tee. #bellacanvas</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Η δημοσίευση κοινοποιήθηκε από το χρήστη BELLA+CANVAS (@bellacanvas) στις <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-05-13T16:01:11+00:00">Μάι 13, 2017, 9:01πμ PDT</time></p></div></blockquote> <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
<div class="bss-slides demo1" tabindex="1" autofocus="autofocus"> <figure> <img src="http://www.bc-collection.eu/uploads/home/1701_BC_Site_Homepage-Organic_W_1370x720.jpg" width="100%" /><figcaption>"M <a href=" ">T</a>.</figcaption> </figure> <figure> <img src="http://www.pasprint.be/sites/all/themes/pasprint/images/header-bc-1.jpg" width="100%" /><figcaption>E <a href=" ">D</a>.</figcaption> </figure> <figure> <img src="http://namebrandapparel.com/clothing/wp-content/uploads/2012/11/Gildan-Styles.jpg" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure> <figure> <img src="http://www.t-shirtmagazineonline.com/wp-content/uploads/2011/02/GILDAN-TEE-2.jpg" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure> <figure> <img src="https://ihfiles.com/blog/2012/03/bella.jpg" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure> <figure> <img src="https://www.ukworkstore.co.uk/media/catalog/product/p/r/prod_bz02tlc_95928.jpg " width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure> <figure> <img src="http://aboutorganiccotton.org/wp-content/uploads/2016/04/Product_Mantis_World-06.jpg?x52442" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure><figure> <img src="http://aboutorganiccotton.org/wp-content/uploads/2016/04/Product_Mantis_World-05.jpg?x52442" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure><figure> <img src="https://www.gsmahal.co.uk/products/images/categories/61-044-0%20Super%20Premium%20T.jpg" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure> <figure> <img src="https://hyhubartdesign.files.wordpress.com/2014/09/61-024-0-lady-fit-strap-t-2.jpg" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure> <figure> <img src="https://www.ukworkstore.co.uk/media/catalog/product/p/r/prod_62045_95480.jpg" width="100%" /><figcaption>C <a href=" ">T</a>.</figcaption> </figure> <figure> <img src=" http://www.t-shirtmagazineonline.com/wp-content/uploads/2011/02/ANVIL-TEE-2.jpg " width="100%" /><figcaption>E <a href=" ">D</a>.</figcaption> </figure> <figure> <img src="http://www.cotton-shirts.eu/typo3temp/_processed_/csm_anvil_1_5114811b85.jpg" width="100%" /><figcaption>S <a href=" ">P</a>.</figcaption> </figure> <script src="js/index.js"></script>
</body>
</html>

Slider Arxiki - Script Codes CSS Codes

body{ background: #000; /*overflow: hidden;*/
}
.bss-slides{ background: #000; position: relative; display: block;
}
.bss-slides:focus{ outline: 0;
}
.bss-slides figure{ position: absolute; top: 0; width: 100%;
}
.bss-slides figure:first-child{ position: relative;
}
.bss-slides figure img{ opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s; position: relative;
/*-webkit-backface-visibility: hidden; backface-visibility: hidden; */
}
.bss-slides .bss-show { z-index: 3;
}
.bss-slides .bss-show img{ opacity: 1; /* -webkit-backface-visibility: hidden; backface-visibility: hidden;*/
}
.bss-slides figcaption{ position: absolute; font-family: sans-serif; font-size: .8em; bottom: .75em; right: .35em; padding: .25em; color: #fff; background: #000; background: rgba(0,0,0, .25); border-radius: 2px; opacity: 0; -webkit-transition: opacity 1.2s; transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{ z-index: 2; opacity: 1;
}
.bss-slides figcaption a{ color: #fff;
}
.bss-next, .bss-prev{ color: #fff; position: absolute; background: #000; background: rgba(0,0,0, .6); top: 50%; z-index: 4; font-size: 2em; margin-top: -1.2em; opacity: .5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.bss-next:hover, .bss-prev:hover{ cursor: pointer; opacity: 1;
}
.bss-next{ right: 0; padding: 10px 5px 15px 10px; border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.bss-prev{ left: 0; padding: 10px 10px 15px 5px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;
}
.bss-fullscreen{ display: block; width: 24px; height: 24px; background: rgba(0,0,0,.3) url(https://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png); background-size: contain; position: absolute; top: 5px; left: 5px; cursor: pointer; opacity: .3;
}
.bss-fullscreen:hover{ opacity: .8;
}
:-webkit-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}
:-moz-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}
:full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}
:-webkit-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}
:-moz-full-screen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}
:fullscreen .bss-fullscreen{ background: rgba(0,0,0,.4) url(https://leemark.github.io/better-simple-slideshow/img/compress_ffffff_64.png); background-size: contain;
}

Slider Arxiki - Script Codes JS Codes

var makeBSS = function (el, options) { var $slideshows = document.querySelectorAll(el), // a collection of all of the slideshow $slideshow = {}, Slideshow = { init: function (el, options) { this.counter = 0; // to keep track of current slide this.el = el; // current slideshow container this.$items = el.querySelectorAll('figure'); // a collection of all of the slides, caching for performance this.numItems = this.$items.length; // total number of slides options = options || {}; // if options object not passed in, then set to empty object options.auto = options.auto || false; // if options.auto object not passed in, then set to false this.opts = { auto: (typeof options.auto === "undefined") ? false : options.auto, speed: (typeof options.auto.speed === "undefined") ? 1500 : options.auto.speed, pauseOnHover: (typeof options.auto.pauseOnHover === "undefined") ? false : options.auto.pauseOnHover, fullScreen: (typeof options.fullScreen === "undefined") ? false : options.fullScreen, swipe: (typeof options.swipe === "undefined") ? false : options.swipe }; this.$items[0].classList.add('bss-show'); // add show class to first figure this.injectControls(el); this.addEventListeners(el); if (this.opts.auto) { this.autoCycle(this.el, this.opts.speed, this.opts.pauseOnHover); } if (this.opts.fullScreen) { this.addFullScreen(this.el); } if (this.opts.swipe) { this.addSwipe(this.el); } }, showCurrent: function (i) { // increment or decrement this.counter depending on whether i === 1 or i === -1 if (i > 0) { this.counter = (this.counter + 1 === this.numItems) ? 0 : this.counter + 1; } else { this.counter = (this.counter - 1 < 0) ? this.numItems - 1 : this.counter - 1; } // remove .show from whichever element currently has it // http://stackoverflow.com/a/16053538/2006057 [].forEach.call(this.$items, function (el) { el.classList.remove('bss-show'); }); // add .show to the one item that's supposed to have it this.$items[this.counter].classList.add('bss-show'); }, injectControls: function (el) { // build and inject prev/next controls // first create all the new elements var spanPrev = document.createElement("span"), spanNext = document.createElement("span"), docFrag = document.createDocumentFragment(); // add classes spanPrev.classList.add('bss-prev'); spanNext.classList.add('bss-next'); // add contents spanPrev.innerHTML = '&laquo;'; spanNext.innerHTML = '&raquo;'; // append elements to fragment, then append fragment to DOM docFrag.appendChild(spanPrev); docFrag.appendChild(spanNext); el.appendChild(docFrag); }, addEventListeners: function (el) { var that = this; el.querySelector('.bss-next').addEventListener('click', function () { that.showCurrent(1); // increment & show }, false); el.querySelector('.bss-prev').addEventListener('click', function () { that.showCurrent(-1); // decrement & show }, false); el.onkeydown = function (e) { e = e || window.event; if (e.keyCode === 37) { that.showCurrent(-1); // decrement & show } else if (e.keyCode === 39) { that.showCurrent(1); // increment & show } }; }, autoCycle: function (el, speed, pauseOnHover) { var that = this, interval = window.setInterval(function () { that.showCurrent(1); // increment & show }, speed); if (pauseOnHover) { el.addEventListener('mouseover', function () { interval = clearInterval(interval); }, false); el.addEventListener('mouseout', function () { interval = window.setInterval(function () { that.showCurrent(1); // increment & show }, speed); }, false); } // end pauseonhover }, addFullScreen: function(el){ var that = this, fsControl = document.createElement("span"); fsControl.classList.add('bss-fullscreen'); el.appendChild(fsControl); el.querySelector('.bss-fullscreen').addEventListener('click', function () { that.toggleFullScreen(el); }, false); }, addSwipe: function(el){ var that = this, ht = new Hammer(el); ht.on('swiperight', function(e) { that.showCurrent(-1); // decrement & show }); ht.on('swipeleft', function(e) { that.showCurrent(1); // increment & show }); }, toggleFullScreen: function(el){ // https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods if (document.documentElement.requestFullscreen) { el.requestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { el.msRequestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { el.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { el.webkitRequestFullscreen(el.ALLOW_KEYBOARD_INPUT); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } } // end toggleFullScreen }; // end Slideshow object // make instances of Slideshow as needed [].forEach.call($slideshows, function (el) { $slideshow = Object.create(Slideshow); $slideshow.init(el, options); });
};
var opts = { auto : { speed : 5000, pauseOnHover : true }, fullScreen : true, swipe : true
};
makeBSS('.demo1', opts);
Slider Arxiki - Script Codes
Slider Arxiki - Script Codes
Home Page Home
Developer Kelly Kalouta
Username kelkal
Uploaded November 14, 2022
Rating 3
Size 5,909 Kb
Views 12,144
Do you need developer help for Slider Arxiki?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kelly Kalouta (kelkal) Script Codes
Name
Brands sliding
Slideshow Funny Tshirts
Footer
Footer Click-Tshirt
Oi
Home Page
Responsive Menu 1
Dokimi2
Payment Methods
Dokimi1
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!