Struggling with incorporating a Carousel feature while navigating through an array

I am struggling to properly implement a carousel using the data from my Videos Array. Instead of getting the desired output where videos should slide one by one, all the videos in the Array are being rendered at the same time.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            {Videos}
        </div>
      </div>




This is my Videos array

const Videos = VIDEOS.map((vid) => {
      if(vid.name=="Video1"){
        vari=true;
        }
      return (
        <div
         className={vari?"carousel-item active":"carousel-item"}
          style={{ width: "25vw", height: "5vh", background: "#F1F1F1",margin:"auto" }}
        >
          <img src="..." class="card-img-top" alt={vid.name}></img>
        </div>
      );
    });
htmlcssreactjscarouselbootstrap-5

Answer №1

I completed a similar task a few days ago, but I still need to make some improvements in terms of shortening the code, optimization, and adding video support.

Below is the code snippet:

import React, { useEffect, useState } from 'react';
import "./MediaViewer.css";
import { useGlobalObj, globalObj } from 'logic/zergski-global-object';

// more code...

export default MediaViewer;

And here's the CSS code:

.Media-Viewer {
    display: flex;
    position: fixed;
    justify-content: space-around;
    align-items: center;
    height: calc(100*var(--vh));
    width: 100vw;
    // more styles...
}

// more CSS rules...

.Information-Box h4 {
    position: absolute;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    text-shadow: 1px 2px 5px rgb(1, 4, 5);
}

You might find some useful insights in this code snippet.

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

Combining Files in Angular 2 for Optimal Production Deployment

What is the best method for packaging and combining an Angular 2 application for production? My goal is to have an index.html file and a single app.min.js file. Although the Angular 2 documentation mentions using webpack, I found it to be overly complex f ...

javascripthtmlangularjsbuildangular

Ways to inform a subelement that a task is complete?

I have a child component that displays a list of orders passed from the parent. I want to include a "Reload" button inside the child component that, when clicked, triggers a function in the parent component to reload the orders. Upon clicking the reload b ...

javascriptreactjsreact-hooks

Understanding the usage of jQuery transitionend to prevent interruptions in CSS animations

I found a similar thread on StackOverflow but I'm struggling to apply it in my current scenario. The Setup (Welcome Ideas) I've developed a jQuery slider that will have multiple instances on one page, each containing an unknown number of childr ...

jquerycsscss-animations

React ES6 SystemJS encountered an unforeseen token error that couldn't be caught

Even though I have imported react and react-dom using the System.config setup below, I am still encountering the error mentioned here: Uncaught (in promise) Error: Unexpected token <(…) Here is the HTML structure: <!DOCTYPE html> <html l ...

javascriptreactjsecmascript-6systemjs

Error message: React router issue (Prop type failure: Prop `children` supplied to `Switch` is invalid, expecting a ReactNode.)

Trying to modify a component in order to create a login page, I attempted to modify App.js but encountered an error. warning.js?6327:36 Warning: Failed prop type: Invalid prop children supplied to Switch, expected a ReactNode. This is the code I have ...

javascriptreactjsrouter

NodeJS: How can we effectively share sessions between server-rendered views and a React application?

I have a NodeJS (Koa) server app that renders pages from the server i.e. nunjucks/jade/etc. The login page is also server rendered. Upon login, cookies are created. Currently, I am in the process of developing a React app that will be embedded within a se ...

node.jssessionreactjswebsocketkoa

Aligning text to the right in Bootstrap 5 input fields

I'm trying to align the values of my inputs to the right. Any suggestions on how to achieve this? Here's a visual representation of what I'm looking for. This is the snippet from my code: <td style="text-align:center; vertical-alig ...

javascriptcssinputtext-alignbootstrap-5

Is it possible to find a more efficient approach than calling setState just once within useEffect?

In my react application, I find myself using this particular pattern frequently: export default function Profile() { const [username, setUsername] = React.useState<string | null>(null); React.useEffect(()=>{ fetch(`/api/userprofil ...

javascriptreactjstypescript

I attempted to activate the hover effect on a DOM element using JavaScript, but was unsuccessful. It appears that achieving this is not possible. However, I am curious as to how Chrome is able to

I attempted to activate the hover state of a DOM element using JavaScript, but had no success. It appears that this task is not achievable in the way I initially approached it. I have heard that creating a class with a hover function and then adding or ...

javascriptcssgoogle-chromehover

Why won't my navigation bar stay in place when I scroll down on the screen?

I'm trying to create a sticky navigation bar that becomes fixed when the user scrolls down to 200 pixels, but it's not working properly. I want it to behave like in this example: import React,{useState,useEffect} from 'react' functio ...

javascripthtmlreactjstailwind-css

Encountering Error 400 (Bad Request) After Submitting Data in MERN Stack Development

I'm encountering an issue while attempting to save products in my MERN project. Whenever I try to submit the data, I receive the following message: http://localhost:8000/api/product/create/5f4e7732333b2b21ec06a9f5 400 (Bad Request). Upon inspecting th ...

node.jsreactjsmongodb

Retrieve properly formatted text from the editor.document using the VSCode API

I have been working on creating a personalized VSCode extension that can export the current selected file contents as a PDF. Although PrintCode exists, it does not fit my specific needs. The snippet of code I am currently using is: const editor = vscode.w ...

htmltypescriptpdfvisual-studio-codevscode-extensions

Revamping nearly indistinguishable elements within Formik React

Having two identical components with a few differences can lead to repetitive code and boilerplate. I'm unsure of the best way to refactor this so that I only need to provide a configuration. LoginPage.js import React from 'react&apo ...

reactjsrefactoringhigher-order-componentsformik

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List

Working with the WebCalendar app found at to make some personalized adjustments to how extra fields function. I've set up two additional fields: one is a dropdown list of counties, and the other is a text field. Within the dropdown list, there is an ...

phpjavascriptjqueryhtmlcss

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

csscss-selectors

Switch out HTML dynamically using JavaScript/JQuery, embracing the principles of DRY coding

As a newcomer to front-end development, one issue I frequently encounter is avoiding repetition when dynamically generating HTML using JS/jQuery. Imagine you have a DOM object that has various states. Typically, all you need to do with JS is switch betwee ...

javascriptjqueryhtmldry

Unable to update to the most recent version of React-Bootstrap

I'm facing an issue while trying to upgrade to the newest version of react-bootstrap. When I run: npm install --save react-bootstrap The following message appears: npm notice created a lockfile as package-lock.json. You should commit this file. npm ...

javascriptreactjsnpmjestjsreact-bootstrap

Leveraging random attributes in Next.js without encountering the "server/client mismatch" issue

Is there a way to generate unique IDs for form inputs dynamically, in order to avoid conflicts with other elements that share the same ID? If multiple login forms are present on a single page, each with an 'email' field, setting the id property b ...

javascriptreactjsnext.js

Exciting news ahead with swr, "Make sure to have fallback data ready when utilizing suspense in SSR."

I am attempting to incorporate React Suspense into a Next.js project My application is set up for client-side rendering only, without server-side rendering While Suspense is functioning properly, I have encountered the following error: Fallback data is ...

reactjsnext.jsswrreact-suspense

Updating the count property of an object using setState in React

I have an array of integers ranging from 0 to 6 as my input. My goal is to create an object that gives the count of each number in the array. edition = [6, 6, 6, 1, 1, 2]; const [groupedEdition, setGroupedEdition] = useState([{"0": 0, "1&quo ...

javascriptreactjsreact-hookssetstate