Need first slide in Swiper slideshow to fade in

Question

All the subsequent slides fade in and out smoothly, but the first slide starts at 100 opacity.

How can I make the first slide also fade in?

javascript

$(document).ready(function () {
    
  // Disable the Ajax cache for IE
  $.ajaxSetup({ cache: false });

  // Highlighting the selected bottom menu
  $("ul#menu1 a").click(function () {
    $("ul#menu1 a").removeClass("up");
    $(this).addClass("up");
  });

  // Hamburger menu
  $('.menu-btn').click(function () {
    $('.responsive-menu').toggleClass('expand');
  });

  $(".menu-item-has-children").append("<div class='open-menu-link open'>+</div>");
  $('.menu-item-has-children').append("<div class='open-menu-link close'>-</div>");

  $('.open').addClass('visible');

  $('.open-menu-link').click(function (e) {
    var childMenu = e.currentTarget.parentNode.children[1];
    if ($(childMenu).hasClass('visible')) {
      $(childMenu).removeClass("visible");

      $(e.currentTarget.parentNode.children[3]).removeClass("visible");
      $(e.currentTarget.parentNode.children[2]).addClass("visible");
    } else {
      $(childMenu).addClass("visible");

      $(e.currentTarget.parentNode.children[2]).removeClass("visible");
      $(e.currentTarget.parentNode.children[3]).addClass("visible");
    }
  });
});

function selcat(categorie) {
  $('#SERVICES').hide();
  $('#STAIRS').hide();
  $('#RAILINGS').hide();
  $('#FENCING').hide();
  $('#WATER_AND_FIRE').hide();
  $('#CUSTOM_METALWORKS').hide();
  $('#ABOUT').hide();
  $('#' + categorie).show();
}

AI suggested code that did nothing.

associated files here

Answer 1

First, ensure the initial opacity of your first slide is set to 0. This can be done directly in your HTML with inline CSS or by adding a class to the first slide. For example:

<div class="slide" style="opacity: 0;">...</div>

Or, if you prefer using a class:

.initial-hidden {
  opacity: 0;
}

Then in your HTML:

<div class="slide initial-hidden">...</div>

In your jQuery $(document).ready function, add a fade-in effect for the first slide. You can use the .fadeIn() method or animate the opacity. For example:

$(document).ready(function () {
  // ... your existing code ...

  // Fade in the first slide
  $('.initial-hidden').animate({ opacity: 1 }, 1000); // Adjust the duration (1000 ms here) as needed
});

This will animate the first slide’s opacity from 0 to 1 over the specified duration (1000 milliseconds in this case).