Image Carousel Extravaganza

Trying to set up a sequence of autoplaying images has been a bit of a challenge for me. I've attempted various methods but haven't quite nailed it yet. Take a look at what I'm aiming for:

https://i.stack.imgur.com/JlqWk.gif

This is the code snippet that I currently have:

var mItemsCount = $(".home-m-item").length - 1;

setInterval(function() {
  var t = $(".home-m-item.active");
  t.removeClass("active");
  if (t.index() === mItemsCount) {
    $(".home-m-item:first").addClass("active");
  } else {
    t.next().addClass("active");
  }
}, 200);

var windowPathname = window.location.host,
    loader = $(".loader");
.home-m {
    position: relative;
    z-index: 3;
    padding: 0 0 200px;
    background: #111 url(assets/images/home/m-slant-bg.svg) bottom/100% 100% no-repeat;
}
        
        a, a:active, a:focus, a:hover, a:link, a:visited {
    outline: none;
}
        
    .home-m-items {
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 3px);
    z-index: 1;
}
        
    .home-m-item{
            width: 100%;
            height: 100%;
            positoin: absolute;
            left: 0;
            top: 0;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            visibility: hidden;
    }
        
        .home-m-item.active {visibility:visible}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="home-m">
    <div class="home-m-items">
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-1.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-3.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-3.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image4.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-5.png');" class="home-m-item"></div>
    </div>
</div>

JavaScript animations are still new territory for me, so I suspect the issue lies within my script. However, I would also appreciate a solution achievable through keyframes.

javascripthtmlcssanimation

Answer №1

If you're looking for a solution, here's one approach. You can maintain your current CSS settings, but remove the visibility:hidden property from the item div. However, it's worth noting that your CSS may not be fully responsive. I've included a responsive option below for consideration. To simplify your HTML structure, you can trim it down to the following code snippet. For a visual demonstration, refer to this live demo hosted on CodePen: https://codepen.io/hileamlak/pen/jOqmpmm?editors=1010

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    
    <div class="home-m">
        <div class="home-m-items">
            <div class="home-m-item"></div>
        </div>
     </div>
</body>
</html>

Your JavaScript:

let imageCounter = 1;

setInterval(
  ()=>{
if (imageCounter>5){imageCounter = 1;}
$(".home-m-item")[0].style.backgroundImage = `url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-${imageCounter}.png')`;
imageCounter++;

},1000)

The provided solution functions correctly in the CodePen live demo reference above. However, using images as background elements could hinder responsive design adjustments based on image dimensions. Here's an alternative suggestion: https://codepen.io/hileamlak/pen/MWymBXV

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

Unexpected failure when using FormData in Ajax callback for large files

I have a file upload control where I can upload various types of files. After getting the file, I store it in a FormData object and make an ajax call to my controller. Everything works well with images and small .mp3 files. However, when I try to upload .m ...

javascriptajaxasp.net-mvcmultipartform-dataform-data

Mixing CSS layers

Applying this particular css: .addProblemClass{ width:300px; height:300px; /*width:25%; height:40%;*/ border:solid 1px #000000; margin: 5px; background-color:#FFFFFF; padding:5px; opacity:0.9;/*For chrome and mozilla*/ ...

csshtmloverlap

Transitioning from Jquery to vanilla JavaScript or transforming Jquery code into pseudo code

Struggling with a snippet of jQuery code here. While I have a good grasp on JavaScript, my knowledge of jQuery is somewhat limited. I am seeking assistance to analyze the following code in order to translate it into plain JavaScript or pseudo code that ca ...

javascriptjquery

What is the best way to access the child DOM of a Vue element?

Is there a way to access the child DOM element of a Vue component? In the code snippet below, I am trying to retrieve the <input> element nested within the <div>. var vm = new Vue({ el: '#box', data: { pick: true, a: & ...

htmlvue.jsconsole

Tips for integrating an infinite scroll feature using HTTP requests?

My current project involves developing a webapp using AngularJS to interact with a long array of objects. To display these objects on my index, I am utilizing nested ng-repeat functions. Additionally, I have implemented infinite scroll functionality simila ...

javascriptangularjsnginfinitescroll

Displaying every nth image in a new row of a CSS grid

I have a react component and I want to arrange 3 photos inline in a row with their names below each photo, and then continue in new rows for the next set of 3 elements and so on... I attempted to use :nth-child(3n+1) but encountered some issues... const P ...

cssreactjscss-selectors

Combining text and images in XSLT using CSS: A comprehensive guide

Greetings! I am facing a situation where I have an XML file containing image tags like this: <pb facs="ciao.jpg">. Additionally, I have an XSL file that includes a JavaScript snippet as shown below: <script type="text/javascript> function ...

cssimagetext

Unable to retrieve custom date picker value with React Antd

I have implemented a custom datepicker for entering dates in the 'MMDD' or 'MMDDYY' format. The date value is stored in state and used in the datepicker component as a controlled component. However, upon form submission, the datepicker ...

javascriptreactjsdatepickerantd

What is the most efficient approach to completing everyday tasks directly in a Vuex store?

Currently, I am working on making API calls from within a Vuex store action object. Here's an example of one of my actions: /** * Check an account activation token * */ [CHECK_ACTIVATION_TOKEN] ({commit}, payload) { Api.checkActivationToken(payl ...

javascriptapivue.jsvuex

Ways to extract specific HTML from a jQuery element

When fetching html from a website, how can I extract specific html content instead of getting all of it? I have attempted the following method: Before appending data to the target below container.html(data); I would like to perform something like data.f ...

javascriptjqueryhtmlcss

Exclusive Modal Pop-Up for First-Time Visitors - Utilizing Bootstrap, PHP, and JavaScript

Seeking assistance from the community as I have exhausted my online research efforts. I am currently working on implementing a welcome bootstrap modal in a php environment. Despite being new to php and js, I have managed to make it pop up only once using ...

javascriptphpbootstrap-modalsimplemodal

I am looking to transmit a JWT token to my backend using next-auth

In my current project using Next.js, I have implemented authentication with next-auth. This project follows the MERN stack architecture. I am facing an issue where I need to retrieve the JWT token and send it to my backend server using next-auth along wit ...

javascriptauthenticationnext.jsmernnext-auth

Steps to refresh a .ejs page with updated information following an ajax request

I am in need of re-rendering my homepage.ejs with new data on the server side following an ajax request. Although I am aware that you can somehow re-render the elements in the ajax callback, I am interested in finding out if it is possible to simply re-ren ...

javascriptnode.jsajaxexpressejs

Javascript code that enables me to specify the type of weather

My intention with this code was to create unique characteristics for different weather types and randomly select one by generating a random number. I defined 11 different weather types as objects of the Weather class. I then implemented a getWeather funct ...

javascripthtml

Is it possible to anticipate a particular word following a route parameter in Node.js?

My current route setup looks like this: router.get('/:board/:threadId', function(req, res, next) { // performing actions here }); When users visit /a/1, it triggers the route with board = a and threadId = 1. Now, I want users to have to vis ...

javascriptnode.jsexpress

Instructions for overlaying a text onto the select input field in DataTables

I am currently utilizing the DataTables select input feature to capture only the first three columns of data. However, I would like to enhance this by adding a text element above the select inputs within the DataTables interface. Is there a way to achieve ...

javascriptjquerydatatables

What is the best way to import modules with the "@" symbol in their path when working with Node.js?

Situation In my VueJS project, I have created service modules for use with vue cli. My code makes use of the @ symbol to easily access files within the src folder: /* Inside someService.js */ import API from '@/services/APIService.js' Ch ...

javascriptnode.jsvue.jsimportpath

A platform for creating ER and flow diagrams specifically tailored for web applications, utilizing open source software

Our team is currently working on creating a web application that enables users to create diagrams, such as flow or ER diagrams. We are looking for ways to convert these diagrams into XML or other formats for representation. Are there any open-source soft ...

javajavascriptjqueryajaxgwt

The member 'email' is not found in the promise type 'KindeUser | null'

I'm currently developing a chat feature that includes PDF document integration, using '@kinde-oss/kinde-auth-nextjs/server' for authentication. When trying to retrieve the 'email' property from the user object obtained through &apo ...

javascriptreactjstypescriptauthenticationnext.js

Unable to retrieve content using the query.ID in Next.js

I'm trying to figure out what is causing the issue in this code, but I can't seem to resolve it. My goal is to use the query.id inside getInitialProps to fetch some content. The fetching process works fine, but when an error occurs, I receive thi ...

javascriptreactjsnext.js