I'm interested in creating an automated slideshow of icons. You can view an example on the website linked below by scrolling down to the footer section. Do you have any recommendations for how I could achieve this? My project utilizes nextjs and tailwind.
Example Website
Setting up a slider container with width:100vw & height:300px to match the height of the images being used (you can choose your own images) and adding overflow hidden to conceal any images spilling off the screen.
Placing the images inside the logoSlider using display:flex; to arrange them in a single line. The logoSlider is nested within the main parent sliderContainer.
This is just an illustration, the animation may not be precise as I am presenting the concept for you to customize according to your preference.
Implementing an infinite animation to make the pictures move continuously across the screen.
.sliderContainer {
overflow: hidden;
width: 100vw;
height: 300px;
}
.logoSlider>img {
width: 300px;
height: 300px;
}
.logoSlider {
display: flex;
animation: slideshow 6s infinite linear;
}
@keyframes slideshow {
from {
transform: translate(800px);
}
to {
transform: translate(-1800px);
}
}<div class="sliderContainer">
<div class="logoSlider">
<img src="https://s3.amazonaws.com/cdn.designcrowd.com/blog/100-Famous-Brand%20Logos-From-The-Most-Valuable-Companies-of-2020/apple-logo.png">
<img src="https://s3.amazonaws.com/cdn.designcrowd.com/blog/100-Famous-Brand%20Logos-From-The-Most-Valuable-Companies-of-2020/google-logo.png">
<img src="https://s3.amazonaws.com/cdn.designcrowd.com/blog/100-Famous-Brand%20Logos-From-The-Most-Valuable-Companies-of-2020/microsoft-logo.png">
<img src="https://s3.amazonaws.com/cdn.designcrowd.com/blog/100-Famous-Brand%20Logos-From-The-Most-Valuable-Companies-of-2020/samsung-logo.png">
<img src="https://s3.amazonaws.com/cdn.designcrowd.com/blog/100-Famous-Brand%20Logos-From-The-Most-Valuable-Companies-of-2020/walt-disney-logo.png">
<img src="https://s3.amazonaws.com/cdn.designcrowd.com/blog/100-Famous-Brand%20Logos-From-The-Most-Valuable-Companies-of-2020/intel-logo.png">
</div>
</div>I am encountering an issue with implementing react cookies version 2. I am using webpack-dev-server for testing. Below is the console log: Warning: Failed context type: The context cookies is marked as required in withCookies(App), but its value is unde ...
There are three div boxes included in a rotator script. However, when clicking on the right button, all three boxes appear overlapping each other instead of showing one at a time. How can I make it so that only one box is shown and the others appear upon c ...
My website is built using Bootstrap 5, and I am working on creating a navbar dropdown functionality. On desktop, I want the dropdown to open on hover and lead to a new page when clicked. However, on mobile, I only want the dropdown to open and close on cli ...
whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...
I am currently utilizing useSWR to fetch data and then calculating a total using the reduce method. Strangely, when I try to update the state with the calculated value, it triggers multiple re-renders causing the 'Too many re-renders' error messa ...
I am currently working on a webpage design using bootstrap. The layout consists of different sections, each containing a bootstrap row within a container. However, I encountered an issue where new rows are not appearing below the previous row as expected, ...
I've been attempting to implement Bootstrap collapse with a linear effect, but have been encountering challenges. After trying different versions of Bootstrap, I found that the transitions were quite similar. I decided to go with the latest version av ...
Hi everyone, I'm encountering an error while trying to create a React app and I'm not sure what the issue is. Can someone help me fix this error and provide guidance on what steps I should take next? Note: my internet connection is working F:& ...
I am currently working on an ASP webpage and I am facing an issue with writing JavaScript within it. My goal is to assign a variable to the response of a function that is stored in the code behind (page.aspx.vb). Here is an example of what I am attemptin ...
My problem involves using the vantajs wave library. I want to figure out how to make the waves continue rendering on a specific CSS selector even after clicking through the tablinks of my react app. However, I encounter an error when using Brave browser th ...
This is my database connection file import mongoose from 'mongoose' const connectDB = async () => { mongoose.connect(process.env.MONGO_URI) }; export default connectDB; This is my Product model schema file import mongoose from "m ...
Utilizing React and Meteor in conjunction with Semantic UI is a goal of mine. I've noticed that Semantic offers an official atmosphere package Additionally, there's a Semantic-UI-React project available What would be the optimal method for set ...
After following this tutorial, I was able to create a pop-up box with a contact form. However, I am looking for a way to reuse this code in multiple locations without having to change the IDs for each button. If anyone has any advice on how to achieve thi ...
Having trouble integrating PayPal into my React project. Originally implemented the following code: const onCreateOrder = (data, actions) => { return actions.order.create({ intent: "CAPTURE", application_context: { shipping_pre ...
Here is the setup I have on jsfiddle: http://jsfiddle.net/zZDqH/ Currently, there is a button fixed at bottom:0px. You can scroll up and down the page, and the button will stay at the bottom of the page. However, when testing in Safari on an iPhone 3G ( ...
Hello friends, I am fairly new to working with AngularJS and have been experimenting with angular Route. However, I encountered an issue where clicking on #/home resulted in a strange URL appearing here. Oddly enough, the default otherwise condition seems ...
$text = preg_replace("/<([a-z][a-z0-9]*)[^>]*?(\/?)>/i",'<$1$2>', $text); Greetings. I came across a preg_replace function that identifies all HTML tags and removes their attributes. However, I need to make an exception for t ...
Those deciding to close this as not conducive, please read through the entire post. Specific questions will be posed at the end. Seeking practical examples and strategies. Situation As more and more people use devices like smart-phones and tablets to acce ...
My orders list state works perfectly on the initial update. However, when an order in the database gets updated, the order list is updated but fails to trigger a re-render even with <...> const [orders, setOrders] = useState([]); useEffect(( ...
Hello everyone! I'm currently working on running a loop with setInterval, but I want each element in the array to use a random interval instead of the entire array doing so. Below is the code I have been using: setInterval(function() { for ( ...