Add transition effects to my image slider

Question

i´m working in an image slider, and i´m trying to do one from sratch so that I can learn in the process. What I was able to do is very simple, and I want to add a transition effect, such as fade out, or something like that. If someone knows how to add it to my code it would help me a lot. Here is what I did so far:

 var currentIndex = 0, items = $('.container div'), itemAmt = items.length; function cycleItems() { var item = $('.container div').eq(currentIndex); items.hide(); item.css('display','inline-block'); } var autoSlide = setInterval(function() { currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }, 3000); $('.next').click(function() { clearInterval(autoSlide); currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }); $('.prev').click(function() { clearInterval(autoSlide); currentIndex -= 1; if (currentIndex < 0) { currentIndex = itemAmt - 1; } cycleItems(); }); 

 .container { max-width: 200px; background-color: black; margin: 0 auto; text-align: center; position: relative; } .container div { background-color: white; width: 100%; display: inline-block; display: none; } .container img { width: 100%; height: auto; } button { position: absolute; } .next { right: 5px; } .prev { left: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="demo"> <button class="next">Next</button> <button class="prev">Previous</button> <div class="container"> <div style="display: inline-block;"> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/any"/> </div> <div> <img src="https://placeimg.com/400/200/nature"/> </div> <div> <img src="https://placeimg.com/400/200/architecture"/> </div> <div> <img src="https://placeimg.com/400/200/animals"/> </div> <div> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/tech"/> </div> </div> </section> 

Answer 1

You can use .fadeIn() from jQuery.

item.fadeIn();

Run this code snippet:

 var currentIndex = 0, items = $('.container div'), itemAmt = items.length; function cycleItems() { var item = $('.container div').eq(currentIndex); items.hide(); item.fadeIn();//css('display','inline-block'); } var autoSlide = setInterval(function() { currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }, 3000); $('.next').click(function() { clearInterval(autoSlide); currentIndex += 1; if (currentIndex > itemAmt - 1) { currentIndex = 0; } cycleItems(); }); $('.prev').click(function() { clearInterval(autoSlide); currentIndex -= 1; if (currentIndex < 0) { currentIndex = itemAmt - 1; } cycleItems(); }); 

 .container { max-width: 200px; background-color: black; margin: 0 auto; text-align: center; position: relative; } .container div { background-color: white; width: 100%; display: inline-block; display: none; } .container img { width: 100%; height: auto; } button { position: absolute; } .next { right: 5px; } .prev { left: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="demo"> <button class="next">Next</button> <button class="prev">Previous</button> <div class="container"> <div style="display: inline-block;"> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/any"/> </div> <div> <img src="https://placeimg.com/400/200/nature"/> </div> <div> <img src="https://placeimg.com/400/200/architecture"/> </div> <div> <img src="https://placeimg.com/400/200/animals"/> </div> <div> <img src="https://placeimg.com/400/200/people"/> </div> <div> <img src="https://placeimg.com/400/200/tech"/> </div> </div> </section>