Create a slideshow using javascript templates. Spectacular JavaScript Slideshow

Slideshow for website

Every webmaster must be able to create and add a slide show to the site. The use of sliders is extremely popular, and they can be found on almost any modern resource.

And this is no accident!

If you were on the page "Animation" you saw work there gif-animations.
Great, of course! And it is created quite simply - in Photoshop. Only it has a significant drawback, which greatly limits its use on sites. low color.

This disadvantage is completely devoid of slideshows.!

That is why, for posting various multi-color drawings, photos on the site, it is best to use not animation, but a slide show.

Only in this case, the use of simple HTML + CSS, so dear to my heart, will no longer be enough. You need to connect scripts ... ... !

Creating a slideshow on the site

The best solution is to use jQuery.
On the pages LARGE DOUBLE section on this wonderful technology: "jQuery", there are many examples of its use. I will not repeat myself.

Here applied jQuery for creating slide show on your website, or the so-called slider. You can see his work now below, and below him detail wrote what he did to create this kind of slider, and showed 7 more (!) Working sliders.

As you can see, this slider is working properly! However, so does everyone else. You can see for yourself. => watch immediately

**Note. Unlike other pages jQuery section, I wrote the necessary scripts directly into the HTML code of this page itself.
Also, very important(!), they work for me on a different version of jQuery, later than what I'm using here.

If I use the version jQuery v.1.10.1.min, then here v.1.8.3.min

However, more about this and everything else, in order - further.

Slideshow preparation

The work of creating and installing a slideshow on a website usually consists of 4 main steps.

Preparing images for the slider

1. Edited the photos. The main thing is that they must be one size. They need to be carefully measured.
In this case, I took finished pictures from additional materials attached to the training course. Which one? About it here: "Links"(will open in a new window).

2. Drawn in photoshop graphic image slider style "TV set". Let not original, but very convenient.
The main thing is the size of the viewing area is needed A bit more in width and height than the prepared drawings.

Creating an HTML+CSS Skeleton for a Slideshow

Pictures are written in HTML code exactly in that place where they will be shown later. Scripts, however, can be written later in any convenient place. I usually leave space for them just below the drawings. The structure is more logical.

Placed the images themselves inside the tag p, for which set in styles CSS width and height, and pointed it out class="slideshow". And the paragraph itself with them was placed inside a common tag div, on the background of which I hung the prepared graphic image of the slider ( TV set*). gave him class="slider_font".
Moreover, just for him, to unload the page, I connected an external style sheet, and did everything for the drawings inside HTML code .

P.S.** Last action at all NOT necessarily. It's just that it's more convenient for me. The page structure looks more logical somehow.

In the CSS rules specified window size for images that will later appear in the slider (width-height) . Naturally, all images it should be same size .
If desired, could expand CSS options by adding, say, borders, backgrounds, padding, and other elements. However, I think it would be redundant.

If, nevertheless, you want to do this, then indicate the dimensions GENERAL, that is: image + ALL set paddings and borders.

Connecting scripts

I recommend visiting the help page that I made for myself while learning jQuery technology. It will help you a lot to understand.
opened to her general access: "SELECT in jQuery"(will open in a new window).

As always, I first created a js folder on the site. Then I downloaded the necessary scripts for the slide show ( archive) and unpacked it into this folder. It turned out two script files: the core jquery-1.8.3.min.js and plugin jquery.cycle.all.min.js.

In it, just in case, I added my own control file myscripts11.js. However, here it was not useful to me for launching and demonstrating a slide show. Is that checked them correct connection created folder.
But……let it be. You never know what I want to do with the sliders placed here in the future. Briefly speaking, "... our armored train is always on a siding".

Farther. Inside the tag … inserted the lines where I wrote the paths to the scripts..jpg "type="text/javascript">, and to the plugin:.
Own ("spare") control file commented out.

- and last -

Visitors to my site disabled in browser interpreter JavaScript, observe slide show of course they can't.
They will see the drawings as they are written in HTML code, i.e. in a column, one after the other.
I made a warning line for them and inserted it into the tag

Here you go! Slideshow created. It remains to configure its parameters: the speed of changing pictures, ways to display them, etc.

Setting slideshow options

As mentioned above, (in note**), I wrote the necessary scripts directly into the HTML code of this page itself.
In the slideshow created on my site, I applied the settings "default".

In general, it is easy to set different, interesting types of transitions between pictures by changing javascript placed in the body of the page.
Let's say changing v script line sync:false on the sync:true, you can remove the space when changing images.

Important note!
different versions jQuery may to confront with each other if they are on the same page.
Be sure(!) to check the work of plugins with installed version jQuery, insofar as Not all versions fit!

Example**
On other pages of the section jQuery that use the library, the version is installed jQuery v.1.10.1.min. Well, it's more modern than v.1.8.3.min, from which correct(!) work slideshow sliders here.

plugin jquery.cycle.all.min.js with her DOES NOT WORK!!!
(verified)

However, don't be upset. All in your hands!
In my site section "Useful"(opens in a new window) find tested(!) a complete set of necessary scripts to create such a slide show on your site. (Of course it's FREE!)

Other types of slideshow

In this subsection, I will not describe in such detail all the steps for creating a slide show. Basically, they are exactly the same.
Even easier. You don't need to draw the background image of the slider in Photoshop. Even separate table css styles will not need.

If you want to place various slideshow options on one site page, how I did it here ( see below), specify different classes for each option in the script line $(‘.slideshow‘).cycle((

P.S.* Don't forget to write in CSS window sizes for each class, if, nevertheless, you will use the style sheet. I didn't need it.

Look first at the still drawings, which, similarly, I took from the training course (Which one? I will repeat the link: "Links") and posted them here for comparison.

Here they are. Future participants of the 7th slide show!
Watch their performance below.

I will show several popular types of sliders. I inserted them, for ease of viewing, into a general table.
Left- the name of the effect and a brief explanation, if necessary. On right- an example.

I hope you enjoyed the "group" slideshow shown.
Indeed, convenient! The houses “dance” - each in its own cell, and do not interfere with anyone. No wonder I gave them +5 for their "performance"!

But seriously - this way of creating a slideshow for the site saves great amount places on the page.
Therefore, I will repeat what was said at the beginning of the section.
Most optimal solution to create different shows on the site - use jQuery.

Look practical the use of sliders for the design of resource pages, you can on a business card website specially created by me "Personal page".

Is it possible to do something similar WITHOUT connecting scripts?
Of course you can! Read more about this.

Slideshow in HTML only

How to create a simple slider on the site, so as NOT to use various complex and heavy (by "weight") scripts? Easy!
I wouldn't be if I didn't show you such interesting and simple ways!

Let's use for this basic technologies the Internet => HTML+CSS.

Basic means those without which Internet is impossible at all, in principle!

However, first look at simple slide shows created only in the language HTML without using any scripts.
I made a separate small page especially for this.

After that, you can decide for yourself what suits your resource best.

Conclusion

I hope that the posted information on how you can easily create a slide show for the site was interesting to you.
At the same time, and for your "Portfolio" posted enough material on this fascinating topic.

For visitors who need to create a slideshow or a gallery on the site, connect audio and video to it, but do not have time to do it on their own, the section can help "Artist's Choice"(will open in a new window).

Came directly to this page from three BIG sections. You can also return directly. Hover your mouse over the arrows - hints will appear where they lead.
Clicking on the top logo, you will get to the "Main".

A simple, lightweight (21Kb compressed) slider written in pure Javascript with no dependencies, i.e.

HTML5 Slideshow Maker

works without jQuery.

Tested in the following browsers:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE10
• Opera 16.0

There is incomplete support for IE8/9 (no effects).

GitHub | Demo

Peculiarities

• You can add an unlimited number of sliders to the page, even place one inside the other.
• Resizes based on content, but can be disabled.
• Keyboard Navigation - When the cursor is on a slider, you can toggle sliders with arrows.
• Support for mobile touch events.

Connection

Before the closing tag, you need to include slider.js or slider.min.js file.

HTML markup

slider.js can work with any elements that have an attribute. You can use any first-level child elements with an attribute, for example:

javascript

After connection slider.js the global object becomes available. The easiest way to create:

Call with all settings:

Settings

All available settings for slidr.js are listed in the table below.

The callback functions and receive the following data:

Slider.js global API

The slidr global namespace provides the following functionality:

Slider API

Short entry

The full list of Slidr.js API functions is below.

Scrolled pages during slide transition

This annoying bug appears in some browsers. To fix it you need to add a style to:

Dynamic resizing

Slidr itself "understands" whether it is necessary to resize the slider to fit the image. If the slider block has dimensions, then Slidr will not automatically change them. If the min-width and min-height properties are specified, then the slider will resize itself according to the content, taking into account these values. Otherwise, the sizing will take place automatically.

Automatic resizing

Static dimensions

Slider Controls

The layout of the controls is as follows:

You can customize any slider control with CSS selectors:

The arrow control is implemented with a pseudo selector, so to hide it use the following code:

Breadcrumbs Slidr

Breadcrumbs have a simple HTML markup. Each represents the entire line, and each represents a separate breadcrumb:

Styling breadcrumbs with CSS:

License

This software is free to use under the MIT license.

tags: javascript

Simple slider with pure javascript

Slider in pure javascript

Video transcript

#slider (position: relative; overflow: hidden; width: 600px; height: 320px; margin: 20px auto; padding: 0; list-style: none;)
.slide(position: absolute; width: 100%; height: 100%; transition: all 1s ease-in 0.1s; left:0;)
.slide img (width: 100%;)
.arrows (position: relative; margin: 0 auto; width: 600px;)
.arrow (position: absolute; cursor: pointer;)
.no_active(color: red;)
.next(right: 0;)

js script:

var next = document.getElementById('next');
var prew = document.getElementById('prew');

var slides = document.getElementsByClassName('slide');
for(var i=0; i

Return to list

Geographically, I am located in St. Petersburg, but I can and am ready to work with everyone, regardless of your location.

photo lab

You can write to me using the form feedback or contact via social networks. You can view the portfolio here and here.

Greetings dear friends!

101 jquery css sliders and slideshows for a site - gorgeous, just gorgeous!

In this short tutorial, I'll show you how to in a simple way create a slideshow!

A slideshow is a javascript gallery in which images change automatically after a certain period of time.

In our gallery, when changing the image, we will use a small effect, namely, changing the transparency of the picture!

Simple HTML code:

Everything is very simple here - in the block with the class slideshow we put the image that will be the first.

And here, in fact, are the styles of the above class:

Set the width and align the block to the center.

Now let's take a closer look and analyze the javascript (Jquery) code:

First, the image_array array is described, containing links to images.

If you need to add, remove or change gallery images, then simply replace the links in this array - nothing else needs to be changed!

The image_num variable is used as the image counter. When we get to the last picture of the array, we reset this variable to start showing again from the first picture (we make a loop).

1. we take an image from the block with the slideshow class;
2. make it 40% transparent (this happens in 500 milliseconds);
3. after that we change the src attribute of the image (we change the link to the image, taking it from the image_array array);
4. then we make the image opaque (this also happens in 500 milliseconds).

As I already said, the image_num variable is a counter, we compare it with the length of the array (that is, with the number of pictures participating in the slide show) and if image_num is equal to the maximum value, then we reset it.

The slide function runs every 3 seconds (3000 milliseconds) using the interval (setInterval), which means that the pictures will be flipped every 3 seconds.

As you can see, there is nothing complicated!

On this this lesson javascript has come to an end, now you can look at the demo example and also say original file lesson.

That's all, until new lessons, bye!

If you need help in creating any functionality, site, service, tests or calculators, then I am ready to help, more details on the services page.

Overview of slideshow programs

Create a slideshow for a website

When creating a slide show for placement on the site, 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 programs on JavaScript). Previous articles have already talked about this wonderful web development tool. For example, see the article Photo Gallery jQuery- simple and beautiful! . Now apply jQuery to create a slide show on the site, the so-called slider.

To do this, use the plugin Slides, created by programmer Nathan Searles, CTO of The Brigade design studio in Portland, Oregon, USA. His other development was described in the article Photo gallery for an online store.

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

Slideshow setup Slides

As always, first create a folder scripts 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 ... insert the following lines, where the path to the scripts and a small javascript, which defines the slideshow options:

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

Important note: if your site uses multiple plugins jQuery, then it is more convenient to transfer the jquery.js file (preferably latest version) to the root folder so you don't have to download it multiple times. In this case, the reference line to 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 jQuery so they don't conflict with each other. At the same time, be sure to check the plugins with the installed version. jQuery, as not all versions are interchangeable.

Last step- placement of images on the page. Everything is simple here too. Place images inside a tag

or another for which it is permissible to set the width and height, and specify it class="slideshow". For our example, the HTML code for the slider looks like this:

This completes the creation of the slideshow, and you can view it by opening your page in a browser.

Setting slideshow options Slides

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

The duration of displaying images is regulated by the parameter timeout, and the speed is a parameter speed. For example, here are some common slideshow options and their corresponding scripts that should be inserted into the page header.

1. Dissolution(our example):
2. Shuffling:
3. Zoom:
4. Flip X or Y axis:
5. Folding vertically:
6. Scrolling (shift):
7. Influx on the right:

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 don't forget to set the window sizes for each class in CSS.

A script that makes it easy to create presentations of multiple images. Script supports big set effects and cycle elements.

Presentation Cycle is a variation of the Cycle functionality. Instead of a list of slide numbers, Presentation Cycle automatically generates a progress bar that shows when a new slide is due.

Peculiarities

• Cyclic display of images.
• Customizable animation time.
• Generating a navigation indicator that displays the slide time.
• Works in modern browsers.

How to use the script

We connect all the necessary libraries and scripts to the page:

Create a container that contains the elements for the Cycle:

header

The container with loop elements has id “presentation_container”, which corresponds to using the default settings in the script and style sheet. Nested elements have the class “ pc_item”, which also corresponds to using the default settings.

Insert the script call after the container:

To run the script with the default settings, the described actions are enough.

Settings

First, let's figure out how to customize the images that are used to generate the progress bar.

Javascript code in file presentationCycle.js contains the following section regarding the images used by the script (line 19 ):

// Progress indicator options barHeight: 14, // Indicator bar height barDisplacement: 20, // Indicator offset barImgLeft: "images/pc_item_left.gif", // Image for the left side barImgRight: "images/pc_item_right.gif", // Image for the right side barImgCenter: "images/pc_item_center.gif", // Image for the central part barImgBarEmpty: "images/pc_bar_empty.gif", // Image for the empty bar barImgBarFull: "images/pc_bar_full.gif", // Image for filled strip

The height of the strip is defined in pixels. It must be the same as the height of the images stored in the folder images. Images are sprites that include active and passive versions.

To align the images, you need to make two identical squares located side by side. The left side is used for the passive state and the right side is used for the active state.

We want all images to have the same height, which matches the height of the indicator bar.

Indicator Offset barDisplacement combined from indent + strip margin.

For use user settings you can use the following plugin call code, which eliminates the need to make changes to JavaScript text file:

PresentationCycle.barHeight = 10; // Non-default values ​​presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; presentationCycle.init(); // Run the script

For cycle parameter settings, the following settings are used:

// Slide options slideTimeout: 8000, containerId: "presentation_container", // Cycle options cycleFx: "scrollHorz", cycleSpeed: 600,

slideTimeout- slide show time.
containerId- a container with cycle elements.
cycleFx- transition effect between slides, used by Cycle plugin. cycleSpeed- animation speed of the transition between slides.

By disabling JavaScript, you won't be able to see interesting slideshow examples!

Slideshow for website

Every webmaster must be able to create and add a slide show to the site. The use of sliders is extremely popular, and they can be found on almost any modern resource.

And this is no accident!

**Note. Unlike other pages jQuery section, I registered the necessary scripts directly in HTML code for this page.
Moreover, which is very important(!), they work for me from different version of jQuery, more recent than what I use here.

If I use the version jQuery v.1.10.1.min, then here v.1.8.3.min

However, more about this and everything else, in order - further.

Slideshow preparation

The work of creating and installing a slideshow on a website usually consists of 4 main steps.

Preparing images for the slider

1. Edited the photos. The main thing is that they must be one size. They need to be carefully measured.
In this case, I took ready-made pictures from additional materials attached to the training course. Which one? About it here: "Links" (will open in a new window).

2. I drew a graphic image of the slider in Photoshop in the style "TV set". Let not original, but very convenient.
The main thing is the size viewing area needed A bit more in width and height than the prepared drawings.

Creating an HTML+CSS Skeleton for a Slideshow

Pictures are written in HTML code exactly in that place where they will be shown later. Scripts, however, can be written later in any convenient place. I usually leave space for them just below the drawings. The structure is more logical.

Placed the images themselves inside the tag p, for which I set the width and height in CSS styles, and specified it class="slideshow". And the paragraph itself with them was placed inside a common tag div, on the background of which I hung the prepared graphic image of the slider ( TV set*). gave him class="slider_fon".
Moreover, just for him, to unload the page, I connected an external style sheet, and did everything for the drawings inside HTML code .

P.S.** Last action at all NOT necessarily. It's just that it's more convenient for me. The page structure looks more logical somehow.

In the CSS rules specified window size for images that will later appear in the slider (width-height) . Naturally, all images should be the same size.
If desired, could expand CSS options by adding, say, borders, background, padding and other elements. However, I think it would be redundant.

If, nevertheless, you want to do this, then indicate the dimensions GENERAL, that is: image + ALL set paddings and borders.

Connecting scripts

I recommend to visit help page, which I did for myself while learning jQuery technology. It will help you a lot to understand.
Made it public: "SELECT in jQuery" (will open in a new window).

As always, I first created a js folder on the site. Then I downloaded the necessary scripts for the slide show ( archive) and unpacked it into this folder. It turned out two script files: the core jquery-1.8.3.min.js and plugin jquery.cycle.all.min.js.

In it, just in case, I added my own control file myscripts11.js. However, here it was not useful to me for launching and demonstrating a slide show. Is that checked them correct connection created folder.
But... ...let it be. You never know what I want to do with the sliders placed here in the future. Briefly speaking, "... our armored train is always on a siding".

Farther. Inside the tag ... I inserted the lines where I registered the paths to the scripts. I have them: , and to the plugin: .
Own ("spare") control file commented out .

And last -

Visitors to my site disabled in browser interpreter JavaScript, observe slide show, of course, they can't.
They will see the drawings as they are written in HTML code, i.e. in a column, one after the other.
Made for them warning line and put it in the tag

Here you go! Slideshow created. It remains to configure its parameters: the speed of changing pictures, ways to display them, etc.

Setting slideshow options

As mentioned above, (in note**), I wrote the necessary scripts directly into the HTML code of this page itself.
In the slideshow created on my site, I applied the settings "default".

In general, it is easy to set different, interesting types of transitions between pictures by changing javascript placed in the body of the page.
Let's say changing v script line sync: false on the sync: true, you can remove the space when changing images.

Important note!
different versions jQuery may to confront with each other if they are on the same page.
Be sure(!) to check the work of plugins with the installed version jQuery, insofar as Not all versions fit!

Example**
On other pages of the section jQuery that use the library, the version is installed jQuery v.1.10.1.min. Well, it's more modern than v.1.8.3.min, from which correct(!) slideshow sliders work here.

plugin jquery.cycle.all.min.js with her DOES NOT WORK!!!
(verified)

However, don't be upset. All in your hands!
In my site section "Useful" (will open in a new window) find tested(!) a complete set of necessary scripts to create such a slide show on your site. (Of course it's FREE!)

Other types of slideshow

In this subsection, I will not describe in such detail all the steps for creating a slide show. Basically, they are exactly the same.
Even easier. You don't need to draw the background image of the slider in Photoshop. Even separate css style sheet will not need.

If you want to place various slideshow options on one page site how I did it here ( see below), specify different classes for each option in the script line $(".slideshow").cycle((

P.S.* Don't forget to write in CSS window sizes for each class, if, nevertheless, you will use the style sheet . I didn't need it.

Look first at the still drawings, which, likewise, I took from the tutorial (Which? I will repeat the link: "Links") and posted them here for comparison.

Here they are. Future participants of the 7th slide show!
Watch their performance below.

I will show several popular types of sliders. I inserted them, for ease of viewing, into a general table.
Left- the name of the effect and a brief explanation, if necessary. On right- an example.

1. Dissolution ("fade"): Similar to the motorcycle example above.
2. Shuffle ("shuffle"):
3. Zoom ("zoom"):
4. Flip along the axes ("curtainX" or Y): Installed here "curtainX".
5. Collapse vertically ("turnDown"): It collapses down here, and you can set other types of transitions: turnUP, Left, Right.
6. Scrolling ("scrollDown"): Bias. Here I set it down, and besides this you can install: scrollUp, Left, Right.

For one of the projects, I needed a small slideshow script that shows pictures with a dissolving effect in an endless loop. That's what I did. First, you need to prepare the element of the HTML page where all this action will take place. There is nothing complicated here, the only thing is that you need to immediately set the size of the area: Now let's think about how to make a smooth flow from one image to another. There are different options, I settled on the following. Two images are taken and superimposed one on top of the other. The top image then changes its opacity on a timer, gradually decreasing to fully transparent. As a result, we see the lower image through the "melted" upper one. At the next stage, you need to change the images, the bottom one goes instead of the top one, and the next one in the list is loaded in place of the bottom image. For the user, this stage will remain invisible, since he already sees the background image and the browser does not need to download it from anywhere, and the new image is located under the visible one and the process of loading it during the pause between frame changes remains invisible. And after the first pass of the slideshow, all images in general will be taken from the browser cache. In HTML form, the initial position of the slideshow would look something like this:

1. < div style = "position: relative; height:600px; width:800px;">
2. < img style = id = "sh_back" src = "img/02.jpg" >
3. < img style = "position: absolute; top:0px;" id="sh_front" src="img/01.jpg">

It remains to translate the theory into practice. Our slideshow is performed in two repeating stages: a pause between transitions, when the picture is displayed without changes, and a cycle with the dissolution effect applied. And each of these actions at the end triggers the next one. For each stage, we will write our own function in JavaScript.

1. var op = 1 ; // Transparency
2. var img_front = 1 ; // Index of the displayed image
3. var img_back = 2 ; // Index of the background image
4. var img_total = 10 ; // Total number of images in rotation
5. // Function for changing the transparency of the displayed image
6. function fade()(
7. // Opacity decreases
8. op -= 0.1 ;
9. if (op< 0 ) {
10. // Image is opaque
11. op = 1 ;
12. // Get the next pictures
13. img_front++;
14. img_back++;
15. // If all have been shown, then go back to the first
16. if (img_front > img_total ) ( img_front = 1 ; )
17. if (img_back > img_total ) ( img_back = 1 ; )
18. // Set new pictures to background and display
19. // Transparency for IE
20. tmp. style. filter= "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
21. tmp. src = "img/" + img_front + ".jpg" ;
22. var tmp = document . getElementById("sh_back");
23. tmp. src = "img/" + img_back + ".jpg" ;
24. // Pause between changing pictures in 5 seconds
25. setTimeout("waiting()" , 5000 );
26. else(
27. // Set a new transparency value for the top image
28. var tmp = document . getElementById("sh_front");
29. // Transparency for browsers
30. tmp. style. opacity = op ;
31. // Transparency for IE
32. tmp. style. filter= "progid:DXImageTransform.Microsoft.Alpha(opacity="+
33. Math. round (op * 100 )+ ")" ;
34. // Next iteration of the fade loop
35. setTimeout("fade()" , 50 );
36. // Function to trigger the fade effect
37. function waiting ()
38. fade();

The code is quite simple, but still some points require explanation. This assumes that all slideshow pictures are the same size, corresponding to the size of the slideshow area, located in the "img" folder, and ordered by name starting from "1.jpg" to "10.jpg". In your project, the paths and file names may be different. The delay interval between frame changes is hard-coded - 5000 milliseconds or 5 seconds. The speed of one fade iteration is 50 milliseconds. These values ​​can be reduced or increased as needed. It remains only to start the slide show.