Skip to main content
K
KevinB9
Inspiring
November 26, 2020
質問

tutorial for Bootstrap carousel?

  • November 26, 2020
  • 返信数 2.
  • 4257 ビュー

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

    このトピックへの返信は締め切られました。

    返信数 2

    K
    KevinB9作成者
    Inspiring
    November 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

    O
    osgood_
    Legend
    November 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.

    K
    KevinB9作成者
    Inspiring
    November 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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    November 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
      契約条件Accessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices