CSS: how to make a horizontal images scroller with two images per column?
Tags: css
Problem :
I have an horizontal images scroller, like this:
This the markup:
<div class="slider-horizontal">
<span ng-repeat="image in images">
<a href="#">
<img ng-src="{{image}}" />
</a>
</span>
</div>
And this the style:
.slider-horizontal {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
No, I would like to add a secondary image below any of the current ones, to obtain something like this:
(N.B.: of course nor persons nor the discount label are the real images... :-)
Is it possible? What would you suggest? I can't manage it, all of my trials end up with all of the images on the same row, or all on the same column... :-(
To reply to @rednaw comment: this is what I did try:
<div class="slider-horizontal">
<span ng-repeat="image in images">
<a href="#">
<img ng-src="{{image}}" />
<img src="images/watermarks/label.png" />
</a>
</span>
</div>
(whith not great success, as I said... :-()
Solution :
EDITED:
Did u try something like this
<div class="slider-horizontal">
<span class="slider-image" ng-repeat="image in images">
<a href="#">
<img ng-src="{{image}}" /><br>
<img src="myimg.jpg" />
</a>
</span>
</div>
CSS:
.slider-horizontal {
white-space: nowrap;
overflow: auto;
overflow-y: hidden;
}
.slider-image {
float: left;
margin-right: 20px;
display: inline-block;
}
CSS Howto..
You can get the selected node using var node = tinymce.get('your_editor_id').selection.getNode(); and the class with $(node).attr("class"); ...
You can do this with CSS but it will only function in modern browsers that support CSS transitions: tr { -webkit-transition : background-color 500ms ease-in-out; -moz-transition : background-color 500ms ease-in-out;...
1.over ride those styles in your css file by using !important property. bootsrtap css either override or extend your css with bootstrap css so if you want to override entire...
Mark Hubbart's comment is correct. 32-bit color breaks down into four 8-bit components, each within the range 0-255: red, green, blue, and alpha. We express the alpha, or transparency, as...
Here is a fiddle about what i think you are trying to achieve. Change the li inline to float , and now the ul needs to be modified to your...
There's little here that SASS can help you with. You do not need vendor prefixes. Just write *, ::before, ::after { box-sizing: border-box; } * { line-height: 1; } Whether...
The problem is your script is being executed before the rest of the page is being loaded. You have 2 options: Put your script tags after all of the content...
You can use the "each" jQuery function, which will check every inputs of the checkbox type on the page. So, you simple get it's name, if it's "room[]", add the...
Browsers tend to cache css and script resources for a period of time. Try clearing out the cache on the device or even manually force it to load a new...
If you have no kind of access to the IFrame, neither from server side nor through JS because of cross domain issues: Not at all, I'm afraid. If you can...
When I tested the two excerpts of code out the only thing I could tell was different was the text inside the button, that said you should really clarify more...
Since mxmlc compiles only one css to swf at a time, we can merge or append multiple css files to single file and then compile that output css file to...
Don't use less.js in a product environment. LESS is a pre compiler you should use the resulting and optimized CSS files. or is there alternative way? any suggestion or recommendation...
You can detect when animation done with this. Read here $('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); $(document).ready(function() { $('button').on('click', function() { deleteDevice('element'); }); }); function deleteDevice(id) { $('#' +...
Using multiple selectors seems to do the trick. DEMO: http://jsfiddle.net/4V3y5/ document.querySelectorAll("p:not([attra]),p:not([attrb])"); First pass selects all p elements without attra, which will exclude the ones with both. Second pass selects all...
And don't forget the overflow:hidden trick: .status-label { float:left; padding-right:10px; } .status-text { overflow:hidden; display:block; } <div class="status-container"> <span class="status-label">Status:</span> <span class="status-text">This is some rather long text that I would...
I took at look at your profile and found www.charliecarver.me, took a look at that and found a css file. If this is your website and the css file you...
it's solved: protected void Page_Load(object sender, EventArgs e) { mystyle.InnerHtml = " body:after{ position:fixed; content:''; top:0; left:0; right:0; bottom:0; z-index:-1; background:rgba(226, 93, 141, 0.76)"; } <style runat="server" id="myStyle" > </style>...
I just did the thing with margins and I attached it to the bottom with bottom: 0 .down-btn { bottom: 0; position: absolute; min-width: 30px; margin: 0px calc(50vw - 15px);...
Use flexbox: Add/edit class .w3-row-padding .w3-row-padding { display:flex; align-items:center; } body{ font-family: 'Arial', sans-serif; font-size: 12px; overflow-x: hidden; } a { text-decoration: none; } /** content display **/ #view {...
I recommend that you read A List Apart's CSS Positioning article. It's the best article I've seen on the web.
Don't use div use a span insert: function(data){ return '<span >' + '<span class="mentionedUser">[' + data.name + ']</span><div class="hiddenMentionUserID" style="display:none;">'+data.id+'</div>' + '</span>'; } ...
Sure it's possible. Just make the thumbnail a background image of the anchor tag. See this example: http://jsfiddle.net/EyRFW/1 ul#nav li ul.sub li a { font-weight: normal!important; padding-left:20px; background-image:url(http://jsfiddle.net/img/ico-add-resource.png); background-position: 3px...
for young browser you may use the blend-mode: http://codepen.io/anon/pen/waGoEd html { background:url(http://lorempixel.com/300/300) rgba(0,0,0,0.5); } html:hover { background-blend-mode:darken; } Here a rgba() color is used, you can darken or colorish your...
This can be achieved easily with jQuery. JSFiddle // When you click the image $('#image1').on('click', function () { // Select a div matching the CSS selector '#image1text' // Then set...
is this what you want????? select { background-color: yellow; } your updated fiddle :: FIDDLE...
you can assign data with $smarty->assign('layout', $layoutParameter); you can reach with <link href="{$layout['routeCss']}global.css.php" rel="stylesheet" type="text/css" /> But I also don't recommend to compress css in php. It should be static...
In PHP, you should reference files from the Document_Root that is specified (C:\xampp\htdocs in your case). So try require_once "/lorem_ipsum/phplogin.php"; The url in the css should work if the file...
Position your badge with left instead of right: .noti_bubble { position: absolute; top: 2px; /* this will anchor your badge from its left-hand edge at the midpoint of your icon...
Try changing your CSS line to the following: .men_tp { color: #d1d3d5; float: left; font-family: bebas_neueregular, Arial; font-size:22px; } (The line breaks have only been inserted to make it easier...