Slideshows are a powerful tools for displaying pictures in your websites. We'll see how to place and edit a Bootstrap 4.0 carousel block in Pingendo editor.
Beware: Bootstrap 4 is still in alpha. Carousel block is still a little buggy but is going to be fixed with the beta release. This is why you see it too big in the left panel and images are not properly responsive. Updates soon.
Detect the right spot where to put the carousel, open the components panel on the left. Choose the media toogles and drag the carousel block into the page.
On the right inspector, the ELEMENT tab has switched to CAROUSEL. As you can see from the block tree, there are two slides at the moment, and one of them is active. Clicking on the + button will let you add another slide.
First, we will set the behaviour of our carousel in the fields below: CYCLE will let images change automatically and INTERVAL defines the time for every frame, expressed in milliseconds.
Let's click on the SLIDE ACTIVE element in the block tree and add the first picture! Paste the URL or browse your local directory. You will see it appearing on the visual editor right after.
To edit the carousel caption you can just double-click on it and type your own. Once you're happy press esc until you are back to the Carousel level. Enter the other slides by selecting them in the tree and place the URL of the pictures.
You won't see them in the editor if they are not ACTIVE: change the related attribute on the right inspector and you will see slides changing in the visual editor. Remember that can be ACTIVE just one slide per time. Remove the attribute to one slide after applying it to another.
Otherwise, you can always have a complete view of the situation with the HTML inspector at the bottom of the page. This is what you get after these steps:
Now, the last thing to set are controls. They let the user skip to next/previous slide, wheter the CYCLE is on or not. For this we need to put hands on code!
In the HTML source panel look for the carousel portion of code. We first change the ID of the carousel from
id="WoodCarousel" (do not leave blank spaces!).
Now, for them to work, we have to change the href of the two controls. These are very last lines. You will have to change them from
Now save and preview to check if everything is working properly!
This is what you shoud get in the end:
<div class="carousel slide" data-ride="carousel" data-interval="false" id="WoodCarousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item ">
<img class="d-block img-fluid" src="https://unsplash.it/600/400?image=307" data-holder-rendered="true">
<p>This is the <i>active </i>slide</p>
<img class="img-fluid" src="https://unsplash.it/600/400?image=844">
<p>Elegant yet resistant</p>
<div class="carousel-item active">
<img class="img-fluid" src="https://unsplash.it/600/400?image=811">
<p>From where the wood comes from</p>
<a class="carousel-control-prev" href="#WoodCarousel" 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="#WoodCarousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>
One last thing: you may prefer having also indicators in the slides. For this, just add this snippet just below the controls lines
<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>