How make slide to auto play and change swap to fade in JavaScript

Question

Hi guys I am new in JavaScript I have a image slider here I want the Image Slider to auto play and change swap to fade effect. How can I change this?

My current JavaScript code is below

$('#banner .banner-bg').each(function() {

    var self = $(this),
      images = self.find('.banner-bg-item');

    // SET BG IMAGES
    images.each(function() {
      var img = $(this).find('img');
      if (img.length > 0) {
        $(this).css('background-image', 'url(' + img.attr('src') + ')');
        img.hide();
      }
    });

    // INIT SLIDER
    if ($.fn.owlCarousel) {
      self.owlCarousel({
        slideSpeed: 500,
        pagination: true,
        navigation: true,
        paginationSpeed: 200,
        singleItem: true,
        autoPlay:true,
        animateIn: 'fadeIn',
        navigationText: [
          "<i class='fa fa-angle-left'></i>",
          "<i class='fa fa-angle-right'></i>"
          ],
        addClassActive: true,
        afterMove: function() {
          // ACTIVATE TAB
          var active_index = self.find('.owl-item.active').index();
          $('.banner-search-inner .tab-title:eq(' + active_index + ')').trigger('click');
        }
      });
    }

    // SET DEFAULT IF NEEDED
    var active_tab_index = $('.banner-bg-item.active, .banner-search-inner .tab-title.active').index();
    if (active_tab_index !== 0) {
      self.trigger('owl.jumpTo', active_tab_index);
    }

  });

  $('.banner-search-inner').each(function() {

    var self = $(this),
      tabs = self.find('.tab-title'),
      contents = self.find('.tab-content');

    // TAB CLICK
    tabs.click(function() {
      if (!$(this).hasClass('active')) {
        var index = $(this).index();
        tabs.filter('.active').removeClass('active');
        $(this).addClass('active');
        contents.filter('.active').hide().removeClass('active');
        contents.filter(':eq(' + index + ')').fadeToggle().addClass('active');

        // CHANGE BG
        if ($.fn.owlCarousel) {
          $('#banner .banner-bg').trigger('owl.goTo', index);
        }

      }
    });

  });

Below Is the HTML code

<div class="banner-bg">
  <div class="banner-bg-item active"><img src="img/banner-bg-1.jpg" alt="" class="img-responsive"></div>
  <div class="banner-bg-item"><img src="img/banner-bg-2.jpg" alt="" class="img-responsive"></div>
</div>

Answer 1

You can use CSS animation for that and switch between the slides with javascript. I wrote this code for you and you can use play, stop, next and prev button to navigate. You can use img tag inside slide div if you like image inside your slide.

 var slideIn = 0; function prev() { var slide = document.querySelectorAll('.slide'), prevSlide = (typeof slide[slideIn-1] !== 'undefined')? slideIn-1 : slide.length-1; if (slide[prevSlide] && slide[slideIn]){ slide[slideIn].className = 'slide out'; slide[prevSlide].className = 'slide in'; slideIn = prevSlide; } } function next() { var slide = document.querySelectorAll('.slide'), nextSlide = (typeof slide[slideIn+1] !== 'undefined')? slideIn+1 : 0; if (slide[nextSlide] && slide[slideIn]){ slide[slideIn].className = 'slide out'; slide[nextSlide].className = 'slide in'; slideIn = nextSlide; } } var playInterval, PlayTimer = 1000; // 1 second function play() { next(); playInterval = setTimeout(play,PlayTimer); } function stop() { clearTimeout(playInterval); } 

 body { padding: 0; margin: 0; font-family: tahoma; font-size: 8pt; color: black; } div { height: 30px; width: 100%; position: relative; overflow: hidden; margin-bottom: 10px; } div>div { opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .in { -webkit-animation: comein 1s 1; -moz-animation: comein 1s 1; animation: comein 1s 1; animation-fill-mode: both; } @keyframes comein { 0% { opacity: 0; } 100% { opacity: 1; } } .out { -webkit-animation: goout 1s 1; -moz-animation: goout 1s 1; animation: goout 1s 1; animation-fill-mode: both; } @keyframes goout { 0% { opacity: 1; } 100% { opacity: 0; } } 

 <div> <div class="slide in">1st Slide content</div> <div class="slide">2nd Slide content</div> <div class="slide">3rd Slide content</div> <div class="slide">4th Slide content</div> </div> <button onclick="prev();">Prev</button> <button onclick="next();">Next</button> <button onclick="play();">Play</button> <button onclick="stop();">Stop</button>