How to add different images to scroll?

Report · Jan 04, 2019

I am trying to add different images to a scrolling background. I can add the image as a background image in the CSS settings, but the problem in doing that is that it repeated the image each time as shown.

is there a way of having separate images instead?

I hope you can help, code below

Tim

------

<!DOCTYPE HTML>

<head>

<title>Template</title>

$(document).ready(function(){

$('#content').load("search-tab.html");

});

</script>

<style>

.testtest {

width: 118%;

height: 0px;

padding-top: 10px;

padding-bottom: 55px;

padding-left: 14px;

margin-left: -22px;

margin-top: 46px;

margin-bottom: -19px;

background-color: rgba(0,0,0,0.68);

}

.line1 {

font-size: 16px;

margin-top: 2px;

margin-left: 7px;

width: 170px;

color: rgba(255,255,255,1.00);

}

.line2 {

font-size: 15px;

margin-top: -12px;

margin-left: 7px;

width: 170px;

color: rgba(255,255,255,1.00);

}

.heart-small {

height: 50px;

margin-left: 119px;

margin-right: -9px;

padding-left: 12px;

margin-top: -6px;

}

li.item {

position: relative;

overflow: hidden;

}

.item .bottom-panel {

bottom: 0;

position: absolute;

width: 100%;

left: 0;

margin:0;

height: auto;

}

.item .bottom-panel p {

margin: 0;

padding-top: 0px;

padding-right: 10px;

padding-left: 10px;

padding-bottom: 6px;

}

.top-button {

margin: 0;

position: absolute;

right: 14px;

border-radius: 6px;

}

:root {

--gutter: 20px;

}

.app {

padding: var(--gutter) 0;

display: grid;

grid-gap: var(--gutter) 0;

grid-template-columns: var(--gutter) 1fr var(--gutter);

align-content: start;

}

.app > * {

grid-column: 2 / -2;

}

.app > .full {

grid-column: 1 / -1;

}

.hs {

display: grid;

grid-gap: calc(var(--gutter) / 2);

grid-template-columns: 10px;

grid-template-rows: minmax(50px, 1fr);

grid-auto-flow: column;

grid-auto-columns: calc(20% - var(--gutter) * 2);

overflow-x: scroll;

scroll-snap-type: x proximity;

padding-bottom: calc(.75 * var(--gutter));

margin-bottom: calc(-.25 * var(--gutter));

width: 1200px;

}

.hs:before,

.hs:after {

content: '';

width: 10px;

}

ul {

list-style: none;

padding: 0;

}

h1,

h2,

h3 {

margin: 0;

}

.app {

width: 500px;

height: 234px;

/* [disabled]background-color: #DBD0BC; */

overflow-y: scroll;

}

.event-title {

font-size: 36px;

margin-bottom: -25px;

margin-top: -16px;

padding-top: 11px;

padding-left: 0px;

font-weight: 400;

font-style: italic;

}

.hs > li,

.item {

scroll-snap-align: center;

padding: calc(var(--gutter) / 2 * 1.5);

display: table;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: #CBCBCB;

border-radius: 8px;

max-width: 1px;

background-image: url(business4.jpg);

background-repeat: no-repeat;

}

.item {

width: 220px;

min-width: 174px;

height: 145px;

margin-left: 1px;

}

.side-search-strip {

}.bottom-search-panel {

height: 93px;

background-color: #FA2E32;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

}

</style>

</head>

<!DOCTYPE HTML>

<head>

<title>Template</title>

$(document).ready(function(){

$('#content').load("search-tab.html");

});

</script>

$(document).ready(function(){

$('.hamburger').css('cursor','pointer').click(function() {

var status = $('.home').attr('class');

if(status === "home") {

$('#layer_1').show();

$('.home').addClass('display_none');

}

if(status === "home display_none") {

$('#layer_1 , #layer_2 , #layer_3').hide();

$('.home').removeClass('display_none');

}

});

$('.show_layer_1').click(function() {

$('.close_all').hide();

$('#layer_1').show();

});

$('.show_layer_2').click(function() {

$('.close_all').hide();

$('#layer_2').show();

});

</script

></head>

<body>

<div>

<ul>

</div>

</div>

</div>

</div>

</main>

</div></main>

</div></div>

<div>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

$(document).ready(function(){

$( ".scrollable-nav" ).draggable({ axis: 'x' });

});

</body>

</html>

</body>

</html>

Report · Jan 05, 2019

ALsp wrote
Writing a script, along with CSS and the markup to glue them together is the more challenging aspect of making an extension, as it's more of a creative endeavor. To test this, try to write full-featured image gallery for the web - without using anyone else's script or CSS.

Its what l do and find the most satisfying, challenging and interesting as it expands my knowledge. Not that lm much good at it but l can write stuff usually to cater for my own projects and needs.

What is most important to me is not just looking at the results of what some script/css does but to have a reasonable understanding how those results are achieved. Im in control and know to a reasonable standard what the code l write is going to do and what l can make it do.

I can take that knowledge and apply it to many other senarios which a free script or extension perhaps is not available for.

I think its just called being interested in what you are doing and aspiring to improve your ability and knowledge rather than looking upon what you are doing as just a stepping stone to doing something else you really aspire to do, that not being a developer.

Report · Jan 05, 2019

Yes. And that's why we do what we do the way we do it.

Report · Jan 04, 2019

This is a quick & dirty CSS background scroller. My single background image contains 3 image layers, each 1692px wide.

Alt-Web Demo: CSS Scrolling Background

<!doctype html>

<head>

<title>CSS Scrolling Background</title>

<style>

body {background:#000}

.container {

overflow: hidden;

}

/**3 panel background image**/

.sliding-background {

background: url("images/3-panel-bg.jpg") repeat-x;

height: 500px;

width: 5076px;

animation: slide 40s linear infinite;

}

@keyframes slide{

0%{

transform: translate3d(0, 0, 0);

}

100%{

transform: translate3d(-4230px, 0, 0);

}

</style>

</head>

<body>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 04, 2019

This is a quick & dirty CSS background scroller.

You said it

That would present some issues on small devices. I would recommend for a budget-less solution, a jQuery carousel.

Or an extension:

http://projectseven.com/products/tools/info-slider/demo.htm

Report · Jan 04, 2019

jQuery Carousel Plugins

https://www.jqueryscript.net/tags.php?/Carousel/

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 04, 2019

Nice. There should be at least one good one in there.

Adobe Community

How to add different images to scroll?