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 you start a jQuery script following a triumphant Ajax callback?

Having some trouble getting jQuery to execute after a successful Ajax response. Even though I have it in the success callback, it doesn't seem to be working as expected. I came across a potential solution here, but I'm having difficulty understan ...

javascriptjqueryajaxresponse

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

cssckeditortailwind-cssckeditor5laravel-10

What are some ways to detect if JavaScript is enabled on the client side?

In the process of creating a web application, I have structured my code to dynamically generate JavaScript functions using PHP. However, it has come to my attention that if JavaScript is disabled on the client side, my application will not function as in ...

phpjavascriptclient-side

How to Monitor Store Changes within a Vue File Using Vue.js

I am working with 2 vue files, header.vue and sidebar.vue. Both components are imported into layout.vue. Here are the steps I am following: 1. Initially, when the page loads, I update the store in header.vue with some values inside the created hook. 2. ...

javascriptvue.js

Executing a sequence of jQuery's $.when().then() functions

I am facing challenges in understanding how to properly sequence my functions, especially in relation to the $.when() method. function y() { defer = $.Deferred(); $.when(defer).then(console.log(defer.state())); } y(); <script src="https://ajax.go ...

javascriptjquery

Is it necessary for me to master React in order to code with React Native?

As I move on to learning React and/or React Native after mastering Angular, it feels like a natural progression in my development journey. My understanding is that React Native could streamline the process of building Android/iOS native apps within one pr ...

javascriptangularjsreactjsreact-native

What is the best way to redirect a user to a different URL in Express while also sending additional data along with the request

[NODE, express] Developing a Facebook application where user grants access and is redirected to my site with a unique code at abc.com/heyBuddy/fb/callback?code="adasdasdasda". Once the code is received in route router.get('/heyBuddy/fb/callback', ...

javascriptnode.jsfacebook-graph-apiexpress

Determine if the content within the YouTube iFrame has been updated

I currently have an iframe on my webpage that does not initially display a video. However, when the user clicks a button, a Youtube video will be loaded into the iframe. I am trying to detect when the video has finished loading by using the on() method t ...

jqueryhtmliframeyoutube

Is there a way to determine the file size for uploading without using activexobject?

Can the file size of an uploading file be determined using Javascript without requiring an ActiveX object? The solution should work across all web browsers. ...

javascripthtmlfile-uploadfilesize

searchByTextContentUnderListItemAnchorTag

I would like to utilize the getByRole function for writing my test. However, I am encountering issues when using linkitem or 'link' as the role. It seems that I cannot find the desired element. // encountered error TestingLibraryElementError: The ...

javascripttypescriptunit-testingreact-testing-librarytesting-library

Managing the AJAX response from a remote CGI script

I'm currently working on a project that involves handling the response of a CGI script located on a remote machine within a PHP generated HTML page on an apache server. The challenge I am facing relates to user authentication and account creation for ...

javascriptphphtmlajax

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

css

Setting up webpack encore for async and await in a Symfony 4 and VueJs project

After setting up a VueJs project within Symfony 4, I encountered an unexpected error involving await and async (Uncaught ReferenceError: regeneratorRuntime is not defined) I've come across plenty of resources for webpack, but nothing specifically for ...

javascriptsymfonyvue.jssymfony4webpack-encore

I must address the drag-and-drop problem in reverse scenarios

I am currently utilizing react-dnd for drag and drop feature in my color-coding system. The implementation works flawlessly when I move a color forward, but encounters an issue when moving backward. Specifically, the problem arises when shifting a color ...

javascriptreactjsreact-dnd

What is the reason for the error that Express-handlebars is showing, stating that the engine

I recently added express-handlebars to my project and attempted the following setup: const express = require("express"); const exphbs = require('express-handlebars'); const app = express(); app.engine('.hbs', engine({defaultL ...

javascriptnode.jsexpressexpress-handlebars

Issue encountered while using Axios to send an http request to a server

I am facing an issue when making a GET request to the jasonplaceholder server to fetch data. Sometimes, the request returns undefined for a brief period before fetching all the data. How can I prevent this undefined response and halt the code execution u ...

javascriptreactjshttpaxiosnext.js

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

htmlcsscss-grid

Express.js is still displaying the 'Not Found' message even after deleting the initial code

Despite multiple attempts to resolve what I initially thought was a caching issue by completely removing all code from my server, I am still facing the same problem: The default error handling provided by Express Generator in the app.js file contains the ...

javascriptnode.jsexpress

I need assistance in utilizing my PHP variable UserNameID to remove the specific user's row from the database

I want to give users the option to delete their account from the database with a simple button click on my php forum. See the code snippet below: <div class="btn-group"> <button style="width:200px" type="button" class="btn btn-primary"> ...

phphtmlmysql

Enhancing Data Tables with Jquery: Implementing Column Filtering for Multiple Elements within Table Cells

I am looking to utilize jQuery datatables for filtering a column that may contain multiple values within a single td. To achieve this, I referenced the example provided in the datatables documentation. In the image below, my goal is to filter the office ...

javascriptjquerydatatables