Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Basic Pure Vanilla JavaScript Fade In/Out Slideshow Without jQuery

Basic Pure Vanilla JavaScript Fade In/Out Slideshow Without jQuery

There are many Fade In/Out Sliders are available over the internet but here we have a basic simplest pure vanilla javascript-based Fade In/Out Slider that will work best in all major browsers as well as in all handheld devices. You do not have to add any external jQuery library or anything else to increase your page load speed because of this Fade In/Out Slider everything will be controlled by javascript and CSS3 easily.

There are many code snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.


  1. It Will Work On All Major Browsers.
  2. Pure Vanilla JavaScript Code.
  3. No External JQuery Or Script.
  4. Small Snippet Code With Easy Understanding.
  5. Toggle Function, One Page Show Other Hide.

How To Show Basic Pure Vanilla JavaScript Fade In/Out Slideshow Without jQuery?

There are few easy and understandable steps to achieve your desired functionality using pure Vanilla JavaScript that we are gonna share below. Follow each step perfectly.

Recommended For You:
Drag And Drop Reorder List & DIV Using Pure JavaScript


<ul id="slides">
	<li class="slide showing">Slide 1</li>
	<li class="slide">Slide 2</li>
	<li class="slide">Slide 3</li>
	<li class="slide">Slide 4</li>
	<li class="slide">Slide 5</li>


var slides = document.querySelectorAll('#slides .slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide(){
	slides[currentSlide].className = 'slide';
	currentSlide = (currentSlide+1)%slides.length;
	slides[currentSlide].className = 'slide showing';

Final Words:

Be aware that the is placed well in your document. Rest all is in your hand if you want to customize it or play with it. That’s all we have. If you have any problem with this code in your template then feel free to contact us with a full explanation of your problem. We will reply to you as time allowed to us. Don’t forget to share this with your friends so they can also take benefit from it and leave.

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *