There are many installable slideshows out there like OWL, glide.js, bootstrap js and a bunch of others but all these need some kind of installation.
This guide will show you how to not only get a slideshow up and running but also with the benefit of having it headless.
You will need the following:
- Basic skills in HTML / CSS or you can copy-paste my code.
- A pen on https://codepen.io/pen (For demo purpose)
Step 1 — Get your environment ready
Go to https://stackend.com and log in. The first step is to create a stack (if you already have one you can use that) — Do this by clicking on “My Stacks” in the top left corner and then “Add new stack”.
Give the stack a name. I named mine “Stackend Demo” but you can name it whatever you want.
Click on settings in the bottom of the left menu if you’re not already on the settings page. In the “ALLOWED DOMAINS” field add s.codepen.io & cdpn.io — if you want to use something else then make sure to add the correct domain.
Step 2 — Create your slides
Click on the "create new" button after Code Bins in the left menu to create a new module.
Name it Slide 1.
Add this to the HTML field (or whatever you want):
<div class="slide1">
Hello World - this is my first slide!
</div>
Click Save.
Once again, click on the "create new" button after Code Bins in the left menu to create a new module. Name it Slide 2. Add this to the HTML field (or whatever you want):
<div class="slide2">
Hello World - this is my second slide!
</div>
Click Save.
Once again click on the "create new" button after Code Bins in the left menu to create a new module. Name it Slide CSS.
Add this to the CSS field (or whatever CSS you want):
.slide1 {
background-image: url(https://api.stackend.com/media/get/c71/cms/mitchell-orr-389605-unsplash-jpg.jpg);
color:white;
height:500px;
width:100%;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
.slide2 {
background-image: url(https://api.stackend.com/media/get/c71/cms/wade-austin-ellis-677123-unsplash-jpg.jpg);
color:white;
height:500px;
width:100%;
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
Ok, That’s it. Now you have 2 slides and some simple styling to make them look stylish (well.. kind of).
Step 3 — Create the slideshow/carousel
Head over to https://stackend.com/docs and look for Slideshow in the left menu under modules. There you can see the attributes for the slideshow module but if you copy the code below it’s a good start for the demo.
<!-- This is your stackend launch script -->
<script defer type="text/javascript" src="https://stackend.com/launch.js></script>
<div data-stackend-type="stackend-slideshow" data-stackend-indicators="true>
<!-- your slideshow goes here -->
</div>
Copy this code and create a new pen on https://codepen.io/pen/
Paste the Stackend code into the HTML field on codepen.
The first line is the basic stackend setup.
The second line is the start of your slideshow. Any code bins you add between here and the closing div will be in your slideshow.
Now let’s add the 3 code bins. Let’s start by adding the CSS.
In stackend, click on Code Bins in the left menu and locate Slide CSS on your right side. Click on it. In the top left corner, you will see a button that says <> COPY. Click on that and a popup will appear. Click the <> copy button for the first row (the module code). In my case it looks like this (yours will be different):
<div data-stackend-type="stackend-cms" data-stackend-id="71:5"></div>
Go to your codepen and paste it in the top or bottom, just not in the actual slideshow div.
Now, do the same for the code bin modules slide 1 and slide 2 but paste them between the slideshow divs.
So, when done you should end up with something like this:
<!-- This is the stackend launch script -->
<script defer type="text/javascript" src="https://stackend.com/launch.js"></script>
<!-- This is the css for the slideshows -->
<div data-stackend-type="stackend-cms" data-stackend-id="71:5"></div>
<!--This is the actual slideshow-->
<div data-stackend-type="stackend-slideshow" data-stackend-indicators="true>
<!-- This is the code bins slide1 and slide2 -->
<div data-stackend-type="stackend-cms" data-stackend-id="71:21"></div>
<div data-stackend-type="stackend-cms" data-stackend-id="71:22"></div>
<!-- This closes the slideshow -->
</div>
You can view this example on codepen:
https://codepen.io/stackend/pen/xxKZgQX
See the Pen Create a carousel / slideshow witout Javascript (local css) by Stackend
(@stackend) on CodePen.
Top comments (2)
Am I missing something? This uses a Javascript library.
True that Ben, true that - but you don't have to write js to use it. Sorry for being unclear :)
We created it because we used all kinds of carousels in various projects and it was always a bit of a hassle. Also, we liked the idea of being able to have control of the slides headless. I'll update the headline!
best
anton