Possibly the most simple jQuery Slider

Do you have jQuery on your website or blog and do you have room to insert 10 lines of code? If the answer is yes and you want automatic submission, this is the simplest code I've seen. So adding an array of images inside a block with a common generic container gives the following results:

Related: Image sliders with CSS only

How to add a simple jQuery cursor to Blogger

Step 1: Add JavaScript

If you don't have jQuery you need to add this line right above Start day of the presentation:

Finally, save your changes by clicking the "Save Template" button. And now that we've finished adding the script, let's add the image we want to display...

2. Create/add the HTML code for the slider

After implementing the above script into the template (although we can add it directly to our widget, page, or even our post HTML), let's create a slider as shown above.

Use the following HTML structure to display the image slider:

IMAGE_URL "/>

IMAGE_URL "/>

IMAGE_URL "/>

- as a widget: go to the "Layout" section, click on "Add Widget" and select the "HTML/JavaScript" option.
- within a post/page: create a new post and paste the code in the HTML field.

Then that's all you need. It's pretty simple and effective for me, more so than most libraries used today, maybe too often.

jQuery slider settings

With the last three digits of this slider we can change a few things. Everything is expressed in milliseconds (4000 = 4 seconds):

FadeOut ( 0 ): Time for output image
fadeIn ( 1000 ): Time for next frame
('#slider'); }, 4000 ): time spent on each frame.

How does it work?

$('#slider div:gt(0)').hide();
with gt(x) Select all divs with number (x). In this case, 0 comes first, so this line hides ( ) all fields except the first, which will be the first visible image.

setInterval(function(){ [ what we're going to do ] }, 4000);
We need to repeat things from time to time and we can do that with setInterval - the time delay between each packet.

$('#slider div:first child').fadeOut(0)
In each of these areas we remove ( fadeOut ) the first block ( div:first-child ) with a fade effect so that no image appears...

.next('div').fadeIn(1000)
... and gradually opens the next window ( next ) ( fadeIn ).

.end().appendTo('#slider');
Lastly, it displays the first image and moves it down. ( appendTo ) from the "list".

end() resets the number of elements we continue with next() . So the first pre-generated child that is resolved is the element that is pushed onto the stack, not the currently visible image.

3. Cursor adjustment

Although we don't need CSS to make the slider work, we can change its appearance to display images of different sizes, add subtitles, or even improve transitions. Here are a few ideas:

lyrics 1

texts 2

texts 3

It is 4 text long

In the example above, we limited the size of the container and prevented large images from overflowing. Lastly we added a rounded border and centered the cursor.

#Cursor {
overflow hidden;
Width: 500px;
Height: 300px;
border: 3px solid #242424;
border radius: 40px;
range: 0 automatic;
Stock: 0;
position: relative;
}

If we position the image's parent blocks perfectly, they will overlap. For this reason we set the "position" of the container to "relative".

For the image, we set its width to 100% to fill the entire container and a minimum height of 300px to fill the entire available height of the main box so there is no empty space around it. .

#slider > section {
position: absolute;
height: 0;
left: 0;
}
# image slider {
Width: 100%;
Minimum height: 300 pixels;
margins: 0;
Stock: 0;
limit: 0;
}

To add more elements like text or headings, we enclose the text in spaces and set its position to absolute. And in order for the text to appear at the bottom of the image, we use the bottom property:

#sliding room {
position: absolute;
bottom: 17 pixels;
vision block;
Width: 100%;
margins: 0;
Padding: 15px 0;
Color: #ff;
Background: #242424;
Font size: 18px;
line height: 18px;
text alignment: centered;
}

If you want to change the appearance of this slider, go to Templates section, click Customize button, go to Advanced tab > Add CSS and paste the above CSS code into the blank space.

The HTML markup for the last example looks like this:

Link_URL1 "> Image_URL1 " /> TEXT 1

Link_URL2 "> image_url2 " /> TEXT2

Link_URL3 "> Image_URL3 " /> TEXT 3

Note that if you add this to your post's HTML, do not return to the compose tab as this may remove spaces in the caption and the text may not display properly.