How to make a list of images responsive to window size - CSS/JS/Bootstrap
Question
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.
1 answers
solution1
1 2014-06-27 20:37:34
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.