Dreamweaver Bootstrap Carousel caption location control

[jamieh2os]

Thanks for looking at this post, Dreamweaver Bootstrap experts and readers.  I'm using a carousel with captions.  I would like to move captions on the images for better reading.  Each image could require a different caption location.  My first idea is to use margins and padding with the new Bootstrap 4 short cuts; but, my work will probably require more movement than the short cuts offer (max 4).  A second idea is to use the Dreamweaver Designer’s margins and padding.  To try that, I feel I need to pause the carousel while editing.  Any ideas on ‘caption location control on images’ or ‘pausing the carousel’ for editing with Designer is greatly appreciated…thanks J

[osgood_]

If you want to position each caption individually then you can add an id to each carousel-caption div like below

<div class="carousel-caption" id="caption_1">

<h3>Caption heading 1</h3>

<p>Caption text 1</p>

<div class="carousel-caption" id="caption_2">

<h3>Caption heading 2</h3>

<p>Caption text 2</p>

<div class="carousel-caption" id="caption_3">

<h3>Caption heading 3</h3>

<p>Caption text 3</p>

Then you can use some css to target each individual caption and position it where you need it:

#caption_1 {

position: absolute;

top: 100px;

left: 150px;

}

#caption_1 h3 {

text-align: left;

}

#caption_1 p {

text-align: left;

}

You can disable the Bootstrap css while you are positioning the captions by adding <!--         --> around the css link.

Then just include temporarily the css below in your default css stylesheet. Add the caption_1, caption_2, caption _3 css as explained above. The page will look  a bit of a mess whilst the Bootstrap css stylesheet is disabled but the images will be stacked and not moving so you'll be able to see better where to position your captions.

.item {

position: relative;

color: #fff;

}

OR

You can add the below temporarily to the foot of the page just inside the closing </body> tag which will prevent the slides from sliding for 10 seconds. 15000 is 15 seconds

<script>

    $('#myCarousel').carousel({

    interval: 10000

});

</script>

The choice is yours.

[Nancy OShea · Accepted solution]

To pause carousel while editing,

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

data-interval="false">

In this example I moved captions to the left and added a semi-transparent background for better visual contrast.

Bootstrap 3.3.7 Custom Carousel Slider

Tutorial

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