Skip to main content
W
WayneSmalley
Participant
August 19, 2015
Question

Creating a simple photo slideshow in Dreamweaver CC

  • August 19, 2015
  • 2 replies
  • 35174 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
Nancy OSheaCommunity 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
    Jon FritzCommunity 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.

    W
    WayneSmalleyAuthor
    Participant
    August 19, 2015

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

    O
    osgood_
    Legend
    February 23, 2017

    FlexSlider seems to have what I am looking for.

    I know I am being dense but how exactly do I install it and make it work on a page in my web site?

    Do I have to put all of the files they give with the download onto the host server so that it interacts with other stuff?

    What do I put into the page where the slideshow is situated and where does it go?


    Mary+8  wrote

    Do I have to put all of the files they give with the download onto the host server so that it interacts with other stuff?

    What do I put into the page where the slideshow is situated and where does it go?

    You only need the files that are associated with the example that you intend to use.

    Below would be all you need for the html code (thumbnail example) plus the flexslider.css file which is in the css folder and jquery.flexslider.js file which is in the js folder and the images which are in the images folder but you will replace the images with your own images. As long as you keep to that file/folder structure you can transport the files and folders to your own site folder or create new folders in your site folder and just copy and paste the css/js files needed.

    <!DOCTYPE html>

    <html>

    <head>

    <meta content="charset=utf-8">

    <title>FlexSlider 2</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

    </head>

    <body>

    <section class="slider">

    <div class="flexslider">

    <ul class="slides">

    <li data-thumb="images/kitchen_adventurer_cheesecake_brownie.jpg">

    <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />

    </li>

    <li data-thumb="images/kitchen_adventurer_lemon.jpg">

    <img src="images/kitchen_adventurer_lemon.jpg" />

    </li>

    <li data-thumb="images/kitchen_adventurer_donut.jpg">

    <img src="images/kitchen_adventurer_donut.jpg" />

    </li>

    <li data-thumb="images/kitchen_adventurer_caramel.jpg">

    <img src="images/kitchen_adventurer_caramel.jpg" />

    </li>

    </ul>

    </div>

    </section>

    <!-- jQuery -->

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    <!-- FlexSlider --><script defer src="js/jquery.flexslider.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

    $('.flexslider').flexslider({

    animation: "slide",

    controlNav: "thumbnails"

    });

    });

    </script>

    </body>

    </html>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices