Skip to main content
February 28, 2017
Answered

Interactive banner

  • February 28, 2017
  • 4 replies
  • 1401 views

Hi, been out of the game for a while and now getting back into it all! I have a customer who likes the interactivity of the scroll banner on the home page without going to another page. The example page they like is link is http://www.boltonbros.co.uk and you click the arrows to move the banner along. It has real text, images and links / buttons on each banner cycle. Is there a template in Dreamweaver I can use or some coding I can add? Thanks guys, I feel a right newby but so much has changed since I last played!

This topic has been closed for replies.
Correct answer osgood_

Sure, no problem!

Thanks!


This is pretty near to the original example. Needs a bit of work but its 90% there. If you can write a bit of coding you can usually find something out there and adapt it to your own requirements, or pretty close.

<html>

<head>

<title>Slider</title>

<style>

body {

font-family: helvetica, sans-serif;

font-size: 13px;

line-height: 20px;

margin: 0;

}

* {

box-sizing: border-box;

}

img {

max-width: 100%;

height: auto;

}

.slider-container {

background-color: #f1f1f1;

padding: 50px 0 100px 0;

border-bottom: 1px solid #ccc;

}

@media screen and (max-width: 900px) {

.slider-container {

padding: 50px 0 0 0;

}

}

.slider-container h1 {

text-align: center;

padding: 0 0 30px 0;

font-weight: 400;

}

.information-boxes {

display: flex;

flex-wrap: wrap;

width: 100%;

}

.prev i, .next i {

font-size: 60px;

color: #666;

}

@media screen and (max-width: 900px) {

.prev i, .next i {

background-color: #000;

color: #fff;

padding: 0 10px;

}

}

.slider {

width: 95%;

margin: 0 auto;

overflow: hidden;

min-height: 400px;

position: relative;

padding: 0 75px;

}

@media screen and (max-width: 900px) {

.slider {

width: 100%;

padding: 0;

min-height: 300px;

}

}

@media screen and (max-width: 480px) {

.slider {

min-height: 200px;

}

}

.slider ul {

margin: 0;

padding: 0;

list-style: none;

position: absolute;

width: 400%;

height: 100%;

}

.slider li {

padding: 0;

margin: 0;

height: 100%;

overflow: hidden;

position: absolute;

}

.slider .image {

float: left;

width: 50%;

}

@media screen and (max-width: 900px) {

.slider .image {

float: none;

width: 100%;

}

}

.slider-wrapper{

position: relative;

}

.slider button {

position: absolute;

display: block;

box-sizing: border-box;

border: none;

outline: none;

top: 0;

bottom: 0;

color: #000;

margin: 0;

padding: 0;

text-align:center;

z-index: 2;

}

.slider button.prev {

left: 0;

background-color: transparent;

}

.slider button.next {

right: 0;

background-color: transparent;

}

.slider .content {

float: left;

width: 40%;

padding: 30px;

}

@media screen and (max-width: 900px) {

.slider .content {

float: none;

width: 100%;

padding: 20px;

}

}

.info {

width: 25%;

padding: 20px;

background-color: #f1f1f1;

}

@media screen and (max-width: 900px) {

.info {

width: 100%;

}

}

.red {

background-color: red;

color: white;

}

</style>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<script>

$(function() {

var ul = $(".slider ul");

var slide_count = ul.children().length;

var slide_width_pc = 100.0 / slide_count;

var slide_index = 0;

ul.find("li").each(function(indx) {

var left_percent = (slide_width_pc * indx) + "%";

$(this).css({"left":left_percent});

$(this).css({width:(100 / slide_count) + "%"

});

});

// Listen for click of prev button

$(".slider .prev").click(function() {

console.log("prev button clicked");

slide(slide_index - 1);

if(slide_index == 1) {

$(".red").css({"background-color":"red", "color":"white"});

$(".green , .blue , .orange").css({"background-color": "#f1f1f1" , "color" : "black"});

}

if(slide_index == 2) {

$(".blue").css({"background-color":"blue", "color":"white"});

$(".red , .green, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});

}

if(slide_index == 3) {

$(".green").css({"background-color":"green", "color":"white"});

$(".red , .blue, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});

}

});

// Listen for click of next button

$(".slider .next").click(function() {

console.log("next button clicked");

slide(slide_index + 1);

if(slide_index == 0) {

$(".blue").css({"background-color":"blue", "color":"white"});

$(".red , .green, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});

}

if(slide_index == 1) {

$(".green").css({"background-color":"green", "color":"white"});

$(".red , .blue, .orange").css({"background-color": "#f1f1f1" , "color" : "black"});

}

if(slide_index == 2) {

$(".orange").css({"background-color":"orange", "color":"white"});

$(".red , .blue, .green").css({"background-color": "#f1f1f1" , "color" : "black"});

}

});

function slide(new_slide_index) {

if(new_slide_index < 0 || new_slide_index >= slide_count) return;

var margin_left_pc = (new_slide_index * (-100)) + "%";

ul.animate({"margin-left": margin_left_pc}, 400, function() {

slide_index = new_slide_index

});

}

});

</script>

</head>

<body>

<div class="slider-container">

<h1>Slider</h1>

<div class="slider_wrapper">

<div class="slider">

<ul>

<li>

<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/blue_morpho_butterfly_189907.jpg"/></div>

<div class="content"><h2>Slide 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iure libero praesentium quisquam sed tempora.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>

</div>

</li>

<li>

<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/monarch_butterfly_193610.jpg"/></div>

<div class="content"><h2>Slide 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>

</div>

</li>

<li>

<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/background_with_flower_and_butterfly_201511.jpg"/></div>

<div class="content"><h2>Slide 3</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, architecto dicta illum nisi quisquam voluptas?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>

</div>

</li>

<li>

<div class="image"><img src="http://images.all-free-download.com/images/graphiclarge/butterfly_flower_01_hd_pictures_166973.jpg"/></div>

<div class="content"><h2>Slide 4</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, architecto dicta illum nisi quisquam voluptas?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus illum odit quia unde vitae voluptates?</p>

</div>

</li>

</ul>

<button class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></button>

<button class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></button>

</div>

<!-- end slider-wrapper -->

</div>

<!-- end slider -->

</div>

<!-- end slider-container -->

<div class="information-boxes">

<div class="info red">

<h2>Slide 1</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

</div>

<div class="info blue">

<h2>Slide 2</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

</div>

<div class="info green">

<h2>Slide 3</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

</div>

<div class="info orange">

<h2>Slide 4</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsam iure velit vitae. Et, facere!</p>

</div>

</div>

</body>

</html>

4 replies

March 1, 2017

Guys, looks like I've got plenty of solutions to consider and I want to say 'thanks' to all and glad I posted the question on here and got great feedback. Will give the most obvious / easiest a go and get cracking on catching up on my web skillz for sure! Will keep you posted.

Thank you!

Preran
Community Manager
Community Manager
March 1, 2017

Hi furydesigns,

For the benefit of other folks visiting this post in the future, can you mark the answer that you finally used as Correct?

All of these are good solutions to be sure.

Thanks,

Preran

March 1, 2017

Sure, no problem!

Thanks!

pziecina
Legend
February 28, 2017

I agree with Rob, this could be done using a css animation content slider with a little javascript -

Change the reveal on hover to be part of the normal flow -

<!doctype html>

<html lang="en">

<head>

<title>Examples: Content Switcher</title>

<meta charset="utf-8">

<meta name="description" content="An example of a content switcher with next and previous navigation links" />

<script>

var init = function() {

  var slider = document.getElementById('slider');

  var one = document.getElementById('one');

  var two = document.getElementById('two');

  var three = document.getElementById('three');

  var four = document.getElementById('four');

 

  var next = document.getElementById("next");

  var prev = document.getElementById("prev");

 

  next.addEventListener( 'click', function(){

           

      var margin = window.getComputedStyle(slider).getPropertyValue("margin-left");

     

      switch (margin) {

        case "0px":

            slider.style.marginLeft = "-600px";

            one.style.opacity = "0";

            one.style.webkitTransform = "scale(0)";

            one.style.transform = "scale(0)";

            two.style.opacity = "1";

            two.style.webkitTransform = "scale(1)";

            two.style.transform = "scale(1)";

            break;

        case "-600px":

            slider.style.marginLeft = "-1200px";

            two.style.opacity = "0";

            two.style.webkitTransform = "scale(0)";

            two.style.transform = "scale(0)";

            three.style.opacity = "1";

            three.style.webkitTransform = "scale(1)";

            three.style.transform = "scale(1)";

            break;

        case "-1200px":

            slider.style.marginLeft = "-1800px";

            three.style.opacity = "0";

            three.style.webkitTransform = "scale(0)";

            three.style.transform = "scale(0)";

            four.style.opacity = "1";

            four.style.webkitTransform = "scale(1)";

            four.style.transform = "scale(1)";

            break;

        case "-1800px":

            slider.style.marginLeft = "0px";

            four.style.opacity = "0";

            four.style.webkitTransform = "scale(0)";

            four.style.transform = "scale(0)";

            one.style.opacity = "1";

            one.style.webkitTransform = "scale(1)";

            one.style.transform = "scale(1)";

            break;

      }

  }, false);

  prev.addEventListener( 'click', function(){

     

      var margin = window.getComputedStyle(slider).getPropertyValue("margin-left");

      switch (margin) {

        case "0px":

            slider.style.marginLeft = "-1800px";

            one.style.opacity = "0";

            one.style.webkitTransform = "scale(0)";

            one.style.transform = "scale(0)";

            four.style.opacity = "1";

            four.style.webkitTransform = "scale(1)";

            four.style.transform = "scale(1)";

            break;

        case "-600px":

            slider.style.marginLeft = "0px";

            two.style.opacity = "0";

            two.style.webkitTransform = "scale(0)";

            two.style.transform = "scale(0)";

            one.style.opacity = "1";

            one.style.webkitTransform = "scale(1)";

            one.style.transform = "scale(1)";

            break;

        case "-1200px":

            slider.style.marginLeft = "-600px";

            three.style.opacity = "0";

            three.style.webkitTransform = "scale(0)";

            three.style.transform = "scale(0)";

            two.style.opacity = "1";

            two.style.webkitTransform = "scale(1)";

            two.style.transform = "scale(1)";

            break;

        case "-1800px":

            slider.style.marginLeft = "-1200px";

            four.style.opacity = "0";

            four.style.webkitTransform = "scale(0)";

            four.style.transform = "scale(0)";

            three.style.opacity = "1";

            three.style.webkitTransform = "scale(1)";

            three.style.transform = "scale(1)";

            break;

      }

  }, false);

};

window.addEventListener('DOMContentLoaded', init, false);

</script>

<style>

/* ------------------------------------ */

/* --- GENERAL

/* ------------------------------------ */

* {

    box-sizing: border-box;

}

body {

    font-family: "helvetica", "sans-serif";

    font-size: 100%;

    margin: 0;

    padding: 0;

}

.container {

    max-width: 600px;

    margin: 2em auto;

    overflow: hidden;

}

/* ------------------------------------ */

/* --- SLIDER/SWITCHER

/* ------------------------------------ */

.slider {

    width: 2400px;

    position: relative;

    z-index: 1;

    margin-left: 0px;

    -webkit-transition: margin-left 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;

            transition: margin-left 0.5s ease-in-out, transform 0.5s ease-in-out;

}

/* ------------------------------------ */

/* --- CONTENT

/* ------------------------------------ */

.content {

    width: 600px;

    height: 400px;

    float: left;

    text-align: center;

    padding: 2em 0;

    border-radius: 1%;

}

.one {

    background: #c66;

    opacity: 1;

   

    -webkit-transform: scale(1);

        -ms-transform: scale(1);

            transform: scale(1);

   

    -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;

            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}

.two {

    background: #6c6;

    opacity: 0;

   

    -webkit-transform: scale(0);

        -ms-transform: scale(0);

            transform: scale(0);

    -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;

            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}

.three {

    background: #66c;

    opacity: 0;

    -webkit-transform: scale(0);

        -ms-transform: scale(0);

            transform: scale(0);

    -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;

            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}

.four {

    background: #cc6;

    opacity: 0;

   

    -webkit-transform: scale(0);

        -ms-transform: scale(0);

            transform: scale(0);

    -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;

            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;

}

/* ------------------------------------ */

/* --- ADDITIONAL CONTENT

/* ------------------------------------ */

.additional {

    padding: 1em 25%;

    position: absolute;

    bottom: -6em;

    background: rgba(0,0,0,0.3);

    color: #eee;

    font-weight: 100;

    -webkit-transition: bottom 0.5s ease-in;

            transition: bottom 0.5s ease-in;

}

.content:hover .additional {

    bottom: -1em;

}

/* ------------------------------------ */

/* --- NAVIGATION

/* ------------------------------------ */

.nav {

    font-size: 5em;

    width: 800px;

    position: absolute;

    margin: 1.5em 0 0 -100px;

}

.nav a {

    text-decoration: none;

    color: #444;

    font-weight: bold;

}

.prev {float: left;}

.next {float: right;}

</style>

</head>

<body>

<div class="container">

    <div class="slider" id="slider">

        <div class="content one" id="one">

            <h1>This is page 1</h1>

            <p class="additional">This is some additional information about page 1 that can be revealed on hover.</p>

        </div>

        <div class="content two" id="two">

            <h1>This is page 2</h1>

            <p class="additional">This is some additional information about page 2 that can be revealed on hover.</p>   

        </div>

        <div class="content three" id="three">

            <h1>This is page 3</h1>

            <p class="additional">This is some additional information about page 3 that can be revealed on hover.</p>   

        </div>

        <div class="content four" id="four">

            <h1>This is page 4</h1>

            <p class="additional">This is some additional information about page 4 that can be revealed on hover.</p>   

        </div>

    </div>

    <div class="nav">

        <a class="prev" id="prev" href="#">&#12296;</a>

        <a class="next" id="next" href="#">&#12297;</a>

    </div>

</div>

</body>

</html>

Nancy OShea
Community Expert
Community Expert
February 28, 2017

You can do something similar with Bootstrap's Carousel component in DW CC.

Below, I made 3 slight modifications to the HTML code.

  • I removed slide indicators.
  • Turned off auto scrolling (data-interval="0")
  • Created 2 columns per carousel item.

CODE:

<!doctype html>

<html langu="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 3.3.7</title>

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

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

<!-- Latest compiled and minified Bootstrap CSS-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<style>

.center-block { float: none }

</style>

</head>

<body class="container">

<div class="row">

<div class="col-sm-10 center-block text-center">

<h1>Bootstrap Carousel</h1>

<h2><em>Modified</em></h2>

</div>

<!--begin Bootstrap Carousel-->

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

<div class="item active">

<div class="col-sm-offset-1 col-sm-6"> <img class="img-responsive" src="http://lorempixel.com/600/400/nature/4" alt="..."> </div>

<div class="col-sm-4">

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur harum a labore eius corporis in accusamus praesentium delectus cum ipsa quisquam, quas incidunt rerum aliquam culpa totam odio numquam.</p>

<ul>

<li>Some Item</li>

<li>Some Item</li>

<li>Some Item</li>

<li>Some Item</li>

</ul>

<button class="btn btn-default">Button 1</button>

<button class="btn btn-success">Button 2</button>

</div>

</div>

<div class="item">

<div class="col-sm-offset-1 col-sm-6"> <img class="img-responsive" src="http://lorempixel.com/600/400/nature/3" alt="..."> </div>

<div class="col-sm-4">

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur harum a labore eius corporis in accusamus praesentium delectus cum ipsa quisquam, quas incidunt rerum aliquam culpa totam odio numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<button class="btn btn-lg btn-danger">Button 1</button>

<button class="btn btn-lg btn-warning">Button 2</button>

</div>

</div>

<div class="item">

<div class="col-sm-offset-1 col-sm-6"> <img class="img-responsive" src="http://lorempixel.com/600/400/nature/2" alt="..."> </div>

<div class="col-sm-4">

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur harum a labore eius corporis in accusamus praesentium delectus cum ipsa quisquam, quas incidunt rerum aliquam culpa totam odio numquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<button class="btn btn-lg btn-info">Button 1</button>

<button class="btn btn-lg btn-primary">Button 2</button>

</div>

<!--/item--></div>

<!--/inner--></div>

<!-- Left and right controls -->

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

<!--/carousel--></div>

<!--/row--></div>

<!--latest jQuery-->

<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous">

</script>

<!--Bootstrap-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Community Expert
February 28, 2017

Ask 3 web designers how to do something & you'll get 9 different answers .

Re: Bootstrap example

You can add some CSS to your custom stylesheet to make it fade rather than slide. 

See live demo below:

Bootstrap 3.3.7

Nancy

Nancy O'Shea— Product User & Community Expert
February 28, 2017

I think its referred to as a Carousel banner - I want to mix images / links and live text... any pointers would be appreciated - thanks!

Rob Hecker2
Legend
February 28, 2017

There are a lot of these out there that are free. Many are made with jQuery and are easy to install. You need to look at the demos to determine which one has the right feature set.

Google jQuery image slider, jQuery image carousel.

It is possible to create this effect using no javascript/jQuery, but the problem is moving the slides forward automatically. If you don't need the slides to do that, then a purely CSS3 solution is possible.

(Actually, CSS3 can handle automatic scrolling, but it's harder to set up)