Как переместить стрелки навигации по орбите за пределы контейнера с помощью Foundation 4?

Question

Я использую Orbit, чтобы показать некоторые тяжелые элементы текста, и стрелки мешают моему тексту. Мне надоело делать какие-то модные css33, чтобы увеличить их прозрачность, так как мне нужно, чтобы это выглядело прямо в Firefox для OS9, что, я думаю, означает Firefox 3...

Так есть ли какой-нибудь способ, которым я могу просто переместить стрелки за пределы контейнеров Орбиты? Еще лучше было бы, если бы под контейнером у меня была стрелка prev, затем пули, затем следующая стрелка?

Answer 1

Это можно сделать с помощью CSS. Собственно, переполнение: скрыто в.orbit-контейнере. Если вы сделаете.orbit-container overflow: visible и затем добавите overflow: hidden к.orbit-slides-container, слайды все равно будут скрыты, но все, что находится за пределами UL, можно переместить куда угодно. Вот как я это сделал:

.orbit-container {
    overflow: visible !important;
}
.orbit-slides-container {
    overflow: hidden !important;    
}
.orbit-container .orbit-prev {
    margin-left: -50px;
}
.orbit-container .orbit-next {
    margin-right: -50px;
}

Answer 2

Так есть ли какой-нибудь способ, которым я могу просто переместить стрелки за пределы контейнеров Орбиты? Еще лучше было бы, если бы под контейнером у меня была стрелка prev, затем пули, затем следующая стрелка?

Всегда есть способ, а иногда это не так просто. И для вашего конкретного сценария это будет легко, только если вы хорошо разбираетесь в javascript. Начиная с последней версии 4.1.5 обработка событий или обратные вызовы по-прежнему не поддерживаются. Если вам нужна поддержка того, что вам нужно, вам действительно нужно изменить foundation.orbit.js и сделать две вещи:

1. Измените файл скрипта, чтобы вы могли писать стрелки в том месте, где вы хотите, чтобы они были
2. Измените файл сценария, чтобы вы могли подключать события для следующих и предыдущих действий. Затем вы можете добавить свои собственные предыдущие и следующие кнопки и разместить их там, где вы хотите, чтобы они были.

Просто сейчас нет простого способа сделать это. На самом деле я пытаюсь предоставить некоторые коды, обеспечивающие поддержку обратных вызовов, просто потому, что они нам скоро понадобятся. Затем я отправлю его в Zurb (github) и посмотрим, будет ли для них смысл включать его в основной скрипт.

Answer 3

Я только недавно сделал что-то вроде того, о чем ты говоришь (я думаю). Я установил для контейнера определенную ширину столбцов внутри моих слайдов, и, естественно, Orbit займет 100% страницы, если вокруг Orbit нет контейнера.

Я сделал что-то подобное для каждого слайда. Здесь есть куча дополнительной разметки, но мне нужно было лучше контролировать медиа-запросы на слайдах.

   <div class="slideshow-wrapper">
     <ul id="home-slider" data-orbit data-options="timer_speed:2500; bullets:false;">
       <li data-orbit-slide="headline-1">
         <div class="row">
           <div class="large-10 column push-1">
             <div class="slider-content">   
               <div class="large-6 column text-center text-left">
                 <h2>Test</h2>
                 <h3>Test</h3>
                 <p>Test</p>
                 <a href="" class="large secondary button expand">LEARN MORE</a>
               </div>
             </div>
           </div>
         </div>
        </li>  
    </ul>
  </div>

Так есть ли какой-нибудь способ, которым я могу просто переместить стрелки за пределы контейнеров Орбиты? Еще лучше было бы, если бы под контейнером у меня была стрелка prev, затем пули, затем следующая стрелка?

Я тоже боролся с этим в течение минуты, вы можете найти css для кнопок prev / next в строках 3064-3076. Вы можете попробовать установить верхнее свойство на 80%+, чтобы увидеть, толкает ли это предыдущую и следующую стрелки вниз.

Answer 4

Вы можете использовать это также использовать mouseenter mouseleave и поставить остановку перед анимацией

    $(document).ready(function () {
        $(".orbit-container").mouseenter(function () {
            $(".orbit-prev,.orbit-next").stop().animate({ 'opacity': '1' }, 400);
        }).mouseleave(function () {
            $(".orbit-prev,.orbit-next").stop().animate({ 'opacity': '0' }, 400);
        });
    });