Good day.
It took me recently to find the image slider, but only very simple.
All that was needed: the left / right buttons and that when switching images, the pictures did not immediately switch / darken / brighten, but they seemed to 'stick together' and follow each other. Here's how, for example. See you They are supposedly glued together when switching.

In general, I did not find such a slider, everyone has too many frills .. I decided to write my own. So far, it has riveted it:

var imgNum=0; //счСтчик ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ var separated=[Ρ‚ΡƒΡ‚ изобраТСния]; //массив с изобраТСниями $('#go_left').on('click',function(){ //просматриваСм ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ imgNum--; //листаСм Π½Π°Π·Π°Π΄ счСтчик if(imgNum<0){ //Ссли ΠΎΠ½ мСньшС 0 imgNum=separated.length-1; //ΠΈΠ΄Π΅ΠΌ Π² ΠΊΠΎΠ½Π΅Ρ† массива } $('#here').attr('src','content/'+separated[imgNum]); }); $('#go_right').on('click',function(){ //просматриваСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ imgNum++; //листаСм счСтчик Π²ΠΏΠ΅Ρ€Π΅Π΄ if(imgNum>=separated.length){ //Ссли большС Ρ‡Π΅ΠΌ Π΅Π»Π΅ΠΌΠ΅Π½Ρ‚ΠΎΠ² Π² массивС imgNum=0; //ΠΊΠΈΠ΄Π°Π΅ΠΌ Π² самоС Π½Π°Ρ‡Π°Π»ΠΎ массива } $('#here').attr('src','content/'+separated[imgNum]); });

The easiest way to switch images, this option works, but it just switches them instantly.
I want to get a "slip effect", where all the images will be somehow bonded to each other during movement. How to achieve this at all? Maybe someone knows where there are examples?

    2 answers 2

    Use the .animate () method. There’s nothing to add

    • Well, I guessed that I would have something to do with animate, but if I knew what it was, I would not have written here) can you at least briefly say how it will be? there was an idea to load all the images already attached hardly, and to change their location when clicked, while the parent hides the images that are not needed at the moment through hidden: overflow; Is it really necessary? - Denis Masster
    • Exactly. If you upload photos one by one, the animation will be very curve. And so - all downloaded and went to turn the carousel - Deonis
    • ok, we will try) thanks - Denis Masster
    • hmm, dear namesake, and how to properly achieve the connection of the very first and most recent image? I have so far made all the images inside LI, built them horizontally, hid the excess, made buttons and hung scrolling left / right on them. but when we reach the end - we rest in emptiness) how to connect to the beginning? - Denis Masster
    • After the current image is hidden around the bend, move the element to the end of the queue. Well this is as clear as Putin’s election results. You are tired, father))) PS Today it will not work anymore, but if you don’t cope with tomorrow, I will try to help. - Deonis

    played with the carousel, I realized that I was building a bike ..
    put this slider