It is impossible to make a smooth transition of pictures on pure css and javascript how to make help guys. Everywhere use jQuery but it is not needed. There is a slider and arrows to the left and right when clicking on them you need a smooth transition of pictures

<div id="slider" onclick="document.getElementById('videoplay').pause()"> <label for="notebook2a_1" style="margin-top:6px;">Gallery</label> <div class="left_arrow"> <img src="full/left_arrow.png" id="left_arrow"/> </div> <div class="right_arrow"> <img src="full/right_arrow.png" id="right_arrow"/> </div> <img src="full/1.png" id="mainImage" class="mainImage"/> <ul class="thumbs"> <li class="img1"><img src="Thumbs/1.png" class="mini active" data-full-url="full/1.png" onmouseover="this.src='thumbs/1_over.png'" onmouseout="this.src='thumbs/1.png'"/></li> <li class="img2"><img src="Thumbs/2.png" class="mini" data-full-url="full/2.png" onmouseover="this.src='thumbs/2_over.png'" onmouseout="this.src='thumbs/2.png'"/></li> <li class="img3"><img src="Thumbs/3.png" class="mini" data-full-url="full/3.png" onmouseover="this.src='thumbs/3_over.png'" onmouseout="this.src='thumbs/3.png'"/></li> <li class="img4"><img src="Thumbs/4.png" class="mini" data-full-url="full/4.png" onmouseover="this.src='thumbs/4_over.png'" onmouseout="this.src='thumbs/4.png'"/></li> </ul> </div>
  • is this suitable? - github.com/nueq22/air-slider here is a demo - cssscript.com/demo ... ... - nueq
  • @nueq yes)))))) - Vlad
  • @nueq but how to apply it to my fails - Vlad
  • downloaded the archive, connected css, js, changed the markup for divs (you have a list) and initiated a slider with parameters at the bottom of the page - nueq

1 answer 1

Set transition for slider

 var images = [ 'https://hdwallpaperz.net/wp-content/uploads/2017/03/hd-wallpaper-nature-1080p-14.jpg', 'https://hdwallpaperz.net/wp-content/uploads/2017/01/Latest-full-HD-Wallpapers-Tower.jpg', 'https://i.imgpile.com/4cd3e700aee52ea5532170b67c3c4d48.jpg' ] var images_length = images.length; images_length--; function prev() { images_length--; if (images_length < 0){ images_length = images.length -1; } document.getElementById('slider').style.backgroundImage = "url("+images[images_length]+")"; } function next() { images_length++; if (images_length > images.length -1){ images_length = 0; } document.getElementById('slider').style.backgroundImage = "url("+images[images_length]+")"; } setInterval(next, 5000) 
 #slider { background-image:url(https://hdwallpaperz.net/wp-content/uploads/2017/03/hd-wallpaper-nature-1080p-14.jpg); width:400px; height:250px; background-size:cover; transition:1s all; } 
 <button onclick="prev()">&lt;</button> <button onclick="next()">&gt;</button> <div id="slider"></div>