Designing a slider to display a collection of images

I am currently working on a slider project using HTML, javascript, and CSS. I'm facing an issue where only the first two images (li) are being displayed and it's not transitioning to the other (li) elements. Below is the HTML code snippet:

<section id="cliens" class="cliens section-bg">
      <div class="container">

    <ul id="slider">
      <li>
          <div class="row" data-aos="zoom-in">
            <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
              <img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
            </div>
            <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
              <img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
            </div>
          </div>
      </li>
      <li>
          <div class="row" data-aos="zoom-in">
            <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
              <img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
            </div>
            <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
              <img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
            </div>
          </div>
      </li>
      <li>
          <div class="row" data-aos="zoom-in">
            <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
              <img src="assets/img/clients/client-1.png" class="img-fluid" alt="">
            </div>
            <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
              <img src="assets/img/clients/client-2.png" class="img-fluid" alt="">
            </div>
          </div>
      </li>
    </ul>

      </div>
    </section>

Here is the JavaScript code portion:

<script>
        // Slide every slideDelay seconds
        const slideDelay = 5000;

        const dynamicSlider = document.getElementById("slider").value;

        var curSlide = 0;
        window.setInterval(()=>{
          curSlide++;
          if (curSlide === dynamicSlider.childElementCount) {
            curSlide = 0;
          }

          // Actual slide
          dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
        }, slideDelay);

      </script>

And lastly, here is the corresponding CSS code:

  <style>
        #slider {
          width: 100%;
          height: 100%;

          margin: 0 auto;
          border: 10px solid transparent;
          padding: 0px;

          z-index: 100;
          overflow: hidden;
          white-space: nowrap;
          box-sizing: border-box;
        }
        #slider > li {
          width: 100%;
          height: 100%;

          position: relative;
          display: inline-block;
          overflow: hidden;
          font-size: 15px;
          font-size: initial;
          line-height: normal;
          transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
          background-size: cover;
          vertical-align: top;
          box-sizing: border-box;
          white-space: normal;
        }
      </style>
javascriptcsshtml

Answer №1

1: The value of slider is being sought after, however, there doesn't seem to be any value assigned to it.

2: Line 14 seems to be trying to define a non-css value (margin-left -000%), but the intention behind this action is unclear.

3: It appears that some lines of code might have been skipped or mixed up, as the current code isn't functioning correctly...

To achieve what you desire, consider setting a higher z-index for ul and lower ones for li, then create an "animation" with the li elements changing positions.

I've developed a basic slider without animations which you can integrate into your code if necessary.

<!DOCTYPE html>
<html>
    <head>
    <style> 
    #img
    { 
        transition: linear 2s; 
        width: 500px; 
        height: 500px; 
    }
    </style>
        <title>Page Title</title>
    </head>
    <body>
        <img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60" id="img">
        <script>
            var counter = 0;
var t; 
window.onload = function() {setInterval(change, 5000);}
function change()
{ 
    var imgs = ['https://images.unsplash.com/photo-1473448912268-2022ce9509d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1025&q=80', 'https://images.unsplash.com/photo-1519821172144-4f87d85de2a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1231&q=80', 'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8Zm9yZXN0fGVufDB8fDB8&auto=format&fit=crop&w=600&q=60'];
if(counter === 3) 
{ counter = 0; }
else
{
 document.getElementById('img').src = imgs[0 + counter];
 counter++;
} 
}
        </script>
    </body>
</html>

If these issues are resolved, I'll be able to provide you with the full solution.

Trust this assistance has been beneficial!

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

How can I force a Kendo UI Chart to resize in VueJS?

When integrating Kendo UI's Chart component within a Vue application, how can we trigger the chart to refresh or redraw? Although the chart automatically adjusts to changes in width by filling its parent container horizontally, noticeable stretching ...

javascriptvue.jskendo-uitelerikwindow-resize

"Troubleshooting: Why is TailwindCSS not functioning correctly in my NextJS

My project utilizes a combination of NextJS, TailwindCSS, and Typescript. Strangely, everything displays correctly in the development environment, but once in production, the tailwindcss classes are not being applied. For reference, here is the link to t ...

javascriptreactjsnext.js

What is the best way to remove CSS styling from a select element?

My select element is displaying blank option values no matter what I do. The dropdown has the correct number of options, but they are all empty. Here's the HTML snippet: <label for="accountBrokerageName">Brokerage:</label> <se ...

htmljquerycss

403 Error Code - Access Denied when trying to access Cowin Setu APIs

While attempting to create a covid vaccine alert using the Cowin Setu API (India) in nodejs, I encountered a strange issue. Every time I send a get request, I receive a 403 response code from cloudfront stating 'Request Blocked', although it work ...

javascriptnode.jsexpressamazon-cloudfrontrest

What is the correct method for handling images in HTML and CSS?

Hey there! Just playing around on jsfiddle and wanted to share this Destiny-inspired creation: http://jsfiddle.net/3mfnckuv/3/ If you're familiar with Destiny, you'll see the inspiration haha.. But here are a few questions for you: 1) Any ide ...

htmlcss

Modify the database value linked to an <input> element each time its value is modified

I attempted to create something similar to the example provided here $(document).ready(function(){ $('input[type=text]').keyup(function(){ var c=0; var a=$(this).attr('name'); //a is string //if var a change.. ...

javascriptjquery

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

javascripthtmlnode.jsexpressghost-blog

Angular: merging animations with scope updates

If you're curious to see some code, check it out here: some code My inquiry pertains to using Angular to blend a change in data triggered by a click with a fade in/fade out animation. I've managed to implement content changes on click and anima ...

javascriptangularjsanimation

Implementing SVG in NextJS 13 with custom app directory: A step-by-step guide

Recently, I decided to explore the app directory and unfortunately ran into some issues. One of the main problems I encountered was with image imports. While PNG images imported without any problem, SVG images seemed to break when importing in /app. For i ...

javascriptnext.js

Error encountered while attempting to validate JWT

This question has been asked multiple times, but I'm still struggling to find the root cause of the issue. I have already signed some data with a token, but when I attempt to verify it, I receive an error message saying "jwt malformed". Interestingly, ...

javascript

Function useAppDispatch is missing a return type

.eslintrc.js module.exports = { root: true, extends: [ '@react-native-community', 'standard-with-typescript', 'plugin:@typescript-eslint/recommended', 'plugin:jest/recommended', 'plugin:p ...

javascriptreactjstypescriptreact-reduxredux-toolkit

Intelligent programming and innovative thinking to streamline template diversity

My goal is to create multiple child websites using a base HTML/CSS template. Each child website will have unique color schemes and image variations for elements like <h> tags and background colors. I am searching for ways to easily modify the base th ...

htmlcss

Is the "sizes" attribute of the "picture" element functional in Chrome when it comes to <source>?

The incredible <picture> element has been functioning flawlessly in the Chrome browser for well over a year, yet regrettably, I seem to be encountering an obstacle when attempting to make use of the powerful sizes attribute within the <source> ...

htmlimageresponsive-images

Encircling the most recently selected image with a border

I have successfully made some <img> elements act like <input type="radio"> buttons and now I want to visually indicate the user's selection by adding a border around the chosen image. My challenge is that there are multiple rows of images ...

javascriptjqueryhtmlcss

Tips for altering the distance between dots on a line

.ccw--steps { margin: 10px auto; position: relative; max-width: 500px; } .ccw--step-dot { display: inline-block; width: 15px; border-radius: 50%; height: 15px; background: blue; border: 5px solid #e8e8e8; position: relative; top: -8p ...

htmlcss

Becoming an expert at managing and solving dependency conflicts

I am facing an issue while setting up a project from my work computer to my home computer due to fixed dependency versions. Here are the dependencies causing the problem: "dependencies": { "@nestjs-modules/mailer": "2.0.2&qu ...

javascriptnode.jsnpmnestjs

Ways to extract a value from an HTML form in ASP.NET when using Html.EnumDropDownListFor

I am a beginner in ASP.NET and I recently set up a form that allows input from a C# enum: <form method="get"> <div class="form-group"> <label>Select Type:</label> @Html.EnumDropDownListFor(x = ...

javascriptc#asp.net

Unable to carry out specific tasks in a particular order with GULP

I'm having trouble getting the TASK cssmin to execute after scss. It works fine when the folder destination is not empty and .css files are already compiled with the 'scss' task, but if the folder is empty, the cssmin task doesn't creat ...

javascriptnode.jsnpmgulp

React Redux fails to dispatch an action

Recently, I attempted to integrate Redux into my React application. I created a container called SignIn that instantiates a mapDispatchToProps and connects it to the component. The SignIn component renders a sub-component called SignInForm (code provided ...

javascriptreactjsreduxreact-redux

Tips for effectively utilizing MeteorPad: (Note: ensure to use at home instead of at work due to potential firewall or proxy issues)

UPDATE: It's possible that the issue is related to a firewall or proxy. MeteorPad doesn't work at my workplace, but it works fine at home. I've been attempting to use MeteorPad () but I'm encountering some difficulties. The bottom are ...

javascriptmeteor