Today I have learned carousel in javascript

 Carousel in javascript:

An image Slider or Image Carousel is an expedient way to show multiple images on a website. Alluring flashy images can draw many visitors to the site.

 In this post, we will create the above image slider using HTML, CSS and JavaScript. Let’s begin with creating the image slider. 

 Step – 1: To create the structure for the image slider using HTML we will use a parent div called container and inside that div, we will insert all the images from the respective sources.

Step – 2: Once we have created the HTML structure for our image slider, the next step is to style the slider using CSS. We will add styles to the images, backgrounds etc. We will also style the dots and make our images responsive and browser-friendly using CSS. 

Step – 3: After adding styles to the slider, the last thing left is to use javascript to add the functionality of auto changing of images after a specific time interval. In the code snippet below, at the very beginning, we took all the div elements with class name ‘image-sliderfade’ in an array and did the same for divs with class name ‘dots’ by using getElementByClassName() listener. After that, we set the display for all of the divs, containing images. In the last for-loop, we have erased the class name for each element of array dots[].

After we are done with these, we set the display as a block of the image to be shown and append the class name to the corresponding element of the dots[] array. Function setTimeout is used for calling the function showslides() in an interval of 2 seconds.

 image:[flower1,flower2,flower3],currentImageIndex: 0,
               }
    }
    nextImage = () => {
      this.setState((prevState) => ({
        currentImageIndex: (prevState.currentImageIndex + 1) % 4,
      }));
    };
prevImage = () => {
      this.setState((prevState) => ({
        currentImageIndex:
          prevState.currentImageIndex === 0 ? 3 : prevState.currentImageIndex - 1,
      }));
    };
<div class="container">
          <div class="row justify-content-center">
            <div class="col-10">
              <div className="image-slider text-center">
                <h4
                  className="skillnew"
                  align="center"
                  style={{ color: "rgb(32, 43, 93)", fontWeight: "700" }}
                >
                  Flowers
                </h4>

                <Icon
                  icon="fa-solid:less-than"
                  color="gray"
                  style={{ cursor: "pointer" }}
                  onClick={this.prevImage}
                  className="lefti"
                />

<img
                  className="conimgnew equal-width-image"
                  src={this.state.image[this.state.currentImageIndex]}
                  alt={`Image ${this.state.currentImageIndex + 1}`}
                />
<Icon
                  icon="fa-solid:greater-than"
                  color="gray"
                  onClick={this.nextImage}
                  style={{ cursor: "pointer" }}
                  className="righti"
                />
</div>
Output:


Comments

Post a Comment

Popular posts from this blog

Building a Full-Stack Student Management System with React.js and NestJS

  🚀 My Journey Creating a Student Management System 🌟 I'm excited to share my recent project — a Student Management System ! This project gave me hands-on experience in building a full-stack application, enhancing both my frontend and backend development skills. 💡 Project Overview The Student Management System is designed to help educational institutions efficiently manage student data, including enrollment, attendance, and performance. The goal was to create a user-friendly platform for both students and administrators. 🔨 Tech Stack Used ✅ Frontend: JavaScript, HTML, CSS, React.js ✅ Backend: TypeScript, NestJS, Node.js ✅ Database: MongoDB (with _id for unique identifiers) 🌟 Key Features ✔️ Student Registration – Easy registration with unique ID management ✔️ Attendance Tracking – Real-time updates on student attendance ✔️ Performance Reports – Generate and view student performance reports ✔️ Admin Panel – Secure access for administrators to manage student...
Read more

Today I have solved the problem in javascript

 Consider the following scenario: there are N mice and N holes placed at integer points along a line. Given this, find a method that maps mice to holes such that the largest number of steps any mouse takes is minimized.Each move consists of moving one mouse one unit to the left or right, and only one mouse can fit inside each hole.For example, suppose the mice are positioned at [1, 4, 9, 15], and the holes are located at [10, -5, 0, 16]. In this case, the best pairing would require us to send the mouse at 1 to the hole at -5, so our function should return 6. const mice = [1, 4, 9, 15]; const holes = [10, -5, 0, 16]; function minSteps(mice, holes) {    mice.sort((a, b) => a - b);     holes.sort((a, b) => a - b); let maxSteps = 0;     for (let i = 0; i < mice.length; i++) {         let steps = Math.abs(mice[i] - holes[i]);         if (steps > maxSteps) {             maxStep...
Read more

Today I have solved problem in javascript

 You are given an array X of floating-point numbers x1, x2, ... xn. These can be rounded up or down to create a corresponding array Y of integers y1, y2, ... yn. Write an algorithm that finds an appropriate Y array with the following properties: The rounded sums of both arrays should be equal. The absolute pairwise difference between elements is minimized. In other words, |x1- y1| + |x2- y2| + ... + |xn- yn| should be as small as possible. For example, suppose your input is [1.3, 2.3, 4.4]. In this case you cannot do better than [1, 2, 5], which has an absolute difference of |1.3 - 1| + |2.3 - 2| + |4.4 - 5| = 1. const inputArray = [1.3, 2.3, 4.4]; const resultArray = roundArray(inputArray); function roundArray(inputArray) {     const n = inputArray.length;     const roundedArray = [];     let roundedSum = 0; for (let i = 0; i < n; i++) {         consat roundedValue = Math.round(inputArray[i]);         rounded...
Read more