Create a slide show using javascript templates. Photo lab. Slidr Controls

Overview of slideshow creation programs Creating a slideshow for a website

When creating a slideshow for posting on a website, it is best to use ready-made software solutions. In my opinion, the best and easiest option is to use jQuery, a special free library of scripts (small JavaScript programs). Previous articles have already talked about this wonderful web development tool. For example, see the article Photo gallery jQuery- simple and beautiful! . Now let's use jQuery to create a slide show on the site, the so-called slider.

To do this, we will use the Slides plugin, created by programmer Nathan Searles, technical director of the design studio "The Brigade" in Portland, Oregon, USA. Another of his developments was described in the article Photo gallery for an online store.

The Slides plugin is easy to install, has several options for changing images in a slide show and is often used for the site header. An example of how this slider works with default settings is shown in the figure:

Installing a slideshow Slides

As always, first create a scripts folder on the site. Then you need to download the archive and unpack it into the created folder. It will contain two scripts jquery-1.8.3.min.js and jquery.cycle.all.min.js.

Next, in the page title inside the tag... we insert the following lines, which indicate the path to the scripts and a small javascript that defines the parameters of the slide show:

$(".slideshow").cycle((
fx: "fade"
});
});

.slideshow(
width: 200px;
height: 135px;
margin: auto;
}

As you can see, there is also a simple CSS rule in which you need to specify the size of the window for the images of the future slide show (width - height). Naturally, all images must be the same size. If you wish, you can extend the CSS options by adding, for example, borders, backgrounds, padding, and other elements for your slideshow images. In this case, you must indicate the total size, that is, the image plus the indents and borders along the length and width that you set.

Important Note: If your site uses several jQuery plugins, then it is more convenient to move the jquery.js file (preferably the latest version) to the root folder so as not to download it several times. In this case, the line for accessing it will look the same for all plugins. In particular, for our example it turns out like this:

It is not recommended to use several different versions of jQuery on the same page so that they do not conflict with each other. At the same time, be sure to check that the plugins work with the installed version of jQuery, since not all versions are interchangeable.

The last step is to place the images on the page. Everything is simple here too. Place the images inside a tag or other tag that allows you to set the width and height, and specify its class="slideshow" . For our example, the HTML code for the slider looks like this:

At this point, the creation of the slideshow is almost complete, and you can view it by opening your page in the browser.

Setting slide show options Slides

In the created slideshow, you can set different types of transitions between frames by changing the javascript placed in the page header. In addition, by replacing the line sync:false in the script with sync:true , you can remove the space when changing images.

The duration of displaying images is controlled by the timeout parameter, and the speed by the speed parameter. As an example, here are several common slideshow options and corresponding scripts that should be inserted into the page header.

1. Dissolution (our example): $(document).ready(function() ( $(".slideshow").cycle(( fx: "fade", //transition type speed: 1000 , //image change speed timeout: 1000 //frame duration }); });
2. Shuffling: $(document).ready(function() ( $(".slideshow").cycle(( fx: "shuffle", sync: false, speed: 500 timeout: 5000 }); });
3. Zoom: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zoom", sync: false }); });
4. Flip in X or Y axis: $(document).ready(function() ( $(".slideshow").cycle(( fx: "curtainX", // for rotation along the Y axis - curtainY sync: false }); });
5. Collapse vertically: $(document).ready(function() ( $(".slideshow").cycle(( fx: "turnDown", // direction can be set turnUp, turnLeft, turnRight sync: true }); });
6. Scrolling (offset): $(document).ready(function() ( $(".slideshow").cycle(( fx:"scrollDown", // offset direction can be set scrollUp, scrollLeft, scrollRight sync: true }); });
7. Fade to the right: $(document).ready(function() ( $(".slideshow").cycle(( fx: "cover }); });

Sometimes you need to place several slideshow options on one page of the site, as is done in this article. To do this, you just need to specify different classes for each option in the line $(".slideshow").cycle(( (see the code in the table above), and do not forget to specify the window sizes for each class in the CSS.

If the slides contain only pictures, you can slightly change the structure:

Previous Next

Don't forget to add a meaningful value to the alt attribute.

To use page links, you can do the following:

... ... ... 1 2 3

Previous Next 1 2 3

Note the use of “data” attributes - some slide shows can insert pictures as a background, and these attributes will be used in the script as places to connect the background and the slide.

Using Lists A semantically correct approach would be to use list items as slides. In this case, the structure will be like this:

If the order of the slides is well defined (for example, in a presentation), you can use numbered lists

CSS Let's start with the following structure:

Previous Next

Because Since the slideshow will run from right to left, the outer container will have a fixed size, and the inner one will be wider since it contains all the slides. The first slide will be visible. This is set via overflow:

Slider ( width: 1024px; overflow: hidden; ) .slider-wrapper ( width: 9999px; height: 683px; position: relative; transition: left 500ms linear; )

Inner wrapper styles include:

Large width
- fixed height, maximum slide height
- position: relative, which will allow you to create slide movement
- CSS transition left, which will make the movement smooth. For simplicity, we have not included all prefixes. You can also use CSS transformations (together with translation) for this.

Slides have a float attribute to make them line up. They are positioned relatively so that you can get their left offset in JS. We use it to create a sliding effect.

Slide ( float: left; position: relative; width: 1024px; height: 683px; )

Although we have set a certain width, in the script we can change it by multiplying the number of slides by the slide width. You never know what width you might need.

Navigation is carried out through the “Previous” and “Next” buttons. We reset their default styles and assign our own:

Slider-nav ( height: 40px; width: 100%; margin-top: 1.5em; ) .slider-nav button ( border: none; display: block; width: 40px; height: 40px; cursor: pointer; text-indent : -9999em; background-color: transparent; background-repeat: no-repeat; ) .slider-nav button.slider-previous ( float: left; background-image: url(previous.png); ) .slider-nav button .slider-next ( float: right; background-image: url(next.png); )

When using page links instead of buttons, you can create the following styles:

Slider-nav ( text-align: center; margin-top: 1.5em; ) .slider-nav a ( display: inline-block; text-decoration: none; border: 1px solid #ddd; color: #444; width: 2em; height: 2em; line-height: 2; text-align: center; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: bold; )

These classes will be assigned dynamically from the script.

This approach is suitable for the sliding effect. If we want to achieve the fade-in effect, we need to change the styles, since float adds horizontal padding between slides. That is, we don’t need slides on one line - we need a “pack” of slides:

Slider ( width: 1024px; margin: 2em auto; ) .slider-wrapper ( width: 100%; height: 683px; position: relative; /* Creates a context for absolute positioning */ ) .slide ( position: absolute; /* Absolute positioning of all slides */ width: 100%; height: 100%; opacity: 0; /* All slides are hidden */ transition: opacity 500ms linear; ) /* Initially only the first one is visible */ .slider-wrapper >
We use the opacity property to hide slides because screen readers will skip the content of elements that have display: none (see CSS in Action: Invisible Content Just for Screen Reader Users).

Thanks to CSS contextual positioning, we created a “stack” of slides, with the last slide in the source being in front of the others. But that's not what we need. To maintain the order of the slides, we need to hide all slides except the first.

JS uses CSS transition, changing the value of the opacity property of the current slide, and resetting this value to zero for all others.

JavaScript code Slideshow without pagination Slideshow without pagination works by clicking the “Next” and “Previous” buttons. They can be thought of as increment and decrement operators. There is always a pointer (or cursor) that will be increased or decreased each time you press the buttons. Its initial value is 0, and the goal is to select the current slide in the same way as array elements are selected.

So when we click Next the first time, the pointer increases by 1 and we get a second slide. By clicking on Previous, we reduce the pointer and get the first slide. Etc.

Along with the pointer, we use jQuery's .eq() method to get the current slide. In pure JS it looks like this:

Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

Remember - NodeList uses indexes just like an array. Another way to select the current slide is with CSS3 selectors:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

The CSS3:nth-child() selector counts elements starting from 1, so you need to add a 1 to the pointer. After selecting a slide, its parent container must be moved from right to left. In jQuery you can use the .animate() method:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing : "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

There is no .animate() method in regular JS, so we use CSS transitions:

Slider-wrapper ( position: relative; // required transition: left 500ms linear; )

Now you can change the left property dynamically through the style object:

Now we need to create a click event for each control. In jQuery you can use the .on() method, and in pure JS you can use the addEventListener() method.

You also need to check whether the pointer has reached the list boundaries - 0 for “Previous” and the total number of slides for “Next”. In each case, you need to hide the corresponding button:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next : ".slider-next", //... speed: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length; $next.on("click", function() ( index++; $previous.show(); if(index == total - 1) ( index = total - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("click", function() ( index--; $next.show(); if(index == 0) ( index = 0; $previous.hide(); ) slideTo(index, $element); )); )); ); ))(jQuery);

And in pure JS it looks like this:

Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), actions: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() ( self.index--; self.next.style.display = "block"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "none"; ) self._slideTo(self.index); ), false); ) );

Paginated Slideshow In this type of slideshow, each link is responsible for one slide, so there is no need for an index. The animations don't change; the way the user moves through the slides does. For jQuery we will have the following code:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed : 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("current").siblings(). removeClass("current"); )); )); ))(jQuery);

In this case, each anchor corresponds to the ID of a specific slide. In pure JS, you can use both it and the data attribute, which stores the numeric index of the slides inside the NodeList:

Function Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), navigate: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Since IE10 you can manage classes via classList:

Link.classList.add("current");

And with IE11, data attributes can be obtained through the dataset property:

Var index = parseInt(a.dataset.slide, 10) + 1;

Paged Slideshows with Controls These slideshows present some complexity to the code - you have to combine the use of index and page hashes. That is, the current slide must be selected based on both the pointer position and the slide selected through links.

This can be synchronized through the number index of each link in the DOM. One link - one slide, so their indexes will be 0, 1, 2, etc.

In jQuery the code will be like this:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM numerical index $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == total - 1) ( $.fn.slideshow.index = total - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element); $a.addClass("current"). siblings().removeClass("current"); )); )); ); //... ))(jQuery);

You can immediately see that the visibility of the cursor has changed - the index is now declared as a property of the slideshow object. This way we avoid scope problems that can be created by callbacks in jQuery. The cursor is now available everywhere, even outside the plugin namespace, since it is declared as a public property of the slideshow object.

The .index() method gives the numeric index of each link.

There is no such method in pure JS, so it's easier to use data attributes:

Now we can connect our procedures with references and use the data attributes we just created:

Actions: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), false); ) )

Understanding Dimensions Let's return to the following CSS rule:

Slider-wrapper ( width: 9999px; height: 683px; position: relative; transition: left 500ms linear; )

If we have a lot of slides, then 9999 may not be enough. You need to adjust the sizes for the slides on the fly based on the width of each slide and the number of slides.

In jQuery it's simple:

// Full width slideshow return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width($(window).width()); $(options.wrapper, $element).width($(window).width() * total); //... ));

Take the width of the window and set the width of each slide. The total width of the internal wrapper is obtained by multiplying the width of the window and the number of slides.

// Fixed width slideshow return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width($(options.slides).eq(0).width() * total); //... ));

Here the initial width is set to the width of each slide. You just need to set the overall width of the wrapper.

The inner container is now wide enough. In pure JS this is done approximately the same way:

// Full width slideshow Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Viewport"s width var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Fade Effects Fade effects are often used in slide shows. The current slide disappears and the next one appears. jQuery has fadeIn() and fadeOut() methods that work with both the opacity and display properties, so the element is removed from the page when the animation completes (display:none).

In pure JS, it's best to work with the opacity property and use the CSS positioning stack. Then initially the slide will be visible (opacity: 1), and the others will be hidden (opacity: 0).

The following set of styles demonstrates this method:

Slider ( width: 100%; overflow: hidden; position: relative; height: 400px; ) .slider-wrapper ( width: 100%; height: 100%; position: relative; ) .slide ( position: absolute; width: 100 %; height: 100%; opacity: 0; ) .slider-wrapper > .slide:first-child ( opacity: 1; )

In pure JS you need to register the CSS transition of each slide:

Slide ( float: left; position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms linear; )

With jQuery, to use the fadeIn() and fadeOut() methods, you need to change the opacity and display:

Slide ( float: left; position: absolute; width: 100%; height: 100%; display: none; ) .slider-wrapper > .slide:first-child ( display: block; )

In jQuery the code is as follows:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", previous: ".slider-previous", next: ".slider-next" , slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides , element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); //. .. ); ))(jQuery);

When animating opacity, you also need to change the values of this property for the remaining slides.

In JavaScript it would be:

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Media Elements: Video We can include video in a slideshow. Here's an example of a video slideshow from Vimeo:

Videos are included via iframe. This is the same replaceable inline-block as the picture. Replaceable – because the content is taken from an external source.

To create a full-page slideshow, you need to change the styles as follows:

Html, body ( margin: 0; padding: 0; height: 100%; min-height: 100%; /* Height should be the entire page */ ) .slider ( width: 100%; overflow: hidden; height: 100 %; min-height: 100%; /* Height and width to full */ position: absolute; /* Absolute positioning */ ) .slider-wrapper ( width: 100%; height: 100%; /* Height and width to full */ position: relative; ) .slide ( float: left; position: absolute; width: 100%; height: 100%; ) .slide iframe ( display: block; /* Block element */ position: absolute; /* Absolute positioning */ width: 100%; height: 100%; /* Full height and width */ )

Automatic Slideshows Automatic slideshows use timers. Each time the setInterval() timer function is called back, the cursor will be incremented by 1 and thus the next slide will be selected.

When the cursor reaches the maximum number of slides, it must be reset.

Endless slideshows quickly become boring for users. The best practice is to stop the animation when the user hovers over it and resume when the cursor moves away.

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear" ), options); var timer = null; // Timer var index = 0; // Cursor var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate (( opacity: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Initialize the sequence timer = setInterval( function() ( index++; // Increase the cursor by 1 if(index == $(options.slides, element).length) ( index = 0; // Reset the cursor ) slideTo(index, element); ), options.speed ); // The same interval as in the method.animate() ); var startStop = function(element) ( element.hover(function() ( // Stop the animation clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Resume the animation )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ); ))(jQuery);

Both parameters of the .stop() method are set to true, because we don't need to create an animation queue from our sequence.

In pure JS, the code becomes simpler. We register a CSS transition for each slide with a certain duration:

Slide ( transition: opacity 3s linear; /* 3 seconds = 3000 milliseconds */ )

And the code will be like this:

Keyboard Navigation Advanced slideshows offer keyboard navigation, i.e. Scroll through slides by pressing keys. For us, this simply means that we need to register the handling of the keypress event.

To do this, we will access the keyCode property of the event object. It returns the code of the pressed key (list of codes).

Those events that we attached to the “Previous” and “Next” buttons can now be attached to the “left” and “right” keys. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Left arrow $next.trigger("click"); ) if( code == 37) ( // Right arrow $previous.trigger("click"); ) ));

In pure JS, instead of the simple .trigger() method, you will have to use dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // mouse click if(code == 39) ( // Left arrow self .next.dispatchEvent(evt); ) if(code == 37) ( // Right arrow self.previous.dispatchEvent(evt); ) ), false);

In decent projects it is not customary to do this. We would need to define the functionality that provides flipping in a public method, and then call it when the button is clicked. Then if another part of the program needed to implement this functionality, there would be no need to emulate DOM events, but could simply call this method.

Callbacks It would be nice to be able to attach some code to any slideshow action that would be executed when that action is performed. This is the purpose of callback functions - they are executed only when a certain action occurs. Let's say our slideshow has captions and they are hidden by default. At the time of animation, we need to show a caption for the current slide or even do something with it.

In jQuery you can create a callback like this:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... callback: function() () ), options); var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Callback for the current slide options.callback($ currentSlide)). siblings(options.slides). css("opacity", 0); ); //... ); ))(jQuery);

In this case, the callback is a function from .animate() that takes the current slide as an argument. Here's how you can use it:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Shows the current caption and hides the others $wrapper.find(" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

In pure JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Our callback this.el = document.querySelector(element); this.init(); ) Slideshow. prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = this; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

The callback function is defined as the second parameter of the constructor. You can use it like this:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Shows the current caption and hides the others var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

External APIs So far our work scenario is simple: all the slides are already in the document. If we need to insert data into it from outside (YouTube, Vimeo, Flickr), we need to populate the slides on the fly as we receive external content.

Since the response from the third-party server may not be immediate, you need to insert a loading animation to show that the process is in progress:

Previous Next

It can be a gif or a pure CSS animation:

#spinner ( border-radius: 50%; border: 2px solid #000; height: 80px; width: 80px; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -40px; ) # spinner:after ( content: ""; position: absolute; background-color: #000; top:2px; left: 48%; height: 38px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 97%; transform-origin: 50% 97%; -webkit-animation: angular 1s linear infinite; animation: angular 1s linear infinite; ) @-webkit-keyframes angular ( 0%(-webkit-transform:rotate(0deg );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( content: ""; position: absolute; background-color: #000; top:6px; left: 48%; height: 35px; width: 2px; border-radius: 5px; -webkit-transform-origin: 50% 94% ; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animation: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

The steps will be like this:
- request data from outside
- hide bootloader
- parse data
- build HTML
- display a slide show
- process slide shows

Let's say we select a user's most recent videos from YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... limit: 5, username: "learncodeacademy" ), options); //... var getVideos = function() ( // Get videos from YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Get the video as a JSON object $(options.loader).hide( ); // Hiding the loader var entries = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

In pure JavaScript there is an extra step - creating a method for getting JSON:

Then the procedures are similar:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON object callback(data); ) else ( console. log(request.status); ) ); ), //... getVideos: function() ( var self = this; // Get YouTube video var ytURL = "https://gdata.youtube.com/feeds/api /videos?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Get the video as a JSON object var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "none"; // Hiding the loader for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки