We are writing a slider with endless navigation in jquery. Full size jQuery image slider. Camera - free jQuery slider

But since we are going over the basics of JS, to study the base I will describe how to create simple slider only with the help JavaScript language. Well, let's start analyzing the material!

What types of sliders are there and where might they be needed?

Creating convenient galleries for viewing images is required on all web services that contain at least some photographs. These can be online stores, portfolio sites, news and educational services, websites of companies and entertainment establishments with photo reports, etc.

However, this is a standard use of sliders. Similar technologies also used to attract customers to promotional goods, services, or to describe the advantages of enterprises.

Mostly, customers ask to implement it on “Carousel” type galleries. This handy tool to view images in large size with the ability for the user to switch slides forward and backward. In this case, the pictures themselves usually switch automatically after a certain time. This mechanism was nicknamed due to the fact that the display of pictures is repeated in a circle.

Today, if you wish, you can find the most unusual and attractive plugins on the Internet for viewing a set of photos.

Independent activity

Well, now let’s start creating our own slider. On at this stage learning to implement it, I suggest you use pure . It will be automatic switch pictures in a circle.

Below I have attached program code your application. I left comments for you as I coded.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Automatic image switcher /*Describing the appearance of the frame, the basis for the future slider */ #slides( position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; ) /* Editing the display of images*/ img ( width: auto; height: 390px; padding: 13px; ) /* Indicating that the content list items will be displayed in the center of the parent element, i.e. V in this case in the center of the ul element - the basis for the slides */ li ( text-align: center; ) /* I describe the appearance of the slides themselves */ .slide( position: absolute; opacity: 0; top: 0px; left: 0px; height: 100 %; z-index: 3; background: blue; -moz-transition: opacity 1.5s; -webkit-transition: opacity 1.5s; moves to the front*/ .showing( opacity: 1; z-index: 4; )

var MySlider = document.querySelectorAll("#slides .slide"); var currentPicture = 0; var IntervalForChange = setInterval(nextSlide,2700); function nextSlide())( MySlider.className = "slide"; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = "slide showing"; )

I hope you didn't have any problems with the css and html code. But I consider it necessary to disassemble the work of the script. So let's move on to deciphering what was written.

So, first, using the querySelectorAll method, I assign the MySlider variable a list of all elements within the specified range. Indicates this entry

document.querySelectorAll("#slides .slide")

Thus, MySlider stores a collection of four elements.

Next, I specify which image to start showing by setting the currentPicture variable to zero. Then I indicate that the slide change occurs in 2.7 seconds and the nextSlide processing function must be called.

Let's move on to the function itself.

Initially, for the current list element, I change the description of the classes, i.e. I rewrite “slide showing” to “slide”. Consequently, the image becomes invisible.

Now I define a new collection element that will be displayed on the screen. To do this I take the current position +1. You may have noticed that I also use division with a remainder (%) by the number of slides available. This trick with the ears is necessary in order to start the show in a new circle. This is what it would literally look like.

Let me start by saying that this article was written to talk about how to create an image scroll slider for web pages. This article is in no way educational in nature, it only serves as an example of how our object of consideration can be implemented. You can use the code provided in this article as a template for similar developments; I hope that I will be able to convey to the reader the essence of what I have written in sufficient detail and in an accessible way.

And now to the point, not so long ago I needed to install a slider on one site, but after searching the Internet for ready-made scripts, I didn’t find anything useful, because some did not work as I needed, while others did not start at all without errors in the console. It seemed to me too uninteresting to use jQuery plugins for the slider, because... Although this will solve the problem, I will not have any understanding of how this mechanism works, and using a plugin for just one slider is not very optimal. I also didn’t really feel like understanding crooked scripts, so I decided to write my own script for the slider, which I would mark up myself as I needed.

First, we need to decide on the logic of the slider itself, and then proceed to implementation. At this stage, a clear understanding of the operation of this mechanism is very important, because without it we cannot write code that works exactly the way we want.

Our main object will be viewport, that is, a block in which we will see how our pictures are spinning, in it we will have a slidewrapper, this will be our block containing all the images lined up in one line, and which will change its position inside the viewport itself.

Next, on the sides inside the viewport, vertically in the middle, there will be back and forward buttons, when clicked we will also change the position of our slidewrapper relative to the viewport, thereby causing the effect of scrolling through pictures. And finally, the last object will be our navigation buttons, located at the bottom of the viewport.

When we click on them, we will simply look at the serial number of this button and move it to the slide we need, again by shifting the slidewrapper (the shift will be made by changing the transform css property, the value of which will be constantly calculated).

I think the logic of how this whole thing works should be clear after what I have stated above, but if misunderstandings still arise somewhere, then everything will become clearer in the code below, you just need a little patience.

Now let's write! First of all, let’s open our index file and write the markup we need there:

As you can see, there is nothing complicated, block-for-slider serves as just the block in which our slider will be placed, inside it is the viewport itself, in which our slidewrapper is located, also a nested list, here li are slides, and img are pictures inside them. Please pay attention to the fact that all pictures must be the same size or at least proportions, otherwise the slider will look crooked, because its dimensions directly depend on the proportions of the image.

Now we need to stylize this whole thing; usually styles are not particularly commented upon, but I decided to still draw attention to this so that there would be no misunderstandings in the future.

body ( margin: 0; padding: 0; ) #block-for-slider ( width: 800px; margin: 0 auto; margin-top: 100px; ) #viewport ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; position: relative; width: 100% * 4; left: 0; -webkit-transition: 1s; -transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out ) #slidewrapper ul, #slidewrapper li ( margin : 0; padding: 0; ) #slidewrapper li ( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide-img ( width: 100%; )

Let's start with block-for-slider , this, again, is our block on the page, which we will allocate for the slider, its height will depend on its width and on the proportions of our image, because viewport occupies the entire width of the block-for-slider , then the slide itself has the same width, and, accordingly, the image inside it changes its height depending on the width (the proportions are preserved). I placed this element on my page horizontally in the middle, with 100px indented from the top, making its position more convenient for the example.

The viewport element, as already mentioned, occupies the entire width of our block-for-slider, it has the overflow:hidden property, this will allow us to hide our image feed, which extends beyond the viewport.

The next CSS property is user-select:none , which allows you to get rid of the blue highlighting of individual slider elements when you click on the buttons multiple times.

Moving on to the slidewrapper, why position:relative and not absolute? Everything is very simple, because... if we choose the second option, then with the viewport overflow:hidden property, absolutely nothing will appear to us, because the viewport itself will not adjust to the slidewrapper's height, which is why it will have height:0 . Why does width matter and why do we set it at all? The point is that our slides will have a width equal to 100% of the viewport , and in order to line them up we need a place where they will stand, so the width of the slidewrapper should be equal to 100% of the viewport width multiplied by the number of slides (in in my case, 4). As for transition and transition-timing-function , here 1s means that the change in position of the slidewrapper will occur within 1 second and we will observe it, and ease-in-out is a type of animation in which it first goes slowly and speeds up until the middle, and then slows down again, here you can set the values at your discretion.

The next block of properties sets the slidewrapper and its children to have zero padding, no comments needed here.

Next, we style our slides, their width should be equal to the width of the viewport, but since... they are in a slidewrapper whose width is equal to the viewport width multiplied by the number of slides, then to get the viewport width again, we need to divide 100% of the slidewrapper width by the number of slides (in my case, again, by 4). Then we turn them into inline elements using display:inline and set the float to the left by adding the float:left property. About list-style:none I can say that I use it to remove the default marker from li , in most cases it is a kind of standard.

With slide-img everything is simple, the image will take up the entire width of slide , slide will adjust to its height, slidewrapper will adjust to the height of slide , and the height of the viewport in turn will take the value of the height of slidewrapper , so the height of our slider will depend on the proportions of the image and the size of the block , provided for the slider, which I already wrote about above.

I think at this point we’ve figured out the styles, let’s make a simple slide show without buttons for now, and after we make sure that it works properly, we’ll add and style them.

Let's open our js file, which will contain the slider code, do not forget to connect jQuery, because We will write using this framework. By the way, at the time of writing this article, I am using jQuery version 3.1.0. The file with the script itself must be included at the very end body tag, because we will work with DOM elements that need to be initialized first.

For now, we need to declare a couple of variables, one will store the number of the slide that we see at a certain point in time in the viewport, I called it slideNow , and the second will store the number of these same slides, this is slideCount .

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

The slideNow variable must be set initial value 1, because When the page loads, based on our markup, we will see the first slide in the viewport.

In slideCount we will place the quantity child elements slidewrapper, everything is logical here.
Next, you need to create a function that will be responsible for switching slides from right to left, let’s declare it:

function nextSlide() ( )

We will call it in the main block of our code, which we will get to later, but for now we will tell our function what it needs to do:

function nextSlide() ( if (slideNow == slideCount || slideNow slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * (slideNow); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit- transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )

First, we check if we are currently on the last slide of our feed? To do this, we take the number of all our slides using $("#slidewrapper").children().length and check it with the number of our slide, if they are equal, then this means that we need to start showing the feed again, from 1 slide , which means we change the CSS transform property of the slidewrapper to translate(0, 0) , thus shifting it to initial position so that the first slide is in our field of view, let’s also not forget about –webkit and –ms for adequate cross-browser display (see the reference book on css properties). After this, don’t forget to update the value of the slideNow variable, telling it that slide number 1 is in view: slideNow = 1;

The same condition includes checking that the number of the slide that we see is within the number of our slides, but if somehow this is not fulfilled, then we will return to the 1st slide again.

If the first condition is not met, then this indicates that we are this moment We are neither on the last slide nor on some non-existent one, which means we need to switch to the next one, we will do this by shifting the slidewrapper to the left by a value equal to the viewport width, the shift will again occur through the familiar translate property, the value of which will be equal "translate(" + translateWidth + "px, 0)" , where translateWidth is the distance by which our slidewrapper is shifted. By the way, let's declare this variable at the beginning of our code:

var translateWidth = 0;

After moving to the next slide, let's tell our slideNow that we see the next slide: slideNow++;

At this point, some readers may be wondering: why didn't we replace $("#viewport").width() with some variable like slideWidth to always have the width of our slide at hand? The answer is very simple, if our site is adaptive, then, accordingly, the block allocated for the slider is also adaptive, based on this we can understand that when resizing the window width without reloading the page (for example, turning the phone on its side), the width of the viewport will change, and , accordingly, the width of one slide will change. In this case, our slidewrapper will be shifted to the value of the width that was originally, which means the images will be displayed in parts or not displayed at all in the viewport. By writing $("#viewport").width() instead of slideWidth into our function, we force it to calculate the width of the viewport each time we switch slides, thereby ensuring that when the screen width changes sharply, it will scroll to the slide we need.

However, we have written a function, now we need to call it after a certain time interval, we can also store the interval in a variable so that if we want to change it, we can change only one value in the code:

var slideInterval = 2000;

Time in js is indicated in milliseconds.

Now let's write the following construction:

$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));

Everything couldn’t be simpler here; through the $(document).ready(function () ()) construction we say that the following actions must be performed after the document has been fully loaded. Next, we simply call the nextSlide function with an interval equal to slideInterval using the built-in setInterval function.

After all the actions that we performed above, our slider should spin perfectly, but if something goes wrong for you, then the problem may be either in the jQuery version or in incorrect connection any files. There is also no need to rule out that you could have made an error somewhere in the code, so I can only advise you to double-check everything.

In the meantime, let's move on, add to our slider a function such as stopping scrolling when hovering the cursor. To do this, we need to write the following thing in the main block of code (inside the $(document).ready(function () ()) structure:

$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

To start analyzing this code, we need to know what switchInterval is. Firstly, this is a variable that stores the periodic call to the nextSlide function, simply put, we have this line of code: setInterval(nextSlide, slideInterval); , turned into this: switchInterval = setInterval(nextSlide, slideInterval); . After these manipulations, our main block of code took next view:

$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval( nextSlide, slideInterval);

Here I use the hover event, which means “on hover”, this event allows me to track the moment when I hover the cursor over some object, in this case the viewport.

After hovering, I clear the interval, which I indicate in parentheses (this is our switchInterval ), then, separated by commas, I write what I will do when I move the cursor back, in this block I again assign our switchInterval to a periodic call to the nextSlide function.

Now, if we test, we can see how our slider reacts to hover, stopping the slide from switching.

Now it's time to add buttons to our slider, let's start with the forward and back buttons.

First of all, let's mark them:

At first this markup may be unclear, I’ll say right away that I wrapped these two buttons in one div with the prev-next-btns class just for your convenience, you don’t have to do this, the result will not change, now we’ll add styles to them and everything will become clear:

#prev-btn, #next-btn ( position: absolute; width: 50px; height: 50px; background-color: #fff; border-radius: 50%; top: calc(50% - 25px); ) #prev- btn:hover, #next-btn:hover ( cursor: pointer; ) #prev-btn ( left: 20px; ) #next-btn ( right: 20px; )

First, we position our buttons using position:absolute , thereby freely controlling their position inside our viewport , then we will indicate the sizes of these buttons and using border-radius Let's round the corners so that these buttons turn into circles. Their color will be white, that is, #fff , and their offset from the top edge of the viewport will be equal to half the height of this viewport minus half the height of the button itself (in my case 25px), so we can position them vertically in the center. Next, we'll specify that when we hover over them, our cursor will change to a pointer, and finally we'll tell our buttons individually that they should be 20px away from their edges so we can see them in a way that suits us.

Again, you can style the page elements the way you want, I’m just giving an example of the styles that I decided to use.

After styling, our slider should look something like this:

Next, we go back to our js file, where we will describe the operation of our buttons. Well, let's add one more function, it will show us the previous slide:

function prevSlide() ( if (slideNow == 1 || slideNow slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( " transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; ) else ( translateWidth = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css( ( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate( " + translateWidth + "px, 0)", )); slideNow--; ) )

It's called prevSlide and will only be called when prev-btn is clicked. First we check whether we are on the 1st slide or not, here we also check whether our slideNow has gone beyond the actual range of our slides and, if any of the conditions are true, we will move to the last slide , moving the slidewrapper to the value we need. We will calculate this value using the formula: (width of one slide) * (number of slides - 1), we take all this with a minus sign, because we move it to the left, it turns out that the viewport will now show us the last slide. At the end of this block, we also need to tell the slideNow variable that the last slide is now in our view.

If we are not on the first slide, then we need to move back 1, for this we again change the transform property of slidewrapper . The formula is: (width of one slide) * (number of the current slide - 2), again, we take all this with a minus sign. But why -2, and not -1, do we need to move just 1 slide back? The fact is that if we are, say, on the 2nd slide, then the x variable of the transform:translate(x,0) property of our slidewrapper is already equal to the width of one slide, if we tell it that we need to subtract 1 from the number of the current slide , then we will again get one, by which the slidewrapper has already been shifted, so we will need to shift these same viewport widths by 0, which means on slideNow - 2.

Now we just need to add these lines to the main block of code:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Here we simply track whether our buttons were clicked, and in this case we call the functions we need, everything is simple and logical.

Now let’s add slide navigation buttons and return to the markup again:

As you can see, a nested list has appeared inside the viewport, let’s give it the identifier nav-btns , inside it li are our navigation buttons, we’ll assign them the class slide-nav-btn , however, we can finish with the markup, let’s move on to the styles:

#nav-btns ( position: absolute; width: 100%; bottom: 20px; padding: 0; margin: 0; text-align: center; ) .slide-nav-btn ( position: relative; display: inline-block; list-style: none; width: 20px; background-color: #fff; margin: 3px; .slide-nav-btn:hover ( cursor: pointer; )

We give the nav-btns block, in which our buttons are located, the property position:absolute so that it does not stretch the viewport in height, because slidewrapper has the position:relative property, we set the width to 100% in order to center the buttons horizontally relative to the viewport using text-align:center , then using the bottom property we let our block know that it should be at a distance of 20px from the bottom edge.

With the buttons we do the same thing as with the slides, but now we give them display:inline-block , because with display:inline they do not respond to width and height because are in an absolutely positioned block. Let's make them white and, using the already familiar border-radius, give them the shape of a circle. When we hover over them, we will change the appearance of our cursor for the usual display.

Now let’s get down to the jQuery part:
First, let's declare a variable navBtnId, which will store the index of the button we clicked:

var navBtnId = 0;
$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( translateWidth = -$("#viewport"). width() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = navBtnId + 1 ));

Here, when we click on our slide-nav-btn, we call a function that first of all assigns to the navBtnId variable the index of the clicked button, that is, its serial number, since the countdown starts from zero, then if we click on the second button, then it is written to navBtnId value 1. Next, we do a check where we add one to the serial number of the button to get a number as if the countdown started not from 0, but from 1, we compare this number with the number of the current slide, if they match, then we will not take any action actions, because the desired slide is already in the viewport.

If the slide we need is not in the viewport field of view, then we calculate the distance by which we need to move the slidewrapper to the left, then change the value of the CSS transform property to translate (the same distance in pixels, 0). We have already done this more than once, so there should be no questions. At the end, we again save the value of the current slide into the slideNow variable; this value can be calculated by adding one to the index of the clicked button.

That’s all, actually, if something is not clear, then I’ll leave a link to the jsfiddle, where all the code written in the material will be provided.

Thank you for your attention!

Tags: Add tags

Some time ago, I started learning jQuery. I think everyone knows that this is the name of the most popular library for developing and creating scripts in JavaScript. With its help it is very easy to create spectacular and interactive elements site.

In this article, I want to tell you how to create a simple universal slider using jQuery. In fact, there is a very large number of different ready-made sliders on the Internet, which sometimes look very tempting and are quite functional, but we will make it from scratch.

So, what features of our jQuery slider (which I called HWSlider) can be noted?

Ease of use and design - I wanted to create a simple script without bells and whistles, so I did not use CSS3 animations, and the code turned out to be very versatile and understandable.
The ability to insert both images and any HTML code into slides.
Ability to scroll through slides both in order (forward - back) and select each slide (1,2,3,4...)
Automatically generated links (previous - next, and with slide numbers). You just need to insert the required number of divs, and everything else will be calculated by itself. Well, it can be noted that the number of slides is unlimited.

The script is compatible with all modern browsers: IE, Opera, Firefox, Safari, Chrome, (since the slider does not use CSS3).

Let's start with HTML markup. The HTML page or template needs to be inserted into the required place.

Here's the content of slide 1 Here's the content of slide 2 Here's the content of slide 3

Everything is simple here, as you can see, you can insert as many slides as you like by creating new divs. Anything can be inserted inside them. html code, for example a picture or a block of text. Just don’t forget to include the jQuery library itself along with all the js scripts. If you don't know how, look at the example.

#slider-wrap( /* Wrapper for the slider and buttons */ width:660px; ) #slider( /* Wrapper for the slider */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relative; ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* Buttons for changing slides */ margin-top:10px; text-align:center;) .sli-links . control-slide( margin:2px; display:inline-block; width:16px; height:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) center bottom no-repeat;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton( /* Link " Next" and "Previous" */ display:block; width:15px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg.png) left center no-repeat; opacity:0.8; outline:none !important;) #prewbutton(left:10px;) #nextbutton( right:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, #nextbutton:hover( opacity:1;)

Let's look at it in more detail. First we give the main block with the ID "slider-wrap" the desired width. Since all other blocks are inserted into it, the height does not need to be specified; it will depend on what is inside. Then we need to set the dimensions of the container in which the slides will be located. This is #slider. Let's give it width and height, as well as, for example, a border of 10 pixels. Here the width is 640px, which is less than the width of the parent, since we are adding 10px borders on the right and left. The width of the slides themselves (.slide) also depends on the width of this div.

And the last thing: we need to set position: relative for the slide container since the slides inside are with absolute positioning. For the slides themselves, only the width and height are set in CSS. The remaining properties are set in the jQuery script.

Selector.sli-links is a block that will contain buttons for moving to the required slide. These buttons are simple elements of the type number, which will be inserted in the required quantity automatically, together with their parent.sli-links. For the buttons, we set a beautiful look, namely, we make each button square, align them all in the center, and also, thanks to overflow: hidden and text-indent:-9999px, we remove the text, leaving only background icons, which also change when hovered to this cursor element. For convenience, I used sprites, which reduced the number of images.

Next, the active button is designed. We just change the position of the background. Then we will redesign the links to go to the next and previous slides. You can give them any design, just like buttons. These links are inserted automatically inside #slider. But so that they could be seen, I asked them absolute positioning and a top layer (z-index:3) so that they appear above the slides. I think with CSS everything is clear and simple here: you can change almost all the properties to design the slider the way you need.

Let's now look at the scenario itself:

Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) ( $(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = $("#slider .slide").size(); var animSlide = function(arrow)( clearTimeout(slideTime); $ (".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = arrow; ) $(".slide").eq( slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active") ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( "#prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + index + ""; )); $("" + $adderSpan +"").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var pause = false; var rotator = function())( if(!pause)(slideTime = setTimeout(function())(animSlide("next")), hwTimeOut);) ) $("#slider-wrap").hover(function())( clearTimeout(slideTime); pause = true;), function()(pause = false; rotator(); )); rotator(); ));

First, the settings are saved in variables: hwSlideSpeed - the speed of turning slides, hwTimeOut - the time after which the slide automatically changes, hwNeedLinks - controls the "Next" and "Previous" links - if the value of this variable is true, then these links will be displayed, and if false , then accordingly they will not exist (as in home page my blog).

Next we install the necessary CSS properties for slides using the .css() method. We stack blocks with slides on top of each other using absolute positioning, then hide them all.hide(), and then show only the first one. The slideNum variable is the number of the active slide, that is, the counter.

The main logic of our jQuery slider is the animSlide function. It takes one parameter. If we pass the strings “next” or “prew” into it, it will work conditional statements and the next or previous slide will be displayed accordingly. If we send a number as a value, then this number will become the active slide and it will be shown.

So this function hides the current div, calculates a new one and shows it.

Note that the .fadeIn() method, which makes the active slide visible, is given a second argument. This is the so-called function callback. It is executed when the slide appears completely. In this case, this is done to ensure automatic scrolling of the slides. The rotator function defined below calls the animSlide function again to advance to the next slide at the desired interval of time: we will get a closure that ensures constant scrolling.

Everything works fine, but we need to stop the automation if the user moves the cursor to the slider, or presses the buttons. The pause variable is created for this purpose. If its value is positive - true, then automatic switching will not be. Using the .hover() method, we specify: clear the timer if it is running - clearTimeout(slideTime), and set pause = true. And after moving the cursor, turn off the pause and run the rotator() closure.

Additionally, we need to create new elements on the page and place them in the right place. Using the each() loop for each slide (div with class .slide), we will create a span element inside which there is a number - the number of the slide. This number is used in the animation function to move to the slide with this number. Let's wrap everything in a div with the necessary classes, and in the end we will get the following markup:

0 1 2 3

It would seem, why do we create markup inside the script, and not in HTML code? The fact is that, for example, if the user has scripts disabled, he will not see elements that will not work, and this will not confuse him. In addition, the code is simplified, which is good for SEO.

As a result, the slider layout will look something like this (I used images as slides and installed 5 of them):

0 1 2 3

Below you can see how our jQuery slider works on the demo page and download all the necessary sources.

Finally, a couple of points about the integration of this slider with Drupal. You can add this code to a template file, for example in page.tpl.php, and attach the script as separate js files to the theme. Jquery in Drupal is enabled by default, but runs in compatibility mode (). There are two options for improvement. Or wrap all js code:

(function ($) ( // All your code... ))(jQuery);

or replace the $ symbols throughout the script with jQuery. Like this:

JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = jQuery("#slider .slide").size(); var animSlide = function(arrow)( // etc. .

The example has already implemented the first method.

Thanks for reading! Leave comments, come again. You can also subscribe to RSS to receive blog updates first!

Added: That's not all. Read. There we will add new features to this script.

Now let's write! First of all, let’s open our index file and write the markup we need there:

Now we need to stylize this whole thing; usually styles are not particularly commented upon, but I decided to still draw attention to this so that there would be no misunderstandings in the future.

The next block of properties sets the slidewrapper and its children to have zero padding, no comments needed here.

Next, we style our slides, their width should be equal to the width of the viewport, but since... they are in a slidewrapper whose width is equal to the viewport width multiplied by the number of slides, then to get the viewport width again, we need to divide 100% of the slidewrapper width by the number of slides (in my case, again, by 4). Then we’ll turn them into inline elements using display:inline and set the float to the left by adding the float:left property. About list-style:none I can say that I use it to remove the default marker from li , in most cases it is a kind of standard.

I think at this point we’ve figured out the styles, let’s make a simple slide show without buttons for now, and after we make sure that it works properly, we’ll add and style them.

Let's open our js file, which will contain the slider code, do not forget to connect jQuery, because We will write using this framework. By the way, at the time of writing this article, I am using jQuery version 3.1.0. The file with the script itself must be included at the very end of the body tag, because we will work with DOM elements that need to be initialized first.

var slideNow = 1; var slideCount = $("#slidewrapper").children().length);

The slideNow variable needs to be set to an initial value of 1 because When the page loads, based on our markup, we will see the first slide in the viewport.

In slideCount we will place the number of child elements of the slidewrapper, everything is logical here.
Next, you need to create a function that will be responsible for switching slides from right to left, let’s declare it:

function nextSlide() ( )

We will call it in the main block of our code, which we will get to later, but for now we will tell our function what it needs to do:

First, we check if we are currently on the last slide of our feed? To do this, we take the number of all our slides using $("#slidewrapper").children().length and check it with the number of our slide, if they are equal, then this means that we need to start showing the feed again, from 1 slide , which means we change the CSS transform property of the slidewrapper to translate(0, 0) , thus shifting it to its original position so that the first slide is in our field of view, let’s also not forget about –webkit and –ms for adequate cross-browser display (see . css properties reference). After this, don’t forget to update the value of the slideNow variable, telling it that slide number 1 is in view: slideNow = 1;

The same condition includes checking that the number of the slide that we see is within the number of our slides, but if somehow this is not fulfilled, then we will return to the 1st slide again.

If the first condition is not met, then this means that we are currently neither on the last slide nor on some non-existent one, which means we need to switch to the next one, we will do this by shifting the slidewrapper to the left by the value equal to the viewport width, the shift will again occur through the familiar translate property, the value of which will be equal to "translate(" + translateWidth + "px, 0)" , where translateWidth is the distance by which our slidewrapper is shifted. By the way, let's declare this variable at the beginning of our code:

var translateWidth = 0;

After moving to the next slide, let's tell our slideNow that we see the next slide: slideNow++;

var slideInterval = 2000;

Time in js is indicated in milliseconds.

Now let's write the following construction:

$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));

After all the steps we performed above, our slider should spin perfectly, but if something goes wrong, then the problem may be either in the jQuery version or in the incorrect connection of any files. There is also no need to rule out that you could have made an error somewhere in the code, so I can only advise you to double-check everything.

In the meantime, let's move on, add to our slider a function such as stopping scrolling when hovering the cursor. To do this, we need to write the following thing in the main block of code (inside the $(document).ready(function () ()) structure:

$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Here I use the hover event, which means “on hover”, this event allows me to track the moment when I hover the cursor over some object, in this case the viewport.

Now, if we test, we can see how our slider reacts to hover, stopping the slide from switching.

Now it's time to add buttons to our slider, let's start with the forward and back buttons.

First of all, let's mark them:

At first, this markup may be incomprehensible, I’ll say right away that I wrapped these two buttons in one div with the class prev-next-btns just for your convenience, you don’t have to do this, the result will not change, now we’ll add styles to them and everything will be fine It's clear:

First, we position our buttons using position:absolute, thereby freely controlling their position within our viewport, then we will specify the sizes of these buttons and use border-radius to round the corners so that these buttons turn into circles. Their color will be white, that is, #fff , and their offset from the top edge of the viewport will be equal to half the height of this viewport minus half the height of the button itself (in my case 25px), so we can position them vertically in the center. Next, we'll specify that when we hover over them, our cursor will change to a pointer, and finally we'll tell our buttons individually that they should be 20px away from their edges so we can see them in a way that suits us.

Again, you can style the page elements the way you want, I’m just giving an example of the styles that I decided to use.

Now we just need to add these lines to the main block of code:

$("#next-btn").click(function() ( nextSlide(); )); $("#prev-btn").click(function() ( prevSlide(); ));

Here we simply track whether our buttons were clicked, and in this case we call the functions we need, everything is simple and logical.

Now let’s add slide navigation buttons and return to the markup again:

Now let’s get down to the jQuery part:
First, let's declare a variable navBtnId, which will store the index of the button we clicked:

That’s all, actually, if something is not clear, then I’ll leave a link to the jsfiddle, where all the code written in the material will be provided.

Thank you for your attention!

Tags:

jquery slider
css
css3 animation
html

Add tags

Adaptive, or if you prefer, responsive web design is now not just another design trend, it is already a certain standard for website development, ensuring the versatility of websites, harmonious visual perception on different screens user devices. More recently, during development adaptive template, I had to face various difficulties in integrating certain sliders and image galleries without disturbing the overall design style. Now everything is much simpler, there are a huge number of ready-made solutions and what is especially pleasing is that most of them are in free access, with open source code.

Due to the variety of tools offered, I have compiled a short overview of the most notable developments responsive jQuery image sliders that have appeared recently and are distributed without any restrictions, i.e. absolutely free.

WOW Slider

Responsive jQuery image slider with a great set visual effects(turns, departures, blurs, spirals, blinds, etc...) and many ready-made templates. With WOW Slider's built-in page insertion wizard, you can easily and effortlessly create stunning slideshows in minutes. The developer’s website contains all the necessary documentation for setting up and using the plugin in Russian, as well as excellent live examples of how the plugin works. Also available for download separately Wordpress plugin and a module for Joomla. I am sure that many will like this wonderful slider, both beginners and experienced webmasters.

HiSlider

HiSlider - HTML5, Jquery slider and image gallery, absolutely free plugin For personal use on sites managed by popular systems— WordPress, Joomla, Drupal. With the help of this simple but quite functional tool, you can easily create amazing and vibrant slide shows, spectacular presentations and announcements of new messages on the pages of your websites. Several ready-made templates and skins for the slider, stunning content transition (change) effects, output of various multimedia content: videos from YouTube and Vimeo, flexible custom settings etc...

Nivo Slider

Nivo Slider is a good old one, well known to everyone in the know, one of the most beautiful and easy to use image sliders. The JQuery Nivo Slider plugin is free to download and use and is licensed under the MIT license. There is also a separate plugin for WordPress, but unfortunately it is already paid and you will have to pay $29 for one license. It’s better to do a little magic with the WP theme files and attach the free jQuery version Nivo plugin Slider to your blog, fortunately there is enough information on how to do this on the Internet.
As for functionality, everything is in order with this in perfect order. The jQuery v1.7+ library is used for work, beautiful effects transitions, simple and very flexible settings, responsive layout, automatic image cropping and much more.

The idea of the slider was inspired by the developers, who are well known for their presentation style Apple products, where several small objects (pictures) change by clicking on the selected category with a simple animation effect. Codrops puts at your disposal detailed lesson on creating this slider, a complete layout of Html markup, a set of CSS rules and an executable jQuery plugin, as well as a wonderful live example of using the slider.

Slit Slider

Full-screen image slider using JQuery and CSS3 + detailed tutorial on integrating the plugin into website pages. The idea is to slice the open current slide with specific content when moving to the next or previous content. WITH using JQuery And CSS Animations you can create unique transitions between slides. Responsive slider layout ensures it looks equally good across screens various types user devices.

Elastic Content Slider

A content slider that automatically adjusts in width and height depending on the size of the parent container in which it is located. Quite simple to implement and flexible in settings, the slider runs on JQuery, with navigation at the bottom; when the screen size is changed downwards, the navigation is displayed in the form of icons. Very detailed documentation (creation tutorial) and live examples of use.

3D Stack Slider

An experimental version of the slider that demonstrates images with transitions from the 3D plane. The images are divided into two horizontal stacks, using the navigation arrows to change and transition each subsequent image to the viewing state. In general, nothing special, but the idea itself and the execution technique are quite interesting.

A very simple, 100% responsive and full screen jQuery image slider. The slider's operation is based on CSS transitions (the transition property) in conjunction with the magic of jQuery. The max-width value is set to 100% by default, so the size of the images will change depending on changes in screen size. There are no special animation effects or frills in design, everything is simple and designed for trouble-free operation.

Minimal Slides

The name speaks for itself, this is perhaps one of the most lightweight and minimalistic jQuery image sliders that I have come across (1kb plugin). ResponsiveSlides.js is a tiny JQuery plugin that creates slideshows using elements inside a container. Works with a wide range of browsers, including all versions of IE - the famous brake on progress, from IE6 and higher. The work uses CSS3 transitions in conjunction with javascript for reliability. Simple markup using an unordered list, setting transitions and time intervals, automatic and manual control of slide switching, as well as support for multiple slide shows at once. Here is such a playful “baby”.

Camera

Camera is a free JQuery plugin for organizing slideshows on website pages, lightweight slider with many transition effects, 100% responsive layout, and very simple settings. Fits perfectly on the screens of any user devices (PC monitors, tablets, smartphones and Cell phones). Possibility of demonstrating embedded video. Automatic change slides and manual control using buttons and a block of image thumbnails. An almost complete gallery of pictures in a compact design.

bxSlider jQuery

Another one, quite simple adaptive slider on jQuery. You can place any content, video, images, text and other elements on your slides. Extended support touch screens. Using CSS transition animations. A large number of different variations of slide shows and compact image galleries. Automatic and manual control. Switch slides using buttons and by selecting thumbnails. Small source file size, very easy to configure and implement.

FlexSlider 2

FlexSlider 2 Updated version slider of the same name, with improved response speed, minification of the script, and minimization of reflow/redrawing. The plugin includes a basic slider, slide control with thumbnails, built-in left-right arrows and a bottom navigation bar in the form of buttons. The ability to display video in slides (vimeo), flexible settings (transitions, design, time interval), fully adaptive layout.

Galleria

A well known and quite popular responsive jQuery plugin for creating high quality image galleries and sliders. The slider interface, thanks to its control panel, visually resembles a familiar video player; the plugin includes several different design themes. Support for embedded videos and images from popular services: Flickr, Vimeo, YouTube and others. Detailed documentation on setup and use.

Blueberry

Simple, no frills, free jQuery slider images written specifically for responsive web design. Blueberry is experimental jQuery plugin open source. Minimalistic design, no effects, only smoothly pop-up images replacing each other after a certain period of time. Everything is very simple, install, connect and go...

jQuery popeye 2.1

A very compact jQuery image slider with Lightbox elements. Thanks to its flexible dimensions, it is very easy to integrate into any container, into a single entry in the form of thumbnails, when hovering the mouse cursor or clicking on them, a lightbox with an enlarged picture and controls is activated. It is convenient to place such a slider in side panels to present products or news announcements. An excellent solution for sites with a large amount of information.

Sequence

Free responsive slider with advanced CSS3 transitions. Minimalistic style, 3 design themes, Each frame slides horizontally, appearing in the center, the picture goes to the left, the signature to the right, thumbnails are duplicated in the lower right corner. Pagination of product views to be viewed in each frame. The controls also include back and forward buttons. Supported by all modern browsers.

Swipe

A very simple image slider both in terms of functionality and settings; among the settings there is a change in the speed of changing slides, activation of the manual mode (control buttons are activated), continuous slide show. This slider has the right to exist and it attracted me only because it exists; I didn’t find anything particularly interesting in this development, maybe I wasn’t looking for it well)))

Responsive Image Slider

Such a beautiful, adaptive image slider from Vladimir Kudinov, comrades. A solid, well-designed instrument, supplied with clear examples And detailed instructions on creation, installation and use. Adaptive design, nice buttons and green arrows, everything is quite nice and calm, without pressure.

FractionSlider

Free JQuery slider plugin with parallax effect for images and text slides. Slide animations have multiple display values with full control in each timing and animation setting. The ability to animate several elements on a slide at once. You can install various methods animations, slides fading, or transitions from a certain direction. Automatic display and manual control using navigation arrows that pop up when you hover over the image. 10 types of slide animation effects and much more...

The review turned out to be quite extensive, but not informative enough due to large quantity the products in question. All details and detailed descriptions functionality of this or that plugin, you can find out directly on the developers’ pages. I can only hope that I have made it easier for someone to find that very necessary tool for creating colorful picture sliders on the pages of their websites.

With all respect, Andrew