Menu icon Foundation
Wacky Orbit Images

HI there!

      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">

  <div class="orbit-wrapper">

 

    <div class="orbit-controls">

      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>

      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

    </div>

 

    <ul class="orbit-container">

      <li class="is-active orbit-slide">

          <img class="orbit-image" src="img/Dtotals.png" alt="Totals">

      </li>

      <li class="orbit-slide">

          <img class="orbit-image" src="img/trans.png" alt="Transcripts">

      </li>

    </ul>  

  </div>

 

  <nav class="orbit-bullets">

    <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>

  </nav>              

</div>

.................................

But here's how its displaying when I open a 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. 

 

PS: the below sentence, I could get it to erase. Sorry! 

 

But here's how it's displaying when I open a browser window from Dreamweaver CC 2019: 

 

image orbiterpoor layout

HI there!

      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">

  <div class="orbit-wrapper">

 

    <div class="orbit-controls">

      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>

      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

    </div>

 

    <ul class="orbit-container">

      <li class="is-active orbit-slide">

          <img class="orbit-image" src="img/Dtotals.png" alt="Totals">

      </li>

      <li class="orbit-slide">

          <img class="orbit-image" src="img/trans.png" alt="Transcripts">

      </li>

    </ul>  

  </div>

 

  <nav class="orbit-bullets">

    <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>

  </nav>              

</div>

.................................

But here's how its displaying when I open a 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. 

 

PS: the below sentence, I could get it to erase. Sorry! 

 

But here's how it's displaying when I open a browser window from Dreamweaver CC 2019: