-
-
Save jinsley8/111c3e3a78f973b9799b6434f340a69a to your computer and use it in GitHub Desktop.
A JavaScript-accessible-only image slider that will slide to the next given image (after it has loaded), rather than a predetermined set. After sliding to this new image, the old one is removed, allowing you to slide any amount of images you want. You can also slide an image out or in by not providing an image location. Requires jQuery.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- | |
| HTML Examples | |
| --> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://rawgit.com/Gorea235/4844ce9e603d34c82b2d1253b1a71799/raw/remote-image-slider.css"> | |
| <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" | |
| crossorigin="anonymous"></script> | |
| <script src="https://rawgit.com/Gorea235/4844ce9e603d34c82b2d1253b1a71799/raw/remote-image-slider.js"></script> | |
| <style> | |
| #slider1, | |
| #slider2 { | |
| margin: auto; | |
| } | |
| .slider-1-links ul, | |
| .slider-2-links ul { | |
| list-style: none; | |
| text-align: center; | |
| padding-left: 0; | |
| } | |
| .slider-1-links li, | |
| .slider-2-links li { | |
| display: inline; | |
| padding: 0 20px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Remote image slider with image already set --> | |
| <div id="slider1" class="rm-img-slider"> | |
| <!-- this div requires this class --> | |
| <div class="rm-img-container"> | |
| <!-- this div also requires this class --> | |
| <img src="https://unsplash.it/300/?random&t="> | |
| <!-- this doesn't require a class but only 1 is allowed --> | |
| </div> | |
| </div> | |
| <!-- extra code to allow manual sliding --> | |
| <script> | |
| function startSlide1(img) { | |
| if (img != '') | |
| img += new Date().getTime(); | |
| $('.slider-1 a').css('pointer-events', 'none'); | |
| rmImageSliderChange('slider1', img, function () { | |
| $('.slider-1 a').css('pointer-events', ''); | |
| }); | |
| } | |
| </script> | |
| <div class="slider-1-links"> | |
| <ul> | |
| <li><a onclick="startSlide1('https://unsplash.it/300/?random&t=')" href="#">Next Image</a></li> | |
| <li><a onclick="startSlide1('')" href="#">No Image</a></li> | |
| </ul> | |
| </div> | |
| <br /> | |
| <!-- Remote image slider without pre-set image --> | |
| <div id="slider2" class="rm-img-slider"> | |
| <div class="rm-img-container"> | |
| </div> | |
| </div> | |
| <!-- extra code to allow manual sliding --> | |
| <script> | |
| function startSlide2(img) { | |
| if (img != '') | |
| img += new Date().getTime(); | |
| $('.slider-2 a').css('pointer-events', 'none'); | |
| rmImageSliderChange('slider2', img, function () { | |
| $('.slider-2 a').css('pointer-events', ''); | |
| }); | |
| } | |
| </script> | |
| <div class="slider-2-links"> | |
| <ul> | |
| <li><a onclick="startSlide2('https://unsplash.it/300/?random&t=')" href="#">Next Image</a></li> | |
| <li><a onclick="startSlide2('')" href="#">No Image</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .rm-img-slider { | |
| overflow: hidden; | |
| width: 300px; | |
| height: 300px; | |
| display: block; | |
| margin: 30 auto; | |
| } | |
| .rm-img-container { | |
| width: 200%; | |
| height: 100%; | |
| clear: both; | |
| position: relative; | |
| display: block; | |
| float: left; | |
| left: 0; | |
| -webkit-transition: left 1s; | |
| -moz-transition: left 1s; | |
| -o-transition: left 1s; | |
| transition: left 1s; | |
| } | |
| .rm-img-container-notransitions { | |
| -webkit-transition: left 0s !important; | |
| -moz-transition: left 0s !important; | |
| -o-transition: left 0s !important; | |
| transition: left 0s !important; | |
| } | |
| .rm-img-slider img { | |
| float: left; | |
| margin: 0; | |
| padding: 0; | |
| position: relative; | |
| display: block; | |
| width: 50%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Will slide the referenced remote image slider to the next specified image | |
| * after waiting for it to load. After, the old image is removed from the DOM. | |
| * | |
| * This function doesn't stop itself from being called multiple times on the | |
| * same ID simultaneously, as such the last optional parameter allows you to | |
| * give a function that re-enables any code that controls the slider, preventing | |
| * possible re-firing if it is not wanted. | |
| * | |
| * @param {string} id - The DOM ID of the top-level div of the slider | |
| * @param {string} img - A href to the image that will be displayed | |
| * @param {function} [end=null] - A function that is called when the image change has completed | |
| * @return {null} | |
| */ | |
| function rmImageSliderChange(id, img, end = null) { | |
| if (id == null || id == '') | |
| return; | |
| if (id.charAt(0) != '#') | |
| id = '#' + id; | |
| img = img == null ? '' : img; | |
| var width = $(id).width(); | |
| var container = $(id + ' .rm-img-container'); | |
| var imgDOM = null; | |
| var initSlide = function () { // only start sliding if the image has loaded | |
| $(id + ' img').css('width', width).off(); | |
| container | |
| .css('left', -300) | |
| .on('transistionend webkitTransitionEnd oTransitionEnd', function () { | |
| var c = $(id + ' .rm-img-container'); | |
| c.addClass('rm-img-container-notransitions'); // enter reset | |
| $(id + ' img').css('margin-left', ''); | |
| if (c.children().length > 1 || (img == '' && c.children().length > 0)) | |
| c.children()[0].remove(); | |
| c.css('left', 0); | |
| setTimeout(function () { // exit reset after allowing change to apply | |
| c.off() | |
| c.removeClass('rm-img-container-notransitions'); | |
| if (end != null) | |
| setTimeout(end); | |
| }); | |
| }); | |
| }; | |
| if (img != '') // if we have an image, add it and link the loaded event | |
| container.append($('<img>', { | |
| 'src': img | |
| }).css('margin-left', container.children().length == 0 ? width : '') | |
| .on('load', initSlide)); | |
| else // otherwise just slide the image | |
| initSlide(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment