I'am trying to look my Uikit slider like this for about 4 hours now...
Can someone help me with it? I ran out of ideas
Here is my code:
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">
<ul class="uk-slider-items uk-child-width-1-3">
<li>
<img src="images/img1.jpg" alt="">
</li>
<li>
<img src="images/img2.jpg" alt="">
</li>
<li>
<img src="images/img3.jpg" alt="">
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
p.s. I can't use jquery
If still relevant
li.uk-active:nth-child(2) {}
.uk-slider-items li:nth-of-type(2) {}
Related
Best regard,
I have a menu and i want to use the active class active with url format but I don't know how:
<div class="col-sm-6">
<div class="menul">
<a href="#">
<div>
<img src="image" alt="">
<span class="sombra"></span>
<img class="onhover" src="image" alt="image">
</div>
</a>
</div>
</div>
$(".menul a").each(function() {
if (this.href == window.location.href)
$(.onhover).addClass("active");
})
try to implement with navbar nav class example below
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<img src="img" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img" alt="image">
</a>
</li>
</ul>
I'm currently working on a hybrid mobile app and after i changed my code for the new menu, I got some problems for iOS.
So here it's simple, on the emulator everything is fine, but on iOS, the menu is grey like the right side and when I press something on the menu, it close it directly !
I don't understand why it doesn't work because I don't have any problems on Android.
My code is simple :
<div id="menu" class="touch-menu-la">
<span class="mdl-layout-title" style="background-color: #1A237E">
<img class="logoMenu alignCenterImg" src="../img/logo.png">
</span>
<ul class="menu-items">
<li>
<a href="events.html">
<img src="../img/icons/events.png" class="imgMenuList"></img>Événements
</a>
</li>
<li>
<a href="happyHours.html">
<img src="../img/icons/happyHours.png" class="imgMenuList"></img>Happy Hours
</a>
</li>
<li>
<a href="bonsPlans.html">
<img src="../img/icons/bonPlan.png" class="imgMenuList"></img>Bons Plans
</a>
</li>
<li>
<a href="cocktails.html">
<img src="../img/icons/cocktails.png" class="imgMenuList"></img>Cocktails
</a>
</li>
<li>
<a href="games.html">
<img src="../img/icons/jeux.png" class="imgMenuList"></img>Jeux
</a>
</li>
<div class="tonight-drawer-separator"></div>
<li>
<a href="about.html">
<img src="../img/icons/info.png" class="imgMenuList"></img>À propos
</a>
</li>
</ul>
</div>
<script>
var TouchMenu = TouchMenuLA({
target: document.getElementById('menu')
});
document.getElementById('menu-open').addEventListener('click', function(){
TouchMenu.toggle();
});
</script>
Does someone got any idea ?
I'm really lost with this problem.
Thank's
http://jsfiddle.net/vr45Ln29/
I would like to loop through the imgs in the first ul, grab the src for each then loop through the second ul imgs and stick the src urls from the first list into the second.
To clarify, I just want the urls to be pulled from the imgs above and pasted into the src attr for each img below.
I simply can't figure it out. Any help would be appreciated.
i modified your fiddle, here is a version that works
var container = $('.slider-container'),
bigImgs = container.find('li img');
bigImgs.each(function() {
$("ul","div.slider-thumbnails").append("<li><img width='150' src='" +$(this).attr("src") + "'/></li>");
});
<div class="main-slider">
<ul class="slider-container">
<li>
<a href="#">
<img src="http://placehold.it/350x150" alt="one">
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/500x250" alt="two">
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/400x200" alt="three">
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/300x100" alt="four">
</a>
</li>
</ul>
</div>
<!-- Thumbnails -->
<div class="slider-thumbnails">
<ul>
</ul>
</div>
basically, you can just create the thumbnails dynamically at load.
On hover over images button appears
HTML
<div class="block-11 block-1">
<div class="carousel-wrapper" id="carousel-1">
<ul class="carousel clearfix">
<li>
<a href="img/img_8.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_8.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_9.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_9.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_8.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_8.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_9.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_9.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>
</ul>
<div class="semitransparentoverlay">
<input name="" type="button" value="Смотреть все фото" class="btn-1">
</div>
</div>
</div>
http://jsfiddle.net/1po0acv6/5/
Is there a way to do so that the images are downloaded to Lightbox when clicked on the button?
The images will not get "downloaded" to lightbox on button click, you will have to add the images in the innerHTML of 'ul class="carousel clearfix"', I mean the HTML of 'li' including its children 'a' and 'img'. And then reinitialize the lightbox.
Like this:
jQuery('#button').click(function(){
$('ul.carousel').html('<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>');
//now code lightbox reinitialization, according to the library you are using
});
Best of luck :)
How to place the blocks in such a way?
Link of the image -> http://upload.akusherstvo.ru/image664571.jpg
<ul class="list">
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
</ul>
I would make 4 separate CSS columns and fill each of them separately.