Interactive banner

Report · Feb 28, 2017

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!

Report · Feb 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!

Report · Feb 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)

Report · Feb 28, 2017

Thats a sophisticated carousel. It not only slides the images and text across but it also highlights the panel beneath it in a different colors plus it slides back an forth according to which image you are on plus it has swipe capabilities on mobile devices.

If you just need a simple craousel with images and text and a couple of arrows for going back and forth then you could adapt:

Cycle2 Non-Image Slides

There's plenty of options which cnabe included:

Cycle2 Demos

I think the url that you referenced is a bespoke solution, its nice.

Report · Feb 28, 2017

Its always a bummer when your client asks you for something you can't actually do. This ones good.

Report · Feb 28, 2017

The question is can the OP work from the examples?

Someone coming back to web development, will have a lot of catching up to do, as a lot has changed over the last few years. So no offence intended to the OP with the above comment.

Report · Feb 28, 2017

pziecina wrote
The question is can the OP work from the examples?

No, not if they want it to replicate the example.

pziecina wrote
Someone coming back to web development, will have a lot of catching up to do, as a lot has changed over the last few years. So no offence intended to the OP with the above comment.

Id go further - forget the example and lower your expectations, unless you want to pay someone it aint happening.

Report · Feb 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>

<head>

<title>Bootstrap 3.3.7</title>

<style>

.center-block { float: none }

</style>

</head>

<h1>Bootstrap Carousel</h1>

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

</div>

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

</ul>

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

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

</div>

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

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

</div>

</div>

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

</div>

</div>

</script>

</body>

</html>

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

Report · Feb 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 & Moderator

Report · Feb 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>

<head>

<title>Examples: Content Switcher</title>

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>

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

</div>

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

</div>

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

</div>

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

</div>

</div>

</body>

</html>

Report · Mar 01, 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!

Report · Mar 01, 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

Report · Mar 01, 2017

Sure, no problem!

Thanks!

Report · Mar 01, 2017

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>

$(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>

<h1>Slider</h1>

<ul>

<li>

<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="content"><h2>Slide 2</h2>

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

</div>

</li>

<li>

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

</div>

</div>

</div>

<h2>Slide 1</h2>

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

</div>

<h2>Slide 2</h2>

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

</div>

<h2>Slide 3</h2>

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

</div>

<h2>Slide 4</h2>

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

</div>

</body>

</html>

Report · Mar 01, 2017

Hi

I've just realized how the effect was done -

Tabbed panels, but instead of simply making the content appear, it slides the content in, and the content below the 'slideshow' are the tabs themselves -

<!DOCTYPE HTML>

<head>

<title>Tabbed Content Using checkbox</title>

body {

font-family: Cambria, Arial;

background: #333;

}

.tabs {

width: 100%;

max-width: 600px;

margin: 100px auto;

}

input {

opacity: 0;

}

label {

cursor: pointer;

color: #eee;

border-radius: 5px 5px 0 0;

padding: 1.5% 3%;

float: left;

margin-right: 2px;

font: italic 1em cambria;

}

label:hover {

background-color: #666;

}

input:checked + label {

background: #fff;

color: #333;

}

.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,

.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),

.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),

.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {

opacity: 1;

-webkit-transition: .3s;

}

.panels {

float: left;

clear: both;

position: relative;

width: 100%;

background: #fff;

border-radius: 0 10px 10px 10px;

min-height: 315px;

}

.panel {

width: 100%;

opacity: 0;

position: absolute;

background: #fff;

border-radius: 0 10px 10px 10px;

padding: 4%;

box-sizing: border-box;

}

.panel h2 {

margin: 0;

font-family: Arial;

}

</style>

</head>

<body>

<label for="three">Tab Three</label>

<h2>This is Panel One</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>

<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>

</div>

<h2>This is Panel Two</h2>

<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>

</div>

<h2>This is Panel Three</h2>

<p>Nam sodales, mi eu convallis adipiscing, ligula justo consectetur tellus, tincidunt vestibulum tortor elit a augue. Ut elementum ultricies orci, vel luctus neque varius in. Phasellus turpis nunc, eleifend ac fringilla at, malesuada in eros.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>

<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

</div>

<h2>This is Panel Four</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel leo sem. Sed nec quam sit amet lorem volutpat ullamcorper ut sed massa. Sed vel felis velit. Nullam et turpis sed dui auctor vehicula quis a dui.</p>

<p>Aliquam vitae leo et sapien volutpat accumsan quis eget turpis. Etiam ac metus vitae purus semper pretium. Curabitur id nisl nisl. Cras ut massa sed dolor ullamcorper consequat ut sed dolor.</p>

</div>

<label for="three">Tab Three</label>

</article>

</body>

</html>

Interactive banner

1 Correct answer