Let’s take a look at a simple image carousel example.
<link rel=”stylesheet” href=”main.css”/>
main.css and main.js
Referencing external files
One other thing to consider is that any image you include in an HTML trinket must be hosted on a site that supports https. All trinket.io pages use https and can only load images from other sites also using https. We are looking into letting you upload images directly to trinkets in case you don’t have a site using https.
Build a multi-page site!
Here’s another example that shows how you can link to other HTML pages inside a trinket. We start with a simple index.html page that has 3 links. Each link takes you to a new page with one of the images we saw in our earlier example. To get back to our index.html page we add another link at the top of each additional page.
We are excited to see how this update can help if you’re teaching the web. Keep us updated with your progress and as always your feedback is welcome and what helps us deliver the best tool. Send us a note if there’s anything about trinket we can make better for you.
P.S. Ever wondered what kinds of other trinkets are being created? If so, take a look at our gallery. It’s a work in progress but is a great place to find inspiration and to see what’s possible with Trinket. If you like or think it needs to be improved let us know!