jQuery перетаскивается на li

#jquery #css #jquery-ui

#jquery #css #jquery-пользовательский интерфейс

Вопрос:

Я пытаюсь создать что-то вроде следующего JSFiddle, но у меня есть несколько проблем. Я пытаюсь создать свою версию в разделе, в котором она находится рядом с чем-то другим. На данный момент у меня есть это

 <section class="no-padding" id="portfolio">
    <div class="col-lg-6 col-sm-6" id="portfolio-left">
    </div>

    <div class="col-lg-6 col-sm-6" id="portfolio-right">
        <div id="slider">
            <ul>
                <li style="background-color: #F00"></li>
                <li style="background-color: #0F0"></li>
                <li style="background-color: #00F"></li>
            </ul>
        </div>
    </div>
</section>
  

Таким образом, часть слайдера находится только внутри portfolio-right , которая занимает 50% экрана и 100vh . Я настроил другой JSFiddle, который демонстрирует мою проблему. Таким образом, серая область, portfolio-left которая мне нужна, остается нетронутой. Мне нужно, чтобы слайды с правой стороны были 100% шириной. На данный момент для него установлено значение 400px , и он отображается встроенным. Как только я устанавливаю его в 100% , вторая и третья панели выпадают под первой, а не рядом с ней.

Кроме того, слайдер, похоже, у меня не работает. Есть ли какой-либо способ заставить это работать должным образом в моей настройке?

Большое спасибо

Комментарии:

1. Ваша скрипка загружает 2 разные версии jQuery. Что вы хотите использовать?

2. Обновленная скрипка: jsfiddle.net/Twisty/x4k5qk1w/2 Если каждый li пытается занимать 100% своего контейнера, тогда контейнеру нужна ширина. Если #slider установлено значение 100%, то для него #portfolia-right должна быть определена некоторая ширина. Вы не можете назначить 100% каждому элементу и ожидать, что они будут отображаться дальше вправо. Если вы хотите, чтобы он был динамическим, то #portfolio-left должно быть какое-то значение, либо количество, либо процент. Например, 75% и 25%. Если право должно быть 100%, из чего оно состоит на 100%?

3. Если я установлю значение 100%, оно снова упадет. Это основано на bootstrap, поэтому #portfolio-right составляет 50%. Это означает, что ползунок должен составлять 100% от этих 50%, но, похоже, он не работает, не заставляя li опускаться под ним

4. кажется, работает, если я установлю li равным 33,3%. Почему это? Спасибо