Adjustable jQuery banner automatically adjusts the size of the images and content to fit the available space

I am in need of a custom banner or the option to download one.

Here are the requirements for the banner:

  1. The ability to add images and text to the banner.
  2. Multiple images and text on each slide, varying in number per slide. For example, slide one may have two images and text on the sides, while slide two has three images and text.
  3. It is essential that if the images are small thumbnails, the text fills the blank areas around the image. The banner should be responsive to the content inside, such as a div element. If the image is large, the text should appear underneath or beside the image.
  4. Slide left or right functionality.
  5. Left and right navigation buttons, along with pagination.

For reference, take a look at this example: - check out their main banner at the top.

I have explored options online and tested the following:

- Flexslider: It meets most requirements but lacks responsiveness according to point 3. Unsure how to make it responsive.

- Orbit slider: Works well, but found flexslider easier to style.

Please note that this banner will not be used on mobile devices.

javascriptjquerycssbannerflexslider

Answer №1

It appears that finding a perfect solution may be challenging as perfection is subjective. However, with some knowledge of CSS, adapting the mentioned sliders to be responsive should not be too difficult. It might be worth experimenting with them based on your project needs. There are numerous free tutorials available online that can help guide you through this process.

If you're looking for a quicker solution, you could consider trying out this plugin:

You may also want to explore additional options here:

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

Efficiently storing images fetched via Ajax using JQuery

I have a page that loads multiple pictures asynchronously multiple times. Currently, I am doing the following: $('#map').append('<div id="'+(x.ID)+'"> <img id="pic" src ="'+x.src+'"> </div>'); H ...

ajaxcachingjquery

Customize the icon used for expanding and collapsing in AngularJS

I want to modify the icon (e.g., plus, minus) when clicking on an expand-collapse accordion. Currently, I am using the Font Awesome class for icons. While I know it can be easily achieved with jQuery, I'm wondering if there is a way to do this in Angu ...

javascriptangularjsfont-awesomeangularjs-ng-click

Displaying CSS source on a webpage using Polymer 2.0 style modules for sharing styles

I have implemented a style module using Polymer 2.0 (https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules). The styles are functioning properly in Firefox, but in Chrome, the CSS content is displaying as jumbled characters on t ...

csspolymer-2.0

Prevent the div from being selected when it is behind the overlay

I am trying to display an overlay on top of a div. Once the overlay is displayed, I want to prevent any interaction with the background div. Unfortunately, when I double click on the overlay, the background div becomes selectable. Could someone please in ...

jquerycssoverlay

Insufficient allocation - memory overflow in loopback.js

I encountered an issue while trying to fetch large data using loopback.js. The error message I received was: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory <--- Last few GCs ---> 45903 ms: Mark-sweep 1385.6 (14 ...

javascriptnode.jsnpmloopbackjs

Enhancing retrieved data with Node.js and MongoDB (utilizing Mongoose)

The current code snippet I am working with looks like this: User.find({ featuredMerchant: true }) .lean() .limit(2) .exec(function(err, users) { if (err) { console.log(err); return res.status(400).send({ message: errorHandl ...

javascriptnode.jsmongodbmongoose

How to import a 3D model with Three.js as a demonstration

I am currently working on a project that involves displaying a button labeled "Import 3d model". I want the user to be able to choose a 3ds/max/gsm 3D model to load and view on the screen. However, I am facing difficulty in implementing this functionality ...

javascriptthree.js3dsmax

I seem to be having trouble with my JavaScript code when attempting to search for items within

I want to implement an onkeyup function for a text input that searches for patient names from column 2 in my table. However, it seems to be not working properly as I don't get any results in return. Below are the snippets of what I have done so far. ...

javascripthtml

Having trouble with ng-click in AngularJS while using dataTables

I created a custom dataTables directive for AngularJS, and it's mostly working well. However, I'm facing an issue when trying to add a button to each row that will remove the respective row when clicked using ng-click. My suspicion is that the p ...

javascriptjqueryangularjsdatatables

Adding elements in increasing order based on the array values

I am implementing selectize.js, where the data is added through an array. My goal is to display the dropdown list in the order of DISPLAYORDER defined within the object. The code below generates the lists: option: function(item, escape) { var popular ...

javascriptarrayssortingselectize.js

Press anywhere else on the screen to dismiss the bootstrap menu

I've been attempting to find a solution for closing the Bootstrap menu when clicking outside of it in a mobile window size, but I just can't seem to make it work. I did manage to get it working when clicking one of the 'a' links using t ...

javascriptjquerycsstwitter-bootstrapmenu

Usage of Google Charts within an Ajax partial in Rails 3.1

My experience working with Google charts has been smooth so far, but I've hit a roadblock where I need to display a chart inside an Ajax-rendered partial. Nothing is showing up, and I suspect it's because the JavaScript trigger to build the char ...

javascriptjqueryajaxruby-on-rails-3.1google-visualization

Transmit blank data array in JSON format

After checking the array with var_dump and confirming that it contains data, I encountered an issue where json_encode was not sending any data. Here is the code snippet in question: for($i=0;$i<count($dados_atividades)-1;$i++) { $arr[$i+1][ ...

javascriptphparraysjson

Alternative form for non-javascript browsers in the absence of script

I'm currently working on a landing page for an upcoming product, and I've run into a bit of a snag. <form novalidate method="POST" class="subscribe-form"> <noscript> </form> <form method="POST" action="/ ...

javascripthtmlformsnoscriptclient-side-scripting

What is causing the Chrome Dev Tools to malfunction when using these CSS pseudo selectors?

Upon closer inspection, I realized that the issue with Chrome Dev Tools not live editing CSS was caused by the following lines of code: @media (max-width: 767px) { .projects-* .v-center.row { display: block; width: auto; } .projects-* .v-cent ...

cssgoogle-chrome-devtools

What is the best way to perform an AJAX request on Hackerrank using JavaScript?

As I dove into the Hackerrank example test, I experimented with various methods for making an AJAX call. XMLHttpReq, fetch, and others were attempted but none seemed to work; both XHR and fetch methods were unavailable. My first attempt was with fetch: as ...

javascriptnode.jsxmlhttprequest

Utilizing Ajax for form validation in Django with the ability to submit multiple times

After successfully implementing this view using dajax, I have found it to be quite messy. As I've been researching, it seems like a good practice to have your view in the view.py file. I attempted to follow this guide: but struggled to determine whic ...

jqueryajaxdjangosubmit

site.js problem

Recently, I decided to create my very own CS:GO gambling website. After successfully setting it up on my localhost using VPS, I moved on to getting a domain and finalizing everything. However, when attempting to run site.js, an error message popped up: [e ...

javascriptnode.jsdatabase

Is it possible to trigger an event for only one connected client instead of broadcasting it to all clients using socket.io?

I am seeking a way to send an event to just one connected client, rather than broadcasting it to all clients using io.emit(). ...

javascriptnode.js

Why doesn't express.js throw an error when the variable 'app' is used within its own definition?

When working with express.js, I find it puzzling that createApplication() does not throw an error. This is because it uses app.handle(...) within an anonymous function that defines the same variable 'app'. I attempted to replicate this in jsFidd ...

javascriptexpress