Problem with scrolling horizontally through images using the <ul> and <li> tags

I am attempting to achieve a horizontal scrolling effect for a series of images, similar to what is shown in this example. I am facing an issue where the images do not align in a single row and instead move to the next line. How can I create horizontal scrolling for images without using any plugins?

Below is my current CSS setup:

.admin-shop-images {
    list-style: none;
    overflow-x: scroll;
    width: 100%;
}

.admin-shop-images li {
    background-color: #f3efea;
    margin-right: 25px;
    width: 105px;
    height: 105px;
    float: left;
    display: inline-block;
}

.admin-shop-images li a {
    display: block;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-size: cover;
}

.admin-shop-images li:last-child {
    margin-right: 0;
}
htmlcss

Answer №1

View this demonstration

I enclosed the information within the div and specified the following in the css

  #ImageContainer{
    width:200px;
overflow-x:scroll;   
    height:140px;
overflow-y:hidden;       
}

By adjusting the width of the div, you can resize the entire container Check out a smaller version of the divhere

Answer №2

The issue arises from the floating left element. By changing it to display: inline-block and adding white-space: nowrap to the <ul>, you can enable scrolling. Here's how:

.admin-shop-images {
  list-style: none;
  overflow-x: auto;
  width: 800px;
  white-space: nowrap;
}

.admin-shop-images li {
  background-color: #f3efea;
  margin-right: 25px;
  width: 105px;
  height: 105px;
  display: inline-block;
}

http://jsfiddle.net/PJGGC/8/

Answer №3

Give this a try

To implement this, you will need to create a container div with a fixed size and an inner ul element that has a width larger than the div.

Here is the HTML code:

<div>
    <ul class="admin-shop-images clearfix">
        <li> <a style="background-image: url(http://distilleryimage10.s3.amazonaws.com/1c21feee5b4911e3a4d80e849028c7eb_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/d6057b165b4d11e39ba70a3e328747b8_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/4f8270305b4d11e389310e362925b2d5_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/8d3a2c085b4b11e3ab4c12ca54d8f342_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage2.s3.amazonaws.com/382915805b4b11e3b5c00e9e2a89cc53_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage7.s3.amazonaws.com/e0596b165b4a11e39c4d0ee0497810b2_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage1.s3.amazonaws.com/07ca8a4a5b6411e3a1741240743416c5_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage4.s3.amazonaws.com/c6d561485b6011e398920ee3b99546be_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage8.s3.amazonaws.com/441215805b6011e3bc620eb29dbbaea3_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage6.s3.amazonaws.com/8e7faf6a5b5b11e380d712128faa8e82_5.jpg)"></a>

        </li>
        <li> <a style="background-image: url(http://distilleryimage7.s3.amazonaws.com/87c3a7605b8a11e3a33e1264bd1e5b12_5.jpg)"></a>

        </li>
    </ul>
</div>

And here is the CSS code:

{
    list-style: none;
    overflow-x: scroll;
    width: 800px;
    height:150px
}
.admin-shop-images {
    list-style: none;
    width: 1500px;
}
.admin-shop-images li {
    background-color: #f3efea;
    margin-right: 25px;
    width: 105px;
    height: 105px;
    float: left;
}
.admin-shop-images li a {
    display: block;
    height: 100%;
    width: 100%;
    background-position: center center;
    background-size: cover;
}
.admin-shop-images li:last-child {
    margin-right: 0;
}

Answer №4

Stumbled upon this amazing open source project: Simply Scroll v2. Sharing in hopes that it will benefit others. Feel free to customize the script or use it as a learning resource.

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

What about using CSS sprites in place of individual images?

After examining the code for some major websites, such as YouTube and Yahoo, I noticed that they tend to rely heavily on CSS sprites rather than individual image tags. Is this considered a best practice in web development? While using image tags with alt a ...

cssimagesprite

Creating a responsive design that adapts to various image sizes

In my API response, I am receiving images of various sizes. To display these images on my HTML page, I have created a table containing 4 images. To ensure responsiveness, I have set the width of the table to 100%, each row (tr) to 100%, each cell (td) to 2 ...

htmlcss

what is the best way to change background image in media query for various screen sizes?

I have a customized email template with a background image. The size of the image is 600px (width), and I have applied a class called back-img for styling purposes. I am looking to override this class specifically for all mobile screen sizes, including lan ...

htmlcssresponsive-designmedia-queries

Error: Angular encountered an unexpected token in the syntax

I am encountering an issue while trying to incorporate a user's profile updater on my website. Whenever I attempt to access a user's profile on the site, I run into this Angular error: main.ts:6 ERROR SyntaxError: Unexpected token 'e', ...

javascripthtmlangulartypescriptprofile

How to modify the appearance of the md-tab-header component in Angular2

Currently, I am working on a project that was passed down to me by a former colleague. It is a gradual process of discovery as I try to address and resolve any issues it may have. One particular element in the project is a md-tab-header with a .mat-tab-he ...

cssangular

Navigation bar text fails to display

Just starting out and trying to create a basic navigation bar, but I can't seem to get the links to show up. All that displays are the logo image and the hamburger icon. How can I make the links visible on the nav bar? Appreciate any help! <!DOCTYP ...

htmlcssnavbarbootstrap-5nav

Tips for disabling automatic browser scrolling to a specific div ID?

I have a webpage with a vertical accordion in the center to display content. Upon loading the page, the accordion is centered. However, when a user clicks on a tab, the entire page scrolls up, moving the tab to the top of the browser. Is there a way to pre ...

javascriptjqueryhtmlcssaccordion

Highly suggested CDN for Bootstrap Tab styling

I'm encountering an issue with bootstrap.min.css and tabs. Using: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> The page format looks correct, but switching tabs doesn't display the c ...

htmlcssbootstrap-4

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

Information flows from the Bootstrap 4 template

When viewed on a mobile device, the content extends beyond the page and a horizontal scrollbar appears. You can view my page by clicking this link. <div class="custom_content col-md-12"> <div class="container"> <div class="row"> ...

htmlcssbootstrap-4flexbox

What is the best way to add randomness to the background colors of mapped elements?

I am looking for a way to randomly change the background color of each element However, when I try to implement it in the code below, the background color ends up being transparent: { modules.map((module, index) => ( <div className='carou ...

javascriptcssreactjs

The FileReader.result is found to be null

Currently, I am in the process of setting up a page that allows users to upload a txt file (specifically a log file generated by another program) and then modify the text as needed. Initially, my goal is to simply console.log the text, but eventually, I pl ...

javascripthtmlfile

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...

javascripthtmlcssbutton

What is the best way to choose a single expanded panel in Vuejs (vuetify) based on its index value?

I am encountering an issue with the expanded panels while using Vuetify in my Vue.js project. The problem arises when I perform a v-for loop over an array of objects and attempt to display expanded panels with external control. By external control, I mean ...

javascripthtmlvue.jsecmascript-6vuetify.js

How can the seating arrangement be optimized for a seating chart and what is the most effective way to transition away from a traditional table structure?

Currently, I am attempting to create a dynamic seating chart on a webpage within an asp.net-mvc site using data retrieved from a database. Initially, I used a table to organize the grid layout of rows and columns, which resembled this structure: The datab ...

jqueryhtmlcssasp.net-mvchtml-table

Rearrange divs from left to right on mobile display

I need help creating a header bar with three elements as shown below https://i.sstatic.net/4njuk.png When viewed on mobile, I want the menu (toggle-icon) to shift left and the logo to be centered. I attempted using push and pull with no success. Is there ...

htmlcssbootstrap-4

Include the attribute exclusively for the initial division within a group of corresponding elements

Looking to change the appearance of this HTML code without being able to edit it directly? <form method="POST" id="go123pago"> <div align="center" style="width:220px"> <div style="float:left;padding:10px;width:190px"> ...

jqueryhtmlcss

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

I'm struggling with the code in my component, which looks like this: @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: string = "alert" @HostBindi ...

cssangulartypescript

Struggling to make the clip-path function properly with the logo on my website

Looking to add some animation to my company logo, giving it the appearance of being drawn. I have the original SVG with the logo paths and separate paths set up to act as a mask for the animation. However, I'm encountering an issue where the mask doe ...

jquerycssanimationsvg

Appear and disappear div

I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...

javascriptjqueryhtml