What steps should I take to create a slider using my image gallery?

I have a unique photo gallery setup that I'm struggling with:

As I keep adding photos, the cards in my gallery get smaller and smaller! What I really want is to show only 4 photos at a time and hide the rest, creating a sliding effect. I attempted adjusting the container width and using overflow-x: scroll, but it didn't quite produce the desired result. Is there a way to achieve this slider effect with my current gallery layout? If so, how can I do it? I've tried searching for a solution online, but most examples involve static cards and not my dynamic gallery.

.containerss {
  display: flex;
  width: 100%;
  padding: 4% 2%;
  box-sizing: border-box;
  height: 86vh;
}

.box {
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
  line-height: 0;
  background-color: black;
}

.box>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.box:hover {
  flex: 1 1 40%;
}

.box:hover>img {
  width: 100%;
  height: 100%;
}
<div class="containerss">
  <div class="box">
    <img src="https://source.unsplash.com/1000x807" loading=lazy>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x808" loading=lazy>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x810" loading=lazy>
  </div>
  <div class="box">
    <img src="https://source.unsplash.com/1000x802" loading=lazy>
  </div>
</div>

Answer №1

If you want to showcase your gallery in a unique way, consider wrapping it in a container with 100% width and horizontal scroll functionality. Then, customize the size of your gallery containers according to your preferences.

.wrapper{
    width:100%;
    overflow: scroll-x;
}

.containerss {
    display: flex;
    width: 130%;
    padding: 4% 2%;
    box-sizing: border-box;
    height: 86vh;
}

.box {
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 2%;
    box-shadow: 0 20px 30px rgba(0, 0, 0, .1);
    line-height: 0;
    background-color: black;
}

.box>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
}

.box:hover {
    flex: 1 1 40%;
}

.box:hover>img {
    width: 100%;
    height: 100%;
}
<div class="wrapper">
    <div class="containerss">
        <div class="box">
            <img src="https://source.unsplash.com/1000x807" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x808" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x810" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x802" loading=lazy>
        </div>
        <div class="box">
            <img src="https://source.unsplash.com/1000x802" loading=lazy>
        </div>
    </div>
</div>

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

Utilizing API data as props within an Autocomplete component in Reactjs with Material-UI

New to Reactjs, I am currently exploring the implementation of the Autocomplete component from material-ui. My goal is to pass the API link as a prop to the element. However, I'm stuck on how to pass the json label name as a prop to be used in "getOpt ...

Is using the <a> tag in HTML5 detrimental to SEO?

Recently, I've been experimenting with using the <a> tag as a container in HTML5. It's interesting to note that this tag can now have block elements as children. Take a look at this transformation: before (valid XHTML 1.1) <div> ...

Determining if a value is an Object Literal in JavaScript: Tips for judging

As someone with limited experience in object type judgment, I find myself unsure of how to determine if a value is an Object Literal in JavaScript. Despite my efforts to search online for answers, I have not been successful. Any guidance or ideas on how to ...

Background wrapper does not reach full height of page

I am currently dealing with a website template that has a background image in the wrapper. However, when I view the site on a 13" laptop screen, the text extends below the fold because the wrapper only covers above the fold. This results in my content not ...

Send the selected dropdown value to two separate PHP pages without using JavaScript

I am specifically looking for PHP programming, not JavaScript. My requirement is to have a dropdown menu containing 15 weeks. When a user selects a week from the dropdown, they should be redirected to a page that displays a message saying: Welcome! You h ...

The issue of the menu in the <Select /> component unexpectedly closing is caused by the MaterialUI -withStyles higher-order component (HOC)

Issue Description When utilizing the <Select /> component with the multiple attribute, users should be able to select multiple options without the dropdown menu closing. This functionality works as intended when using the <Select /> component ...

How can I use ReactJS to find the nearest five locations in order from closest to farthest?

I'm in the process of creating a website for searching nearby locations. I am facing an issue where I want to display the 5 closest locations from my current location in ascending order, but I keep getting the same location result. I need these locati ...

What steps are involved in importing remark-gfm into next.config.js?

I am interested in incorporating MDX into next.js with the remark-gfm plugin. After discovering the Next.js Docs on MDX, I decided to follow their guidelines and added an import statement. // next.config.js import remarkGfm from 'remark-gfm;' co ...

Form is protected from XSS attacks

Here's a basic form that I'm attempting to exploit with XSS using Chrome. <?php echo $_GET['comment']; ?> <script>alert('from HTML')</script> <form method="GET" action=""> Name: <input t ...

Navigating in React: How to Implement the Same Route for Different Scenarios Without Compromising Your Application

I'm facing a frustrating issue while trying to incorporate Redux state management and React Router. Despite searching extensively online, I can't seem to find a solution. My Redux state, named user, stores the details of a logged-in user. Upon l ...

Encountering a random MS JScript runtime error message after a few alerts

Encountering this issue when clicking the "Ok" button on an alert window. Error message: Unhandled exception at line 1, column 1 in a lengthy URI Error code: 0x800a138f - Microsoft JScript runtime error: Object expected This problem is occurring within ...

Personalizing Bootstrap Styles Using Sass

As a newcomer to Bootstrap 5 and Sass, I have been thoroughly enjoying the learning process. However, I have a couple of questions that have come up along the way... When it comes to customizing Bootstrap Sass, I understand the concept of variable overrid ...

Is it possible to access a PHP variable from a different file in an HTML file?

Can someone help me with separating the javascript from this php file? I need to specify where the javascript should look for the php file, as currently it only executes within the php file. <?php date_default_timezone_set('Europe/London'); r ...

Modify the information on a page by clicking a button on a different page

I'm currently working on the design of a website that consists of two pages. The first page features a button, which when clicked should remove the hidden class from an element on the second page. I have searched extensively for a solution, but so far ...

When dealing with ReactJS, utilize the onChange event for handling updates to nested

I am currently learning ReactJS and struggling with a simple logic problem (I'm not very good at JS). I have a form that includes fields for name, email, and message. @ContactUsNew = React.createClass getInitialState: -> message: @props.mess ...

Place the two buttons in position

I have a section where I need to include two buttons. One button on the left labeled "Sunday" and one on the right labeled "misc". I want the two buttons to be evenly placed within the area, so I assigned them the same class since they are the same size. ...

The functionality of clicking on a jQuery-generated element seems to be malfunctioning

When using Jquery, I am able to create an element and assign it the class .book: jQuery('<div/>', { name: "my name", class: 'book', text: 'Bookmark', }).appendTo('body'); I then wanted to add funct ...

An internal server error has occurred within the asp.net framework, resulting in

Seeking Solution: Currently, I am in the process of developing an application where I have implemented an HTML select list to choose a category. Using AJAX web method, I am trying to retrieve items and their respective images based on the selected category ...

How to iterate over the request body in Node.js using Express?

When I send a request with data in the form of an array of objects: [ {id: "1"}, {id: "2"}, {id: "3"} ] I am utilizing JSON.stringify() and my req.body ends up looking like this: { '{"id":"1"} ...

Scaled-down navigation when scrolling

Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless. I'm guessing it's achieved with JQuery. ...