We Keep Coding

How can I make a slider like in the image? Scrollable and with text and images

I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v

I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.
https://prnt.sc/26mtuw6
Although not exactly the same, our latest project section on this site is an example
http://paul-themes.com/html/liarch/home-default.html

If you wish to make a design like the img below :
For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)
1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)
2) you will need to make that container scrollable with a overflow-x:scroll
3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates
5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container
6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)
This is a quick example I made :
Here is the code of my example
HTML :
CSS :

Changing a backgroundImage set via JavaScript using a CSS media query

I have a responsive menu on my website. In full size, hovering over a button changes the background of the whole menu (not the button!). As I believe that it is impossible to change the background of a div on hovering over one of its child elements via CSS (please correct me if I'm wrong), I do this via JavaScript. For each menu button, I have a function like the following. Each button gives a different background image.
function arme() {
if (document.documentElement.clientWidth > 590) {
var bild = "url('" + bildliste[3] + "')";
document.getElementById('auswahlbox').style.backgroundImage=bild;
}
}
As you can see, for lower resolutions (> 590px), the background of the menu does not change because the menu looks different then. The background then is always the same image. CSS looks like this:
#media only screen and (max-width: 590px) {
#auswahlbox { background:url(images/koerperbilder/koerperbg.jpg);
}
If I load my website in full size and then make the viewport smaller, the background of the menu changes to the image that is set via CSS. That's how it's supposed to work.
However, now to my problem: If I load my website in full size, hover over a random button (thus activating the JavaScript function above) and then make the viewport smaller, the background doesn't change. It stays the way it was set by hovering over the button. Apparently, a backgroundImage that was set via JavaScript beforehand can't be changed back by a simple CSS media query like the one above.
My question is: How can I change a backgroundImage that was set via JavaScript using a CSS media query? And if that is not possible, how can I solve my dilemma?
Right now, this problem is ruining the user experience. Since all other rules of the media query get applied (among them background-position and background-repeat), everything falls apart whenever someone resizes the viewport after hovering over a button. I wonder if someone can help.
Thank you in advance - and sorry for my bad English.

As you have set backgroundImage property through JavaScript
document.getElementById('auswahlbox').style.**backgroundImage**=bild;
You should set same property in CSS also. So use following code
#media only screen and (max-width: 590px) {
#auswahlbox { **background-image**:url(images/koerperbilder/koerperbg.jpg);
}

CSS Sprites with jquery

I would like to control a css sprite with javascript/jquery. Based on a user input the image should move position.
The case: I have an image container with 400x400, but the image I want to show is 400x1200, so I can only display 400 in height at the time, but the width would be constant.
I would to like to display parts of the image when a user clicks a button. I have drawn an example to show what I want: http://0o2471.net/55070
In that mockup you have the image container which is 400x400 marked with black frame, the green background is the "image" that I want to display based on the user input. So let's say the user press the "Button bottom" then the bottom part would change its position to the center(image container.)
Any suggestions on how I do this? Which functions in jquery/javascript should I use? Is css sprites the best way? I don't need the whole code, just a few directions.

Use background-position CSS rule. JQuery code for this
$(element).css({'background-position' : '0 -100px'})

fadeIn background image on click

I have a working code that changes my document background image when links in my navbar are clicked. The background image changes instantly with no animation. How could I make the new background image fadeIn(); ?
js
$('.navigation a').click(function() {
currentBg = $(this).attr('href').replace('#', '') +'.jpg';
$('.background').css({'background-image':'url(images/skins/'+currentBg+')'});
});

I don't believe you can, the only way (that I know of) would be to have a block element (div for example) which has the background and that appears behind the rest of your content (positioned absolutely) and fade that in instead of switching backgrounds.

You cannot animate the background image changing its opacity.
May be you can have a image with required opacity at different sections and then animate the background position so that it gives a fadeIn behavior.
Take a look at this link it will help you.

There is no possiblity to fade the background image, you have to create a container and set its background image to let it fade in and fade out.

I've done something like this before by floating a foreground image on a separate div on top of the background image you'd like to 'fade' in and then creating a jquery fade-out effect on the foreground image.
You can use a similar trick to set solid text on a semi-transparent "background".
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

I agree with int0x90.
What you can do is this:
Stack your images in a div, style position absolute, style of each image position absolute
set an id for the div
add a class active, with a z-index of 10
set all inactive images in div z-index to 0
you can use the z-index to pull the image with the highest z-index to the top of the stack
add class active to the on-click of nav bar link and remove this class from the previous on click so that the image's z-index is set back to 0 and not overridden.
in jquery, you may now be able to use opacity change and the speed of the change
hope this helps get you started!

As many others already said, it's impossible unless you use a block element as background.
But if you only want an animation, you could have a .gif as background then when it's animation has finished replace it with the real Image so the .gif doesn't iterate itself

Connecting repeatable and non-repeatble backgrounds without a seam

I have a 700x300 background repeating seamlessly inside of the main content-div. Now I'd like to attach a div at the bottom of the content-div, containing a different background image that isn't repeatable, connecting seamlessly with the repeatable background above it. Essentially, the non-repeatable image will look like the end piece of the repeatable image.
Due to the nature of the pattern, unless the full 300px height of the background image is visible in the last repeat of the content-div's backround, the background in the div below won't seamlessly connect. Basically, I need the content div's height to be a multiple of 300px under all circumstances. What's a good approach to this sort of problem?
I've tried resizing the content-div on loading the page, but this only works as long as the content div doesn't contain any resizing, dynamic content, which is not my case:
function adjustContentHeight()
{
// Setting content div's height to nearest upper multiple of column backgrounds height,
// forcing it not to be cut-off when repeated.
var contentBgHeight = 300;
var contentHeight = $("#content").height();
var adjustedHeight = Math.ceil(contentHeight / contentBgHeight);
$("#content").height(adjustedHeight * contentBgHeight);
}
$(document).ready(adjustContentHeight);
What I'm looking for there is a way to respond to a div resizing event, but there doesn't seem to be such a thing. Also, please assume I have no access to the JS controlling the resizing of content in the content-div, though this is potentially a way of solving the problem.
Another potential solution I was thinking off was to offset the background image in the bottom div by a certain amount depending on the height of the content-div. Again, the missing piece seems to be the ability to respond to a resize event.

Another approach is to calculate the background-position style for the bottom and top DIVs based on the size of the content DIV. You can use negative positions to align the bottom of one to the top of another.
Yet another approach is to use a layered DIV approach in which the top, content and bottom are all children of a parent DIV that contains the background.
The benefit of these approaches is that it doesn't change the natural rendering of the content DIV simply for managing the background.
Example: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html

Could setting background-position: fixed in your css help? Then your bottom div could move, but its background image would remain fixed in relation to the top of the page. As more of your repeating image was revealed, so more of your bottom image would be hidden.
This would comes under the heading of "offset the background image in the bottom div by a certain amount depending on the height of the content-div", rather than "the content div's height to be a multiple of 300px under all circumstances".

You could try adding an event listener to the div:
var div = document.getElementById("content");
div.addEventListener("resize", adjustContentHeight, false);

If nothing needs to match up at the top, position the repeating image at the bottom of the div (so the overflow will spill over the top). Like this:
div#repeating { background: transparent url('/path/to/image') repeat left bottom; }