Simple CSS and Javascript Image Slider
The author has already published a carousel script, which also uses only CSS and Javascript. Now let's look at the slider script. It differs from the carousel in that only one element is visible at a time, and not several, and the elements do not scroll, but are slowly replaced by one another. And further. In this slider, only images (slides) are used as elements, therefore it is called a simple image slider.
Navigation is carried out by the arrows “Next element” or “Previous element” and indicator points. Arrows and dots can be disabled in the script settings. Elements can be displayed with a stop at the first and last element or in a cycle when the last element is again followed by the first. You can enable automatic viewing (scrolling) of elements, the duration of viewing (the interval between switching) is adjustable. When you mouse over an item, scrolling stops.
The slider automatically adjusts to any screen width of any device. You can verify this by moving left or right one of the sides of the browser.
HTML is a standard slider code, except for one: a screen is placed in front of the images, which is a plain white picture. All images and screen should be the same size. The number of images is arbitrary.
The <ul> <li> tags were used as containers, but you can use either <div> <div> or <div> <p>. Arrows and indicator points are positioned absolutely in the respective containers. For arrows, patterns in the form of triangular brackets are used, which, if desired, you can replace with your own patterns. Points are generated by the program, the number of points is equal to the number of images.
All images are stacked, one above the other, with absolute positioning in the upper left corner of the containing container. The screen prevents collapse of the outer container. All images are assigned the CSS property opacity: 0, except for the first element to which the initialization program assigns opacity: 1, thereby making it visible.
Scrolling elements is carried out by smoothly changing the opacity from 1 to 0 for the visible element and from 0 to 1 for the next invisible element. Thus, the visible element becomes invisible, and the invisible visible. The transition smoothness creates a transition property with a duration of 1s and an ease-in transition function.
In order for the slider to be adaptive to any screen width, for the images you need to specify the CSS property width: 100%. For all block containers (div, ul, li, etc.) also width: 100% or, if you need width in numerical units, then only max-width or min-width.
Styles, as usual, are included in the header. The script can be connected at the onload event or at the end of the HTML markup. The slider script file may look like this:
The slider is called by the name of the sim-slider class or by identifier. In the second case, you can place multiple sliders on one page.
All images are taken from open sources.
Thanks for your attention!
Navigation is carried out by the arrows “Next element” or “Previous element” and indicator points. Arrows and dots can be disabled in the script settings. Elements can be displayed with a stop at the first and last element or in a cycle when the last element is again followed by the first. You can enable automatic viewing (scrolling) of elements, the duration of viewing (the interval between switching) is adjustable. When you mouse over an item, scrolling stops.
The slider automatically adjusts to any screen width of any device. You can verify this by moving left or right one of the sides of the browser.
HTML is a standard slider code, except for one: a screen is placed in front of the images, which is a plain white picture. All images and screen should be the same size. The number of images is arbitrary.
<div class="sim-slider"> <ul class="sim-slider-list"> <li><img src="screen.gif" alt="screen"></li> <!-- --> <li class="sim-slider-element"><img src="img1.jpg" alt="1"></li> <li class="sim-slider-element"><img src="img2.jpg" alt="2"></li> … <li class="sim-slider-element"><img src="imgN.jpg" alt="N"></li> </ul> <div class="sim-slider-arrow-left"></div> <div class="sim-slider-arrow-right"></div> <div class="sim-slider-dots"></div> </div>
The <ul> <li> tags were used as containers, but you can use either <div> <div> or <div> <p>. Arrows and indicator points are positioned absolutely in the respective containers. For arrows, patterns in the form of triangular brackets are used, which, if desired, you can replace with your own patterns. Points are generated by the program, the number of points is equal to the number of images.
All images are stacked, one above the other, with absolute positioning in the upper left corner of the containing container. The screen prevents collapse of the outer container. All images are assigned the CSS property opacity: 0, except for the first element to which the initialization program assigns opacity: 1, thereby making it visible.
Scrolling elements is carried out by smoothly changing the opacity from 1 to 0 for the visible element and from 0 to 1 for the next invisible element. Thus, the visible element becomes invisible, and the invisible visible. The transition smoothness creates a transition property with a duration of 1s and an ease-in transition function.
CSS
img { width: 100%; !important; } /* General styles */ .sim-slider { position: relative; } .sim-slider-list { margin: 0; padding: 0; list-style-type: none; position: relative; } .sim-slider-element { width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; } /* Navigation item styles */ div.sim-slider-arrow-left, div.sim-slider-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; } div.sim-slider-arrow-left { left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; } div.sim-slider-arrow-right { right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; } div.sim-slider-arrow-left:hover { opacity: 1.0; } div.sim-slider-arrow-right:hover { opacity: 1.0; } div.sim-slider-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; } span.sim-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }
In order for the slider to be adaptive to any screen width, for the images you need to specify the CSS property width: 100%. For all block containers (div, ul, li, etc.) also width: 100% or, if you need width in numerical units, then only max-width or min-width.
Styles, as usual, are included in the header. The script can be connected at the onload event or at the end of the HTML markup. The slider script file may look like this:
<!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Simple slider</title> <!-- --> <link rel="stylesheet" type="text/css" href="sim-slider-styles.css"> </head> <body> … <div class="sim-slider"> <!-- --> … </div> … <footer> … </footer> <!-- --> <script src="sim-slider.js"></script> <!-- --> <script>new Sim()</script> </body> </html>
The slider is called by the name of the sim-slider class or by identifier. In the second case, you can place multiple sliders on one page.
<div class="sim-slider" id="first"> <!-- --> … <div class="sim-slider" id="second"> <!-- --> … <script>new Sim("first"); new Sim("second");</script>
Javascript
function Sim(sldrId) { let id = document.getElementById(sldrId); if(id) { this.sldrRoot = id } else { this.sldrRoot = document.querySelector('.sim-slider') }; // Slider objects this.sldrList = this.sldrRoot.querySelector('.sim-slider-list'); this.sldrElements = this.sldrList.querySelectorAll('.sim-slider-element'); this.sldrElemFirst = this.sldrList.querySelector('.sim-slider-element'); this.leftArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-left'); this.rightArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-right'); this.indicatorDots = this.sldrRoot.querySelector('div.sim-slider-dots'); // Initialization this.options = Sim.defaults; Sim.initialize(this) }; Sim.defaults = { // Default options for the slider loop: true, // auto: true, // interval: 5000, // () arrows: true, // dots: true // }; Sim.prototype.elemPrev = function(num) { num = num || 1; let prevElement = this.currentElement; this.currentElement -= num; if(this.currentElement < 0) this.currentElement = this.elemCount-1; if(!this.options.loop) { if(this.currentElement == 0) { this.leftArrow.style.display = 'none' }; this.rightArrow.style.display = 'block' }; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) { this.dotOn(prevElement); this.dotOff(this.currentElement) } }; Sim.prototype.elemNext = function(num) { num = num || 1; let prevElement = this.currentElement; this.currentElement += num; if(this.currentElement >= this.elemCount) this.currentElement = 0; if(!this.options.loop) { if(this.currentElement == this.elemCount-1) { this.rightArrow.style.display = 'none' }; this.leftArrow.style.display = 'block' }; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) { this.dotOn(prevElement); this.dotOff(this.currentElement) } }; Sim.prototype.dotOn = function(num) { this.indicatorDotsAll[num].style.cssText = 'background-color:#BBB; cursor:pointer;' }; Sim.prototype.dotOff = function(num) { this.indicatorDotsAll[num].style.cssText = 'background-color:#556; cursor:default;' }; Sim.initialize = function(that) { // Constants that.elemCount = that.sldrElements.length; // // Variables that.currentElement = 0; let bgTime = getTime(); // Functions function getTime() { return new Date().getTime(); }; function setAutoScroll() { that.autoScroll = setInterval(function() { let fnTime = getTime(); if(fnTime - bgTime + 10 > that.options.interval) { bgTime = fnTime; that.elemNext() } }, that.options.interval) }; // Start initialization if(that.elemCount <= 1) { // that.options.auto = false; that.options.arrows = false; that.options.dots = false; that.leftArrow.style.display = 'none'; that.rightArrow.style.display = 'none' }; if(that.elemCount >= 1) { // that.sldrElemFirst.style.opacity = '1'; }; if(!that.options.loop) { that.leftArrow.style.display = 'none'; // that.options.auto = false; // } else if(that.options.auto) { // setAutoScroll(); // that.sldrList.addEventListener('mouseenter', function() { clearInterval(that.autoScroll) }, false); that.sldrList.addEventListener('mouseleave', setAutoScroll, false) }; if(that.options.arrows) { // that.leftArrow.addEventListener('click', function() { let fnTime = getTime(); if(fnTime - bgTime > 1000) { bgTime = fnTime; that.elemPrev() } }, false); that.rightArrow.addEventListener('click', function() { let fnTime = getTime(); if(fnTime - bgTime > 1000) { bgTime = fnTime; that.elemNext() } }, false) } else { that.leftArrow.style.display = 'none'; that.rightArrow.style.display = 'none' }; if(that.options.dots) { // let sum = '', diffNum; for(let i=0; i<that.elemCount; i++) { sum += '<span class="sim-dot"></span>' }; that.indicatorDots.innerHTML = sum; that.indicatorDotsAll = that.sldrRoot.querySelectorAll('span.sim-dot'); // 'click' for(let n=0; n<that.elemCount; n++) { that.indicatorDotsAll[n].addEventListener('click', function(){ diffNum = Math.abs(n - that.currentElement); if(n < that.currentElement) { bgTime = getTime(); that.elemPrev(diffNum) } else if(n > that.currentElement) { bgTime = getTime(); that.elemNext(diffNum) } // n == that.currentElement }, false) }; that.dotOff(0); // [0] , for(let i=1; i<that.elemCount; i++) { that.dotOn(i) } } };
All images are taken from open sources.
Thanks for your attention!
All Articles