Seamless flow from one image to the next

I'm working on a project with a slideshow, but I've noticed that when it transitions between images, it can be quite abrupt. I'd like to find a way for it to change smoothly from one image to the next.

<div>
  <img class="mySlides" src="assets/img/big_logo_1.svg" max-width="100%">
  <img class="mySlides" src="assets/img/big_logo_2.svg" max-width="100%">
  <img class="mySlides" src="assets/img/big_logo_3.svg" max-width="100%">
</div>

.mySlides {display:none; max-width: 100%;}

var myIndex = 0;
          carousel();

          function carousel() {
            var i;
            var x = document.getElementsByClassName("mySlides");
            for (i = 0; i < x.length; i++) {
              x[i].style.display = "none";  
            }
            myIndex++;
            if (myIndex > x.length) {myIndex = 1}    
            x[myIndex-1].style.display = "block";  
            setTimeout(carousel, 3000); // Change image every 3 seconds
          }
javascripthtmljquerycss

Answer №1

To create a carousel using CSS transition and absolute positioning for images, you just need to make a few adjustments to your code:

<div class="carousel">
  <img class="mySlides" src="https://source.unsplash.com/random">
  <img class="mySlides" src="https://source.unsplash.com/random/?cat">
  <img class="mySlides" src="https://source.unsplash.com/random/?dog">
</div>

.carousel{
  max-width: 100%;
  position: relative;
  height: auto;
}

img{
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: 0.3s opacity ease-in-out;
}

  padding: 0;



var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = 0;
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.opacity = 1;
  setTimeout(carousel, 3000); // Change image every 3 seconds
}
.carousel {
  max-width: 100%;
  position: relative;
  height: auto;
}

img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transition: 0.3s opacity ease-in-out;
}
<div class="carousel">
  <img class="mySlides" src="https://source.unsplash.com/random">
  <img class="mySlides" src="https://source.unsplash.com/random/?cat">
  <img class="mySlides" src="https://source.unsplash.com/random/?dog">
</div>

Answer №2

/* Custom animation script */
@keyframes customAnimation {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Apply animation to specific element */
.mySlides {
  animation-name: customAnimation;
  animation-duration: 4s;
}

Implementing a code snippet like this enables you to control the visual effects of images on your website using CSS animations. For more information, refer to: https://www.w3schools.com/css/css3_animations.asp

Answer №3

Feel free to use this information for assistance.

.logo-container {
    position: relative;
}
.bannerImg01 {
    animation: bannerImg01 15s infinite;
}
.bannerImg02 {
    position: absolute;
    top: 0;
    left: 0;
    animation: bannerImg02 15s infinite;
}
.bannerImg03 {
    position: absolute;
    top: 0;
    left: 0;
    animation: bannerImg03 15s infinite;
}

@keyframes bannerImg01 {
    0% {opacity: 1;}
    20.833333% {opacity: 1;}
    33.333333% {opacity: 0;}
    87.5% {opacity: 0;}
    100% {opacity: 1}
}
@keyframes bannerImg02 {
    0% {opacity: 0;}
    20.833333% {opacity: 0;}
    33.333333% {opacity: 1;}
    54.166666% {opacity: 1;}
    66.666666% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes bannerImg03 {
    0% {opacity: 0;}
    54.166666% {opacity: 0;}
    66.666666% {opacity: 1;}
    87.5% {opacity: 1;}
    100% {opacity: 0;}
}
<div class="logo-container">
  <img class="bannerImg01" src="assets/img/big_logo_1.svg" max-width="100%">
  <img class="bannerImg02" src="assets/img/big_logo_2.svg" max-width="100%">
  <img class="bannerImg03" src="assets/img/big_logo_3.svg" max-width="100%">
</div>

Answer №4

Instead of utilizing the display:block/none, you can opt for opacity:0/1 and incorporate a transition:opacity 300ms ease to achieve a smoother effect:

.mySlides {
    opacity:0; 
    max-width: 100%;
    transition:opacity 300ms ease;
}
.mySlides.active {opacity:1;}

For the JavaScript part:

var slides = [...document.getElementsByClassName("mySlides")];
var currentSlide = 0;

function carousel() {
    slides.forEach(slide => slide.classList.remove('active'));
    currentSlide = (currentSlide < slides.length - 1) ? currentSlide + 1 : 0;
    slides[currentSlide].classList.add('active');
}

setInterval(carousel, 3000);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There is a method in TypeScript called "Mapping IDs to Object Properties"

I'm currently developing a React app that features several input fields, each with its own unique id: interface IFormInput { name: string; surname: string; address: string; born: Date; etc.. } const [input, setInput] = useState< ...

javascriptreactjstypescript

Encountering issues with rendering in React JS when utilizing state variables

I've been attempting to display content using the render method in React JS, but for some reason, the onClick code isn't executing. I'm currently enrolled in a course on Udemy that covers this topic. import React, { Component } from 'r ...

javascriptreactjs

Is it possible to assign variables inside an http call from a function in AngularJS?

Seeking urgent assistance. I need help with a function that resembles the following: $scope.getData = function(id) { $http.get('/url' + id).success(function (data) { return data.a.b.c; }); }; In another function, I have the fol ...

javascriptangularjsnode.jsmongodb

Using a function with a parameter as an argument in an event handler

Imagine you have the code snippet below: $('#from').focus(listExpand(1)); $('#to').focus(listExpand(3)); I am facing an issue as the code is not behaving as expected. I believe the problem lies in passing a function result instead of ...

javascriptjquery

Different ways to showcase a value from the CSS file on the console using console.log

In this guide, you can learn how to create a custom directive in Angular by following this tutorial: Custom Directive Tutorial. The directive should function as intended. Still, I want to see the color value set in the CSS file displayed on the console us ...

javascriptnode.jsangulartypescript

Unable to display images for Wordpress posts within list items

I am currently using this code to retrieve all images uploaded to a post within a specific category. The intention is to have these images displayed in a slider as list elements, but the current implementation looks like this: <li> <img...> &l ...

phphtmlwordpress

Display all months on mobile screen using Mui DesktopDatePicker

Looking for a Better Date Range Picker I've been working on a project that requires a date range picker, and I opted to use the Mui date range picker. While it works well on desktop, I encountered an issue with mobile view where only one month is sho ...

javascriptreactjsmaterial-uidatepicker

Exploring Vue.js: Navigating Through an Array of Images Nested Within Another Array

I am looking to showcase images stored in an array called "image" within another array named product. Essentially, if a product has an array of 3 images, I want to display all 3 images, and so on. Here is the code snippet: <template> <div c ...

javascriptarraysvue.js

"Exploring the World of Ajax Links and the Power

So I have this situation on my website where there's a link that says "Add" and when clicked, the page refreshes and it changes to "Remove". I think using ajax instead of reloading the page would be more efficient. How can I achieve this functionality ...

jqueryajaxhyperlink

Utilizing an EJS variable within a React render function with webpack - A Guide

I am looking for a way to display personalized information stored in a MySQL database to my users. I am using ejs, webpack, and React for my project. While I found some guidance on how to achieve this without webpack, it doesn't quite fit my needs. Th ...

javascriptreactjswebpackejs

Using jQuery in an external JavaScript file may encounter issues

As a newcomer to jQuery, I decided to try writing my jQuery code in an external js file rather than embedding it directly into the head of the HTML file. Unfortunately, this approach did not work as expected. Here is what my index.html looks like: < ...

javascriptjqueryhtmlajax

Press a button to activate a function on a dynamically created table using Ajax

On my website, I have an ajax function that dynamically generates a table and displays it inside a designated div. Below is the PHP code called by the Ajax function. echo "<table border='1' cellspacing='12' cellpadding='4' ...

javascriptphpjqueryajax

Capture an image of the element

Hi there, I'm currently attempting to use PhantomJS to capture a screenshot of a specific element. I'm utilizing the PhantomJS bridge for Node.js: phantom Here's what I have so far: page.includeJs('http://ajax.googleapis.com/ajax/libs ...

javascriptjquerynode.jsphantomjs

Having trouble with javascript regex for date validation?

I am facing an issue with using JavaScript regex to validate date inputs. It is identifying valid dates as invalid, and I'm not sure what the problem is: /^([0-9]d{2})+(\.|-|\/)+([0-9]d{2})+(\.|-|\/)+([0-9]d{4})+$/ The date forma ...

javascriptregexdatevalidation

Unusual occurrence with the nth-child selector

For the fiddle, click here - http://jsfiddle.net/ashwyn/a45ha/ To see the HTML code, take a look below: <div class="parent"> <div class="a">Class A</div> <div class="b">Class B1</div> <div class="b">Class B ...

jqueryhtmljquery-selectors

"Using hashtags in your Pinterest sharing description is a clever way to

Hi there, I've been working on setting up social sharing with Pinterest on my website. Everything seems to be functioning correctly, except for one issue - the hashtags aren't showing up as they should. To illustrate the problem, I created a JSF ...

htmlpinterest

Changing the Background Color of the Toolbar in Ionic

I am having trouble making the background color of my footer dynamic. I have tried binding the element to a class or applying dynamic styling, but it doesn't seem to work. Even when I have this in my HTML: <ion-footer align="center" style="height: ...

cssionic2

The MUI Autocomplete filterOptions is not effectively filtering out all options as expected

Hey there! I'm facing an unusual situation with my Autocomplete feature, which has been heavily customized to meet certain restrictions and requirements. The issue I am encountering is related to filtering. Despite successfully filtering the results ...

javascriptreactjsmaterial-ui

Preventing Credit Card Charges with Stripe in Laravel 4: Waiting for Another Form Submission

Currently, I am in the process of creating a form that will include a Stripe payment button. The layout is expected to resemble the following (consider the finish button as faded out with all necessary information yet to be filled in): My intention is for ...

phpjquerylaravellaravel-4stripe-payments

Using Angular, we can assign an array iteration as the value for a dropdown option in

Following the controller logic: $scope.form_data = { day: 'Day' }; $scope.days = [ 'Day',1,2,3,4,5,6,7,8,9,10, 11,12,13,14,15,16,17,18,19,20, 21,22,23,24,25,26,27,28,29,30, 31 ]; In the html section: <select n ...

javascriptarraysangularjs