tutorial for Bootstrap carousel?

Report · Nov 26, 2020

Happy Thanksgiving to all. Can someone recommend a tutorial for setting up a Bootstrap carousel in Dreamweaver? Especially for how to add images in the easiest way. Thanks.

Kevin Burke

Cambridge, Massachusetts

Report · Nov 26, 2020

1. Define your local site folder if you haven't already. Site > Manage Sites...

2. Start with a new Bootstrap document. File > New > Starter Templates > Bootstrap Templates... pick a layout and hit CREATE button.

3. Save file as index.html in your local site folder.

4. Open the Snippets Panel (Shift+F9) > Scroll to Bootstrap Snippets > Carousel. Double click the one you want. Code snippet is added to your document.

5. Ctrl/Cmd + S to save.

6. Switch to Design view. Double click on placeholder image to replace it with your own. Repeat with other slides.

Working code example for reference:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

</head>
<body>
<main class="container">
<h1>Bootstrap 4.5 in Dreamweaver</h1>
<h2 class="text-info">Carousel Slider</h2>
<div class="row"> 
<div class="col">
<p>Replace placeholder images with your own.</p>
</div>
</div>
</main>
<!--Begin Carousel-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="carousel-item active"> 
<img class="d-block w-100" src="https://dummyimage.com/1200x400" alt="First slide"> </div>

<div class="carousel-item"> 
<img class="d-block w-100" src="https://dummyimage.com/1200x400" alt="Second slide"> </div>

<div class="carousel-item"> 
<img class="d-block w-100" src="https://dummyimage.com/1200x400" alt="Third slide"> </div>
</div>
<!--Pevious and Next arrows.-->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<!--end of Carousel-->

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Post back if you have any questions.

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

Report · Nov 27, 2020

Nancy, thank you so much for your offer to help. There are three problems with the steps you provided:

1. I already have an index.html page on my site. My slideshow is a dependent page.

2. I don't want to use a Bootstrap framework

3. The "snippets" option is dimmed. Can't use it.

I'm doing OK by simply creating a Bootstrap carousel using the insert panel. What do I do next to add my own images? I have seen tutorials on the web that mention widely different methods - clicking on the hamburger in the top left corner; using the property inspector; clicking on the right arrow; typing directly in the html code editor. On the last method – does each image have to be in its own div? Thanks again

PS – what about a tutorial that begins with the insert panel?

Kevin

Cambridge, Massachusetts

Report · Nov 27, 2020

Not sure what you mean by No 2. If your are using a Bootstrap carousel then you ARE using the Bootstrap framework

In regards to adding images, one way would be to do this through going into code view. If you observe the code supplied by Nancy you will see a pattern where each img is in its own div with the class name 'carousel-item'

You just need to copy that block of code and paste it as many times as you need images and then update the img src to point to your images.

I would have thought you could do all this without going into code view but as l no longer use Dreamweaver or Bootstrap l dont know. But this a pretty easy operation to do directly in code view.

Report · Nov 27, 2020

Yes, this looks like the answer - just do it directly in code view. Do I also have to add a list item (li) for each image?

Thanks,

Kevin

Report · Nov 27, 2020

<li></li> not required. Just the code below assuming you are using Bootstrap 4, obviously swap the 'src' for the name of your image.

<div class="carousel-item"> 
<img class="d-block w-100" src="https://dummyimage.com/1200x400" alt="Second slide"> </div>

So for instance if your images are in a folder named 'images':

<div class="carousel-item"> 
<img class="d-block w-100" src="images/myImageName.jpg" alt="Image Description"> </div>

Report · Nov 27, 2020

Images can be swapped out from the Properties Panel (Ctrl/Cmd+F3). See screenshot.

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

Report · Nov 27, 2020

Kevin,

Bootstrap Carousel won't work without Bootstrap framework. The CSS and JS files are essential.

Name the file whatever you want. But save and name it BEFORE you add images.

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