Как сделать список изображений отзывчивым к размеру окна - CSS / JS /Bootstrap

ProgramBox

Как сделать список изображений отзывчивым к размеру окна — CSS / JS /Bootstrap

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#javascript #jquery #html #css #twitter-bootstrap

#javascript #jquery #HTML #css #twitter-bootstrap

Вопрос:

Итак, у меня есть этот код:

 <ul class="acc-list list-inline">
    <li>
        <img src="image.png" alt="">
        <div class="item-container">
            <p class="description">texttexttext</p>
            <p class="name">texttexttext</p>
        </div>
    </li>
    <li>
        <img src="image.png" alt="">
        <div class="item-container">
            <p class="description">texttexttext</p>
            <p class="name">texttexttext</p>
        </div>
    </li>
    <li>
        <img src="image.png" alt="">
        <div class="item-container">
            <p class="description">texttexttext</p>
            <p class="name">texttexttext</p>
        </div>
    </li>
</ul>

С помощью Bootstrap и некоторых дополнительных CSS этот код, по сути, создает список из 3 изображений по горизонтали на странице. Изображения не представляют собой ничего особенного, и, поскольку я использую bootstrap, они перемещаются при незначительном изменении размера окна. Если я изменяю размер своего окна, чтобы представить что-то похожее на экран мобильного телефона, например, из-за моего стиля и начальной загрузки, в списке simple отображаются все 3 изображения друг над другом по вертикали.

Вы можете подумать, что это здорово, но то, что я хочу сделать в этом сценарии, на самом деле использует вместо этого какую-то галерею слайдеров jQuery. Вместо того, чтобы изображения выстраивались вертикально друг над другом в окне размера смартфона, я бы хотел, чтобы они исчезли и вернулись в виде галереи слайдеров.

Я пытался, но, по общему признанию, я действительно отстой в jQuery / JS, поэтому я в поисках, может ли кто-нибудь указать мне на хороший пример этого или может помочь с некоторым кодированием. Я поискал в Интернете, но, похоже, наткнулся только на примеры изменения размера слайдера вместе с окном.

Однако то, что я хочу сделать, это полностью избавиться от моего кода списка и поместить эти изображения в совершенно новую галерею слайдеров, когда окно очень маленькое.

1. Не создавая все необходимые элементы с помощью JS, вы можете использовать слайдер и список, которые вы предоставили в DOM при загрузке. Затем вы должны переключать видимость: видимая / скрытая для элементов в зависимости от ширины окна, используя $(window) . width()

2. Спасибо @DaveBriand, есть ли какая-то конкретная ширина, которую вы бы порекомендовали для чего-то подобного? Или слайдер, который вы рекомендуете, я посмотрел на некоторые, но с ограниченным опытом работы с JS они выглядели довольно сложными, если честно.

3. если вы уже используете bootstrap, вы можете взглянуть на слайдер, включенный в него — я никогда не использую слайдеры, поэтому я не уверен, какие из них работают хорошо. Что касается ширины, вам следует потратить некоторое время на игру с сеткой начальной загрузки — она делит элементы на 12 столбцов и использует проценты для вычисления ширины столбцов. Как только вы начнете играть с ним, вы его получите.

4. Я понимаю, как работает bootstrap и css / html, стоящие за ним, но я действительно изо всех сил пытаюсь реализовать слайдер. Я в основном хочу взять эти изображения и поместить их в простой слайдер, когда окно становится меньше определенного размера, но я ничего не добиваюсь.

5. Я думаю, это поможет вам: scotch.io/bar-talk/understanding-the-bootstrap-3-grid-system

Ответ №1:

Могу ли я предложить другой подход. Используя простую горизонтальную прокрутку, вы можете найти несколько приятных настраиваемых полос прокрутки, чтобы сделать его более причудливым. Поскольку он включает изображения, я не делал jsfiddle:

 <!DOCTYPE html>
<html> 
<head> 

    <style>
        body
        {
            width:100%;
        }

        #hold
        {
            width:90%;
            height:300px;
            overflow-x:auto;
            overflow-y:hidden;
        }

        #image_container
        {
            width:920px;        /* equal to total width of all images */
            min-width:480px;    /* minimum for device size */
        }

        #image_container li
        {
            display:inline;
            width:300px;
            height:100%;
            margin:2px;
        }

        #image_container li img
        {
            width:300px;
        }

    </style>

</head>
<body>

    <div id="hold">
        <ul id="image_container">
            <li><img src="../images/slides/bridge.jpg"></li>
            <li><img src="../images/slides/road.jpg"></li>
            <li><img src="../images/slides/leaf.jpg"></li>
        </ul>
    </div>

</body> 
</html>

1. Это отличное начало для меня, у меня есть одна проблема с вашим кодом, #image_container ширина устанавливается на ширину всех 3 изображений, но по какой-то причине я должен установить ширину контейнера немного больше, чем все 3, чтобы все они отображались в полноразмерном окне, которое являетсястранно, это означает, что когда полоса прокрутки начинает занимать место, с обеих сторон остается небольшой пробел.

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

3. он должен быть немного больше из-за поля на li. вы можете удалить это, но тогда изображения встанут рядом друг с другом без пробела.

Метки: Как сделать список изображений отзывчивым к размеру окна — CSS / JS /Bootstrap