Skip to main content
Participant
August 19, 2015
Question

Creating a simple photo slideshow in Dreamweaver CC

  • August 19, 2015
  • 2 replies
  • 35159 views

Hey there,

I have recently took on the project of creating a website in Dreamweaver.  I took classes around 5 years ago but that was on an old version...plus I hadn't messed with it since then.

I'm scared I've bit off more than I can chew.  But in any event, here is my current issue I have come across. 

I need to create a photo slideshow on my site.  I have attempted watching the youtube videos and trying the "create your slideshow" websites.. I am just not having any luck. 

I need a way to make a photo slideshow in the most simple way possible.  Any help would be greatly appreciated. 

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Community Expert
August 19, 2015

Bootstrap comes with a responsive component called Carousel.

To get a glimpse of it, copy & paste the following code into a new, blank document, SAVE & preview in browser at various viewport widths. 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap with Carousel</title>

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

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

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!--Bootstrap-->

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<style>

.navbar {margin-bottom:0}

footer {background: #222; color: #FFF; padding: 1%}

</style>

</head>

<body>

<!--begin top navbar-->

<nav class="navbar navbar-inverse navbar-top" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#"> BRAND or LOGO </a>

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">

<li><a href="#">MENU 1</a></li>

<li><a href="#">MENU 2</a></li>

<li><a href="#">MENU 3</a> </li>

<li><a href="#">MENU 4</a> </li>

<li><a href="#">MENU 5</a></li>

</ul>

</div>

</div>

<!--end top nav-->

</nav>

<!--begin Bootstrap Carousel-->

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

<!-- Indicators -->

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active"></li>

<li data-target="#myCarousel" data-slide-to="1"></li>

<li data-target="#myCarousel" data-slide-to="2"></li>

<li data-target="#myCarousel" data-slide-to="3"></li>

</ol>

<!-- Wrapper for slides -->

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

<div class="item active">

<img src="http://lorempixel.com/1500/400/nature/4/" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1500/400/nature/3/" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1500/400/nature/2/" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<div class="item">

<img src="http://lorempixel.com/1500/400/nature/1/" alt="...">

<div class="carousel-caption">

<h3>Heading 3</h3>

<p>Details....</p>

</div>

</div>

<!--end active-->

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

</div>

<!--end carousel-->

<!--being page content-->

<div class="container">

<div class="row">

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

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

</div>

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

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

</div>

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

<!--end container--></div>

<div class="container-fluid text-center">

<footer class="row">

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

Your Footer content

</div>

<div class="col-sm-6 text-center">

Your Footer content

</div>

</footer>

<!--end container-fluig--></div>

<!--Latest jQuery Core Library-->

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

</script>

<!--Bootstrap JS Library-->

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>

</html>

For more on Bootstrap, visit links below.

Alt-Web Design & Publishing: Customizing Bootstrap's Carousel

Bootstrap in Adobe Dreamweaver CC 2015 - Overview

https://helpx.adobe.com/dreamweaver/using/bootstrap.html

Bootstrap CC tutorials

https://helpx.adobe.com/dreamweaver/how-to/make-style-web-

Bootstrap Tutorials

http://www.w3schools.com/bootstrap/

Grid Overview

http://getbootstrap.com/examples/grid/

CSS Overview

http://getbootstrap.com/css/

Nancy O.

Nancy O'Shea— Product User & Community Expert
Jon Fritz
Community Expert
Community Expert
August 19, 2015

The simplest one I know of is Cycle 2 available here: http://jquery.malsup.com/cycle2/

As long as you can follow some relatively simple copy/paste style instructions while in code view, you should be good to go.

Participant
August 19, 2015

What is the difference between production and development? Which should I download...or both?

Legend
April 10, 2017

I have used five or six and it works fine except that the area in which the thumbnails are shows white space unless you use 8 images. Is there a way to make the thumbnails display as a single row rather than stacking?


Mary+8  wrote

I have used five or six and it works fine except that the area in which the thumbnails are shows white space unless you use 8 images. Is there a way to make the thumbnails display as a single row rather than stacking?

The thumbnail images should just repeat themselves, not leave a white space:

FlexSlider 2

It concerns me that you say your thumbnails are stacking they shuold be like the example in the url above.