CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
germainelol
germainelol

Reputation: 3331

How to make a list of images responsive to window size - CSS/JS/Bootstrap

So I have this code:

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

With Bootstrap and some additional CSS, this code is essentially producing a list of 3 images horizontally across the page. The images are nothing special and as I'm using bootstrap they reposition themselves when resizing the window slightly. If I resize my window to represent something similar to a mobile phone screen for example, because of my styling and bootstrap the list simple shows all 3 images on top of each other vertically.

Great you may think, but what I want to do in this scenario is actually use some sort of jQuery slider gallery instead. Instead of the images lining up vertically on top of each other in a smartphone size window, I would like them to go away and come back as a slider gallery.

I have tried, but admittedly I really suck at jQuery/JS, so I'm wandering if anyone can point me towards a good example of this or can help with some coding. I've looked around on the internet but I only seem to come across examples of the slider resizing with the window.

However, what I want to do is completely get rid of my list code and throw these images into an entirely new slider gallery when the window is very small.

Upvotes: 0

Views: 772

Answers (1)

Geoff
Geoff

Reputation: 164

May I offer a different approach. Using a simple horizontal scroll - you can find some nice customizable scrollbars out there to make it look a little more fancy. Since it includes images, I didn't do a 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>

Upvotes: 1

Related Questions