Menu icon Foundation

My Posts



My Comments

Laura Coulombe commented on Laura Coulombe's post over 3 years

That is what I have on my page and the orbit slider is working as it should except that it is still auto-playing when I want it to be manual only.   The buttons are not having any effect on the slider however.   
I am using this as a accommodations listing.  Basically the user will click on a listing that pops up a modal, inside this modal is a text header then underneath would be the buttons for things like "overview", images and booking.  It will kind of look like tabs but I need it to scroll back and forth between the content. 
This following is basically what I'm trying to accomplish one the user clicks on a particular listing: 
<div class="tiny reveal" id="accomodationModal" data-reveal>
<!-- Listing Header -->
<div class="row listHeader">
<div class="large-12 medium-12 small-12 columns">
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true"><img src="img/CLOSE-LISTINGS.svg" width="22px" height="22px"></span>
</button>
<p class="title">LOCATION</p>
<p>Address and phone number</p>
</div>
</div>
<!-- END Listing Header -->

<!-- Listing Content -->
<div class="row collapse">
<div class="large-12 medium-12 small-12 columns listingContent">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="timer:false;">

    &lt;!-- Orbit Nav --&gt;
    &lt;nav class="orbit-nav"&gt;
      &lt;button class="is-active" data-slide="0"&gt;Button 1&lt;/button&gt;
      &lt;button data-slide="1"&gt;Button 2&lt;/button&gt;
      &lt;button data-slide="2"&gt;Button 3&lt;/button&gt;
      &lt;button data-slide="3"&gt;Button 4&lt;/button&gt;
    &lt;/nav&gt;
    &lt;!-- END Orbit Nav --&gt;

    &lt;!-- Slides --&gt;
    &lt;ul class="orbit-container"&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;1: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;2: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;3: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;4: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;!-- END Slides --&gt;
  &lt;/div&gt;
&lt;/div&gt;

</div>
<!-- END Listing Content -->
</div>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Laura Coulombe's post over 3 years

That is what I have on my page and the orbit slider is working as it should except that it is still auto-playing when I want it to be manual only.   The buttons are not having any effect on the slider however.   
I am using this as a accommodations listing.  Basically the user will click on a listing that pops up a modal, inside this modal is a text header then underneath would be the buttons for things like "overview", images and booking.  It will kind of look like tabs but I need it to scroll back and forth between the content. 
This following is basically what I'm trying to accomplish one the user clicks on a particular listing: 
<div class="tiny reveal" id="accomodationModal" data-reveal>
<!-- Listing Header -->
<div class="row listHeader">
<div class="large-12 medium-12 small-12 columns">
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true"><img src="img/CLOSE-LISTINGS.svg" width="22px" height="22px"></span>
</button>
<p class="title">LOCATION</p>
<p>Address and phone number</p>
</div>
</div>
<!-- END Listing Header -->

<!-- Listing Content -->
<div class="row collapse">
<div class="large-12 medium-12 small-12 columns listingContent">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-options="timer:false;">

    &lt;!-- Orbit Nav --&gt;
    &lt;nav class="orbit-nav"&gt;
      &lt;button class="is-active" data-slide="0"&gt;Button 1&lt;/button&gt;
      &lt;button data-slide="1"&gt;Button 2&lt;/button&gt;
      &lt;button data-slide="2"&gt;Button 3&lt;/button&gt;
      &lt;button data-slide="3"&gt;Button 4&lt;/button&gt;
    &lt;/nav&gt;
    &lt;!-- END Orbit Nav --&gt;

    &lt;!-- Slides --&gt;
    &lt;ul class="orbit-container"&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;1: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;2: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;3: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="orbit-slide"&gt;
        &lt;div&gt;
          &lt;h3 class="text-center"&gt;4: You can also throw some text in here!&lt;/h3&gt;
          &lt;p class="text-center"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde harum rem, beatae ipsa consectetur quisquam. Rerum ratione, delectus atque tempore sed, suscipit ullam, beatae distinctio cupiditate ipsam eligendi tempora expedita.&lt;/p&gt;
          &lt;h3 class="text-center"&gt;This Orbit slider does not use animations.&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
    &lt;!-- END Slides --&gt;
  &lt;/div&gt;
&lt;/div&gt;

</div>
<!-- END Listing Content -->
</div>

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content