How to add different images to scroll?
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>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="description" content="Slider Template">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Template</title>
<link href="search-results-panels.css" rel="stylesheet" type="text/css">
<a name="top"></a>
<script>
$(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>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="description" content="Slider Template">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Template</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><a name="top"></a>
<script>
$(document).ready(function(){
$('#content').load("search-tab.html");
});
</script>
</script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script><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></div>
<div class="nav-menu-bar font">
<div class="nav-menu-bar-centre-panel"><div class="scrollable-nav-container">
<div>
<div><div class="scrollable-nav-container">
<div class="arrow-left"></div>
<div class="scrollable-nav-inner">
<nav class="scrollable-nav">
<ul>
<!-- Start main-nav -->
<nav class="main-nav"> </nav>
<!-- end main-nav --></div>
</div>
<div class="container">
</div>
</div>
<section class="content_wrapper">
<div class="home"> </div>
<!-- home -->
<div id="layer_1" class="close_all">
<div class="layer_1_content"> </div>
</div>
<!-- layer_1 --></main>
</div></main>
</div></div>
<!-- Carousel -->
<div class="main-container background-fade">
<div class="menu-strip"><div class="float-right"></div>
<div class="test clear-the-float main-area"> </div></div>
<div>
<div class="app">
<ul class="hs full">
<li class="item"><img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>
<div class="testtest"> </div>
</li>
<li class="item"><img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>
<div class="testtest"> </div>
</li>
<li class="item"><img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>
<div class="testtest"> </div>
</li>
<li class="item"><img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>
<div class="testtest"> </div>
</li>
<li class="item"><img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>
<div class="testtest"> </div>
</li>
<li class="item"><img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>
<div class="testtest"> </div>
</li>
</li>
</ul>
</div>
</div>
</div>
<script src="js/modernizr-3.5.0.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
<!-- scroll menu bar script -->
$(document).ready(function(){
$( ".scrollable-nav" ).draggable({ axis: 'x' });
});
<!-- end menu scroll top bar script -->
</body>
</html>
</body>
</html>
AdChoices