Highlighted

How to add different images to scroll?

Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

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?

photos.png

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>

Views

941

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to add different images to scroll?

Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

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?

photos.png

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>

Views

942

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 04, 2019 0
Mentor ,
Jan 04, 2019

Copy link to clipboard

Copied

Do you want the carousel to be full width (based on the element it is inside of)?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 0
Explorer ,
Jan 04, 2019

Copy link to clipboard

Copied

Thank you all for your comments

ALsp

The carousel needs to be 1200px wide for desktop - (which I alter within the .app CSS I was testing it for mobile!), so that’s no issue.

1) The carousel I’m using is right, I need to be able to put different images within it!

Also

2) I have added a bit of text into the black panel at the bottom. The only problem for this bit is the text is always closer to the edge on the left-hand side of the panel. Not sure how to get the right-hand side to be the same gap? (new code attached)

Hope you can help

Thanks

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;

}

.panel-text {

    color: #FFFFFF;

    margin-left: 0px;

    margin-right: -2px;

    width: 182px;

    margin-top: 3px;

}

</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 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">

    <p class="panel-text">This is the contentbbbbbbbb fnnnnnnor Layout P Tag</p>

  </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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

Please put your work online so we can see exactly what you see.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 0
Mentor ,
Jan 04, 2019

Copy link to clipboard

Copied

Hi Tim,

Tell me the truth... you grabbed this code online, didn't you? You did not write it from scratch. Frankly, the code is a mess and should be discarded. You need to start over, and you need to make some important decisions.

1. You need to admit to yourself what your coding skill level is

2. You need to either grab a free complete script and related markup and copy it

3. If all else fails, you need to buy yourself some time by either using an extension or hiring a web developer

Honesty is important here. No one is going to judge you.

This is what I get when I take your code and pull out the most egregious errors:

http://projectseven.com/testing/adobe-forum/cross/index-2.htm

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 1
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

I counted 4 separate references to the jQuery core library. 

.  

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 0
Mentor ,
Jan 04, 2019

Copy link to clipboard

Copied

Yeah. Those went along with the 3 or 4 additional body head and html tags I removed. It quickly became an exercise in futility.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

To make sure that all of the good commercial extensions for Dreamweaver get a mention, have a look at a very much advanced version of a swiper at https://www.dmxzone.com/go/33301/app-connect-swiper/

This is the product that I use very successfully.

Edit: Unlike the other poster promoting his wares, I have no financial interest in mentioning this product.

Edit2: Here is a full screen version of the swiper https://showcase.wappler.io/SwiperFullscreen/. Notice the little 'parallax' effect?


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 1
Adobe Community Professional ,
Jan 05, 2019

Copy link to clipboard

Copied

!i!i!i!i!i BOYS PLEASE STOP i!i!i!i!i!

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 3
Mentor ,
Jan 05, 2019

Copy link to clipboard

Copied

Gosh, if only it were that simple, Nancy. I would, but Ben has made some serious accusations against me. He needs to prove them or apologize. Since this is a highly public forum, I will not have my name and reputation sullied. He needs to apologize publicly, and then we can go back to our normal and harmless bantering.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
LEGEND ,
Jan 05, 2019

Copy link to clipboard

Copied

Everyone thats anyone in web development knows the commercial swiper you are refering to  is a free script available if you Google for it. DMX has just put it into a UI for DW, which if you know how to copy and paste you can freely obtain from the original developer of the script who made it open source and freely available to anyone. Personally l find it somewhat dubious for a commercial builder of extensions  to put other developers open source work into a UI and start charging for it.

I think if youre going to pay for something at least pay for something that has been uniquely built from the ground up and is not free if you know where to look.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
Adobe Community Professional ,
Jan 05, 2019

Copy link to clipboard

Copied

To name an even more well known free bit of script, Bootstrap, why would anyone pay for that? Have a look here https://www.dmxzone.com/go/33143/app-connect-bootstrap-4/

Yet there is a huge market for these products.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
LEGEND ,
Jan 05, 2019

Copy link to clipboard

Copied

Im sure there is a huge market and that is not questionable. The question is integrity and as we all know when money is the objective that seems to go out of the window very quickly and code of honour disappears.

I still find it somewhat distastful to make money commercially in what could be conceived to be potentially or hoped for large scale sales in the shortest amount of time  possible out of an open source solution which was given to the community to use with l suspect integrity.

Its a bit like buying an image from a commercial photographic library and applying it to multiple commercial posters or t-shirts which is not allowed in most cases, even though you can use it as many times as you like for 'personal' projects which you are paid for.

Im not sure DMX needs to sully their reputation to be honest as they have no need to use open source solutions and charge for them given they have skillful developers onboard capable of producing unique products.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
Adobe Community Professional ,
Jan 05, 2019

Copy link to clipboard

Copied

DMXzone have in the past often based their extensions on freely available scripts. Off hand I can think of their calendar, Google maps and dropzone extensions. Probably more than that.

That is not the issue though. The point is that I, along with many other developers, want time saving methods for our projects. I can incorporate a Swiper within a couple of minutes as you can see here Using App Connect Swiper - YouTube.

If I were to use http://idangero.us/swiper/get-started/​, it would take me much longer, especially if it were the first time, trying to figure out which parts of the scripts that I want to use. With the DMXzone extension, I can chop and change with a click and see the result realtime in Dreamweaver.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
LEGEND ,
Jan 05, 2019

Copy link to clipboard

Copied

I understand that but a little more transparency as to what one is paying for wouldnt go a miss, its the UI, predominately, not the actual free script/s, which do the main objective of the solution required and as you say  DMX incorporates in its products on ocassions.

I doubt that many, even those using the DMX products, would even know unless they care to open the script, which there is no need to usually and read the credits as to who actually created them.

What l object to personally is a company dressing something up as though it looks like its all been produced by themselves, calling it something different and then selling it on to make a profit from mainly some other developers open source code. Maybe the developer is getting a financial kick-back, one would hope so.

This is nothing to with development, its about ethics, if you have any and as already said once money is involved ethics takes a back seat for many an individual and company alike.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
Adobe Community Professional ,
Jan 05, 2019

Copy link to clipboard

Copied

I don't disagree.

I have come to accept their concept. In fact, I have gone to the free scripts when I have wanted to solve a problem. So, in a way, I am glad that the scripts are not completely proprietary.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
Mentor ,
Jan 05, 2019

Copy link to clipboard

Copied

Programming is a funny business. Writing a desktop app, in many ways, is clinical. A lot of busy work. 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. This is why there is a boatload of free plugins and the like floating around the web these days. jQuery (and in a much smaller way, Bootstrap) has exceeded its mission. Not only has it made JavaScript solutions easier for the masses to use, it has opened up a market for people that ordinarily could not write complex scripts to do all sorts of things - including writing plugins. This is why it is so imperative to still understand JavaScript in order to assess the quality of such plugins. jQuery has also made it much easier to make certain types of Dreamweaver extensions. If you make the assumption that jQuery takes the guesswork out of, or obviates the need for quality control, you risk sliding into a trap. This is why a good artist, when (legally) copying a masterwork, always starts at the beginning and never in the middle .

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
Mentor ,
Jan 05, 2019

Copy link to clipboard

Copied

My reply to Ben was deleted by a moderator. There was nothing in it that should have warranted rejection - unless someone is afraid of the truth. There was nothing profane and there no untruths written. Here is a synopsis that cannot possibly be rejected without an agenda:

---------------------------------------------------------

In response to Ben ignoring my recommendation of using a jQuery plugin as a solution to the original poster, with an alternative of seeking an extension as a possible solution. And then Ben proceeding to link to a Wappler page.

---------------------------------------------------------

And here is a programmed from the ground up full-screen slide show that can be embedded in a page:
http://projectseven.com/products/galleries/fss/tutorials/thumb-drive/finished/index.htm

And I'm afraid I don't see a "little parallax effect"... which are really not easy to simulate on a web page. But perhaps this could be considered a little parallax effect?
http://projectseven.com/products/staging/bse/test-03.htm

You never know.

But I digress...

Do you really want to be childish, Ben? I know we make top-quality extensions. I'm not trying to sell anything here. I'm presenting options. All a user has to do is search google for Dreamweaver extensions and the can make their own choices. You have been a fan of DMX Zone for years... and there is nothing wrong with that. Murray Summers used to recommend our extensions all the time (back when this forum was actually a vibrant community). But now you are promoting Wappler, which rather than being a Dreamweaver extension, is a competing program. I'm kind of amazed that you would do that on a Dreamweaver forum owned by Adobe.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
LEGEND ,
Jan 05, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
Mentor ,
Jan 05, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 05, 2019 0
Explorer ,
Jan 06, 2019

Copy link to clipboard

Copied

LOL, OK well, I am no Dreamweaver expert! I am a graphic designer and used to use Adobe Muse! So Dreamweaver is a big step-up,.

I am only creating a rough website design as I am setting up my own separate company which is not within a design. So I am laying out how I want my site to look, and then will get a professional coder designer to complete it.

By laying out my website it has allowed me to spot  errors in how I want each page to be designed and has allowed me to process my idea further than just having a web designer it for me

Yes, I know there are lots of errors within the code, but the layout of the website works so the coder can see what I want and then will go forward.

I have learnt a lot already using CSS and dreamweaver, but it is a big learning curve and adding query code from other website is not easy when your not a coder!

Tim

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
Explorer ,
Jan 06, 2019

Copy link to clipboard

Copied

also I was only asking how to add separate images to the scroller that I am using at the moment. The scroller is prefect in how I want it to work I just need to change the images! as I said we are not all professionals in every part of the adobe software!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
Adobe Community Professional ,
Jan 06, 2019

Copy link to clipboard

Copied

It looks like you are using the Owl Carousel​. According to the Basic Demo​, the markup structure should look like

<

div class="owl-carousel owl-theme">

  <div class="item"><h4>1</h4></div>

  <div class="item"><h4>2</h4></div>

  <div class="item"><h4>3</h4></div>

  <div class="item"><h4>4</h4></div>

  <div class="item"><h4>5</h4></div>

  <div class="item"><h4>6</h4></div>

  <div class="item"><h4>7</h4></div>

  <div class="item"><h4>8</h4></div>

  <div class="item"><h4>9</h4></div>

  <div class="item"><h4>10</h4></div>

  <div class="item"><h4>11</h4></div>

  <div class="item"><h4>12</h4></div>

</div>

where the highlighted part can be replaced by an image.

At the moment, you have got the same image in a slightly altered markup, namely

<img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>

If you changed the image in each case, you will find that you will have different images showing.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
LEGEND ,
Jan 06, 2019

Copy link to clipboard

Copied

BenPleysier  wrote

At the moment, you have got the same image in a slightly altered markup, namely

<img src="../eventify-2019/images/small-hear-non-active.svg" alt="" class="heart-small"/>

If you changed the image in each case, you will find that you will have different images showing.

That would be the most obvious answer but Tim mentions in his first post that he is using css to set the background image/s so I'm wondering if something more is required here.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
Adobe Community Professional ,
Jan 06, 2019

Copy link to clipboard

Copied

You may well be right, but I had a look through the style rules and found no indication of that. It could be that hes has the images in search-results-panels.css. It's hard to say.

If Tim only wants to do a design layout and hire a coder for the actual site, he may be better off using a program like Adobe Spark, it seems to be a favourite among Adobe non-coders. Even Adobe newsletters are produced using Spark.

Which makes me wonder.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
Mentor ,
Jan 06, 2019

Copy link to clipboard

Copied

This is his code, semi-corrected and rendered:

http://projectseven.com/testing/adobe-forum/cross/index-2.htm

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
ALsp LATEST
Mentor ,
Jan 06, 2019

Copy link to clipboard

Copied

Hi Tim,

Based on your code, the scroller is not perfect. And there will be problems. How about if you point to the URL where you found the scroller. If you can post that, I will put it in a page along with nice instructions of what to do in order to add content around it. Otherwise I promise you are spinning your wheels.

If you want (it is your choice), I can set up a slider using one of our extensions and you can use it for free. Here is an example:

http://projectseven.com/testing/adobe-forum/cross/

The only coding required were the handful of exception CSS rules in the head.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 06, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

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>

<html lang="en">

<head>

<meta charset="utf-8">

<title>CSS Scrolling Background</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<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 class="container">

<div class="sliding-background"></div>

</div>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 1
Mentor ,
Jan 04, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 0
Adobe Community Professional ,
Jan 04, 2019

Copy link to clipboard

Copied

jQuery Carousel Plugins

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

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 1
Mentor ,
Jan 04, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 04, 2019 0