Tips for automatically scrolling images horizontally in responsive layouts

Recently, I've been working on a website called . On the homepage, my portfolio images are arranged in a grid format using the <li> tag. I'm looking to align them side by side and have them scroll horizontally automatically, preferably with JavaScript or jQuery (no other libraries, please). It's also okay if there is a scrollbar present. Here is what I attempted so far:

.portfolio li {
  width: 438px !important;
  display:inline !important;
}

followed by

<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
    <li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
      <a href="BLAHBLAH" title="BLAHBLAH">
        <img src="BLAHBLAH" alt="" title="" >
      </a>
    </li>

Although this code snippet is simplified from the actual page content, testing it out didn't yield the desired results. Any suggestions on how to make this layout work?

javascriptcssimagescrollresponsive-design

Answer №1

A potential solution to your issue could be utilizing Flexislider, a responsive slider that may help address your problem.

Check out more about Flexislider here

Answer №2

It is recommended to remove the display:inline and width properties from the style attribute of your li element.

<ul id="thumbs" style="list-style:none;">
<li class="portfolio" style="opacity: 1;">
  <a href="BLAHBLAH" title="BLAHBLAH">
    <img src="BLAHBLAH" alt="" title="" >
  </a>
</li>



#works, #wrapper {
    overflow: visible;
}
body {
    overflow-x:auto;
}
#thumbs .portfolio {
    display:inline-block;
    width: 438px !important;
    float:none !important;
}
#thumbs {
    white-space:nowrap;
}
/* for ie 7*/
*:first-child+html #thumbs .thumb {
    display:inline;
    zoom:1;
}
/* for ie 6*/
*html #thumbs .thumb {
    display:inline;
    zoom:1;
}

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

Troubleshooting issue with Gulp watch on Node v4.6.0

I'm currently facing a frustrating situation. I had a project up and running smoothly with a functioning gulpfile.js file, everything was perfect until I updated node to version 4.6.0. When I tried to report this issue on Gulp's git repository, t ...

javascriptnode.jsgulpgulp-watchgulp-sass

Leveraging Global SCSS Variables in Next.JS with SASS

In my Next.js Application, I have a global CSS file named main.scss imported in the pages/_app.js file. _app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} ...

cssreactjssassnext.js

evaluate individual methods within a stateless component with unit testing

I am working with a stateless component in React that I need to test. const Clock = () => { const formatSeconds = (totalSeconds) => { const seconds = totalSeconds % 60, minutes = Math.floor(totalSeconds / 60) return `${m ...

javascriptunit-testingreactjsecmascript-6karma-runner

Storing values globally in NodeJS from request headers

What is the most effective way to store and access the value from a request header in multiple parts of my application? One approach could be as shown in the following example from app.js: app.get('*', (req, res) => { global.exampleHeader ...

javascriptnode.jsexpress

Retrieve items from an array using a series of nested map operations

When I execute the query below, it transforms the json data into objects - 1st level being a map (This works fine as expected) const customerOptions = () => { return customersQuery.edges.map(({ node: { id, name } }) => { return { key: id, text ...

javascriptarraysjson

What is the best way to use form input to filter an Observable?

Within my component, I have declared the variable "countries$": countries$!: Observable<Country[]>; To populate this variable with data from this API, I use the following code in the "ngOnInit" lifecycle hook: ngOnInit(){ this.countries$ ...

javascriptangulartypescriptrxjsobservable

Tips for generating an HTML template as a string using jQuery

I have developed a dynamic modal using plain JavaScript, triggered by a button click. This modal is controlled based on the attributes `data-open-hours` and `data-closed-hours` in the HTML. If you take a look at my demo, you will notice an issue. Let me e ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountered a Vue.js Vuex error: "Unable to dispatch function in context."

I have implemented a stopwatch function that can run the stopwatch as shown below : Stopwatch.vue <script> export default { data() { return { time: "00:00.000", timeBegan: null, timeStopped: null, stoppedDurat ...

javascriptvue.jsvuexsetinterval

Adjusting the line-height in CSS dynamically based on the length of characters using jQuery

I am facing an issue with the Twitter widget on my website where our company's latest tweet sometimes gets cut off if it exceeds a certain length. I want to dynamically adjust the line-height CSS property of the element based on the tweet's chara ...

phpjavascriptjquerycss

Show the advancement of a process as it runs in a pop-up window

Currently, I am working on revamping a webpage to give it a more modern look. However, I'm encountering some challenges when trying to add simple functionality to a modal window. On the webpage, users upload a file, and upon clicking submit, a shell ...

javascriptphpajaxtwitter-bootstrap

Backend JS error found in Joomla 3.0 Component

Currently, I am working on developing a custom Joomla 3.0 component. To begin, I started by downloading the com_hello component sample from the official Joomla documentation. However, I've encountered an issue when trying to check the checkbox in the ...

phpjavascriptjoomlajoomla3.0

Is there a method to verify the consumability of an API without having to make a direct request to it?

I'm working on an idle timer feature where the API will be called to update data once the timer runs out. How can I check if the API is still usable without actually sending a request? ...

javascriptajaxapi

Mysterious area located within a flexbox set to display items in a column arrangement

There is a mysterious gap within a flexbox that has a column direction. In the header-left div, I have set up a flexbox with a column direction. It consists of three nested divs: left_text_heading, hero-img, and hero-text. Strangely, there is an unknown s ...

htmlcssflexbox

How can we automatically redirect users to an external website based on their responses to a specific question in SurveyJS?

Within my SurveyJS json, I have a radiogroup question that prompts users to make a choice. If they select a specific option, I'd like to redirect them to a different page. Otherwise, I want them to continue with the survey. Is this achievable? (The s ...

javascriptreactjsnext.jssurveyjs

AngularJS does not update values properly if there is a style applied to the parent container

I'm struggling to find the best approach to handle this situation. This is how my AngularJS code looks: <span class="something" ng-hide="onsomecondition"> {{value}} </span> .something{ text-align:left; padding:10px;} Issue: The value ...

javascriptcssangularjs

Understanding the hierarchy of LESS css class structure is crucial for

In my chat contact list, each contact can have a different state represented by classes: .online .offline .online .selected .offline .selected Here are the corresponding styles (example): .online { background-color: #fff; p { color: #000; } } . ...

cssless

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

javascriptphphtmldatabasecombobox

What is the best way to create a time delay between two consecutive desktop screenshot captures?

screenshot-desktop is a unique npm API that captures desktop screenshots and saves them upon request. However, I encounter the need to call the function three times with a 5-second delay between each call. Since this API works on promises, the calls are e ...

javascriptnode.jsnpm

Need to ensure that an AJAX form doesn't resubmit without the need for a page

Encountering a peculiar mystery issue here... I have created a button on a webpage that triggers a form submission. The form is enclosed within a DIV, which dynamically updates to display the modified data. (this is embedded in a smarty template) form: ...

javascriptphpjqueryhtmlajax

What is the best way to modify CSS animation property without causing any disruptions?

Could you help me with modifying this CSS animation? I want to adjust the animation-iteration-count to 1 only when a certain property, status, is added to the element. Currently, the animation is not working as expected. For example: setTimeout(() => ...

htmlcss