CSS Gallery Indicator: Enhancing Your Website's Visual Appeal

After implementing a CSS gallery template into my HTML code, I faced an issue. The original code contained only 4 images, but after adding nine more images, the indicator in the gallery stopped moving past the 4th image and the preview of the additional images was not visible.

Original CSS code:

Here is the HTML code:

<div class="carousel">
<!-- Input elements for each image -->
...

</div>

<div class="thumbnails">
<!-- Thumbnails for each image -->
...
</div>

CSS Styles:

.gallery {
    /* Gallery styling */
    ...
}

/* Additional CSS styles for carousel functionality */
...
@keyframes shadow {
    /* Keyframes for shadow effect */
}

Answer №1

Without seeing your example in action, it's challenging to pinpoint the issue accurately. However, a potential problem lies in the fact that you may not be properly adjusting the transform: translate property within the gallery input#image-x selectors based on the number of slides.

If you review the first 4 rules closely, you'll notice that the percentage increases by 100% with each rule. However, in the fifth rule, the transform property remains at 300% without further adjustment.

I hope this insight proves helpful to you as you work through the issue.

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

Display only the selected index and conceal the rest

I am facing an issue where I have added a label and input in ng-repeat. The functionality works fine when the user clicks edit to show the input and hide the label. However, the problem arises when the user clicks on the new button as it displays the new i ...

Encountering a script error when upgrading to rc4 in Angular 2

After attempting to update my Angular 2 version to 2.0.0.rc.4, I encountered a script error following npm install and npm start. Please see my package.json file below "dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", ...

What is the method for selecting the col/row or x/y coordinates for N random elements from a 2D matrix without repeating any items or coordinates?

In my dataset, which is a 2D matrix, here is an example: data = [["a", "b", "c", "d"], ["e", "g"], ["i", "j", "k"]] I am looking to retrieve N random (x, y) indexes without any duplicates. Previously, I had a similar question and here is the solution I f ...

Analyze two objects and eliminate any duplicate keys present between them

I am currently conducting an experiment on objects where my goal is to remove keys from object1 that are present in object2. Here is an example of what I am trying to achieve: var original = { a: 1, b: 2, c: 3, e: { tester: 0, ...

Create a div element using JQuery mobile

I am experiencing an issue where a div on my webpage is supposed to refresh every 3 seconds, but the CSS is not being rendered correctly after each refresh. Below is the code I am using: HTML: <div id="statusbar"></div> JavaScript: $( docu ...

Insert an item into an array of objects at regular intervals of X objects

Here is an example of the array of objects I am working with: [ {_id: "59b6433532b60cfc0a253cec", description: "", imagepath: "https://xxx.1", likes: 0, downvotes: 0} {_id: "59b6433532b60cfc0a253ceb", description: "", imagepath: "https://xxx.2", ...

Manipulating information from one format to another

I am currently tackling the task of calculating scores based on departments within groups. For simplicity, I will focus on just one group as an example. Here is the data structure that I have: const data = [{ "id": "cklt7ln1k0922o0sabjkk74m9", ...

IE doesn't seem to support framesets, while Mozilla browsers handle them just fine

Can anyone help with this code that works in Mozilla but not in Internet Explorer? The situation is urgent. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html lang="en" xmlns= ...

When the height of a LightSwitch HTML root screen layout is set to "stretch to container," it can extend beyond the screen boundaries, causing potential display issues

Hello everyone, I've encountered a layout issue where setting the root layout's height to "Stretch to Container" while ensuring that no buttons are visible in the footer causes the page to unnecessarily extend beyond the browser window's he ...

Two rectangular divisions placed next to each other, with one perfectly centered and the height of the second division adjusting to match the height of the

I attempted to implement the Matthew James Taylor method, utilizing three columns. However, my main issue arises when I desire the middle column to dictate the height. In other words, if the center div is 500px in height, I want the right div's height ...

Showing a DIV container upon hovering over a different element

Having trouble with a hidden div container not displaying properly upon hovering over a visible div container. When d1 is hovered over, d2 appears but with a blinking effect. Here is my code: Note: I want d1 to remain visible and use d2 for displaying te ...

Close popup after submitting the form

On my website, I have a function to submit a form within a modal. Everything works well except for when I uncomment a certain line of code. When I uncomment that line, my test mysql insert on the page /index.php/trainings/add doesn't get executed. I a ...

Grouped Input Layout Bootstrap 4

I am having an issue with Bootstrap regarding how to keep a search bar static on the page. Here is what I have tried so far: https://i.sstatic.net/CqeSF.png Below is the code I am currently using: HTML: <nav class="navbar fixed-top navbar-light bg-l ...

It seems that using the SVG <mask> tag is necessary for Firefox to display correctly, but it causes issues with CSS mask in

I need assistance with masking content using an external SVG image. Currently, I'm using the following code: #homepage-banner .desktop-slider.masked { -webkit-mask:url(news-panel-mask.svg) left top no-repeat; /* Chrome/Safari (Webkit) */ mask: ur ...

Tips for saving a list of data in a responsive component using Vue 2

Currently, I am developing a web application where users can input objects into a database. The structure of these objects is predefined, but some have a data property that contains a map of strings, for instance { title: "Test", description: &qu ...

Utilizing *ngfor in Angular 7 to Group and Display Data

I currently have incoming data structured like this in my Angular application Visit this link to see the data format https://i.stack.imgur.com/jgEIw.png What is the best way to group and sort the data by State and County, and present it in a table as sh ...

Auto-fill Textbox from a different Textbox in MVC 4

I am attempting to automatically fill in a textbox based on the value of another textbox, but I am struggling with getting the other textbox to populate. Below is my code - any advice on the best solution would be greatly appreciated. Action Method: [Htt ...

What is the proper method for overriding styles in material-ui v5 for properties that are not present in the themes components?

Currently, I am customizing MuiDataTables using the adaptv4theme in the following manner: declare module '@material-ui/core/styles/overrides' { export interface ComponentNameToClassKey { MUIDataTable: any; MUIDataTableFilterList: any; ...

Tips for securely transmitting data via a hidden form using the POST method

I have a query that displays records of people, and I want to send the id_Persona using a hidden form through a post function to the idsPersonas.php page. However, when I try to do this, it redirects me to an undefined page. Here is the code snippet: < ...

Is it possible to enforce synchronous callback during multiple file upload in Node.js?

Currently, I am facing an issue with a form that allows users to upload multiple images using a single <input> tag. The problem arises when I try to access the filesystem in Node.js as it queues the callback for reading and writing files asynchrono ...