I'm trying to use the image orbiter but it's acting odd. A few things:
1. I don't want the images to auto play. I want the user to advance each image as they wish.
2. I've created images that are 800w x 400h and it would be great if the orbiter would adjuat to that image size.
Here's the code I'm using:
<div class="orbit" role="region" data-orbit data-auto-play="false">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="img/Dtotals.png" alt="Totals">
<img class="orbit-image" src="img/trans.png" alt="Transcripts">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
But here's how its displaying when I open a Chrome browser window from Dreamweaver CC 2019:
This image shows the code from 4 bullets since i hadn't removed those when taking the image.
This is really frustrating me and I was hoping for your help.
How can I get the orbiter to better align to my image size?
Am I doing something wrong code wise or image size wise?
Thank you so much for your time.