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

Creating a simple photo slideshow in Dreamweaver CC

  • August 19, 2015
  • 2 respuestas
  • 35159 visualizaciones

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. 

Este tema ha sido cerrado para respuestas.

2 respuestas

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
    WayneSmalleyAutor
    Participant
    August 19, 2015

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

    O
    osgood_
    Legend
    February 22, 2017

    I need to create a page with details of a property for sale with a selection of photographs of the property.

    There will be say 6 images. At the top of the page there will be a large version of the image selected from the thumbnails displayed below.

    I need the facility to scroll through the thumbnail images and when one is selected I want that one to display at the top of the page as the large image.

    Here is an example of what I am trying to achieve:  http://www.rightmove.co.uk/property-for-sale/property-63551177.html

    How can I do that in Dreamweaver CC 2015?

    I don't think the carousel function is going to help me.


    FlexSlider maybe be an option:

    FlexSlider 2

    Términos y condicionesAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices