html6

В использовании em есть свои плюсы, но есть и минусы. Адаптивная верстка может поломаться при зуме и изменениях базового размера шрифта . Информация здесь

1.Пример работает, это глюк jsbin, нужно нажать Run with js (обновить) и кликнуть на первую картинку, затем на кнопку next. 2. За коллбек спасибо, это хорошая наводка, буду пробовать! 3. Вижу лишнюю скобку в css, спасибо за совет про форматтер.

Есть много туториалов на тему, как перейти к следующему дочернему элементу или родителю. Но покопавшись неделю с интернете не могу найти ни одного, где бы говорилось, как перейти к первому дочернему элементу следующего списка li. Нужно задать программе условие, чтобы при при клике на последнюю картинку в списке li, она переходила к первой картинке следующего списка. Когда делаю через обычное условие (if element = element:last-child), то при клике на последнюю картинку, она сразу уводит к следующему списку. А мне нужно, чтобы она тоже отработала клик и только после этого программа переходила к следующему списку. Буду благодарна за любые идеи, мои уже все закончились) ДЕМО HTML <ul class="gallery"> <button class="prev">Prev</button><!--end btnLeft--> <button class="next">Next</button><!--end btnRight--> <li><div class="wrapper"> <span class="slide-title">Title</span><div class="dark"><img src="http://www5.mercedes-benz.com/media/image/master/mercedes-benz-dtm-oschersleben-race-master_1_380_211.jpg" alt="horse"><p>Mercedes</p><a href="http://www5.mercedes-benz.com/en/">Купить</a> </div> </div> <div class="wrapper"><div class="dark"><img src="http://www.nationalgeographic.com/dc/exposure/homepage/photoconfiguration/image/15042_photo_whdvenf37y72uer4efd6rx2wltvu2hmpyjyavf6lo6pvvsfavj3q_480x360.jpg" alt="cat"> <p>Mercedes</p><a href="http://www5.mercedes-benz.com/en/">Купить</a> </div> </div> <div class="wrapper"><div class="dark"><img src="http://www.nationalgeographic.com/dc/exposure/homepage/photoconfiguration/image/14946_photo_6slgabdfc5qowfkf2umhj3h4dgguoo4tfzqnozlypf2gukfxr27q_480x360.jpg"> <p>Mercedes</p><a href="http://www5.mercedes-benz.com/en/">Купить</a> </div> </div> </li> <li> <div class="wrapper"><div class="dark"> <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/685/overrides/eight-inch-two-week-old-caiman_68508_160x120.jpg"> <p>Mercedes</p><a href="http://www5.mercedes-benz.com/en/">Купить</a> </div> </div> <div class="wrapper"><div class="dark"> <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/493/cache/sillett-redwood-tree-450_49311_160x120.jpg"> <p>Mercedes</p><a href="http://www5.mercedes-benz.com/en/">Купить</a> </div> </div> <div class="wrapper"><div class="dark"> <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/234/overrides/tahoe-fluke-trail_23499_160x120.jpg"> <p>Mercedes</p><a href="http://www5.mercedes-benz.com/en/">Купить</a> </div> </div> </li> </ul>CSS .gallery {}display:block;position:relative;width:100%;height:100%;}.wrapper { width:200px; height:200px; display:block; position:relative;}.wrapper img { width:100px; height:100px;}button { width:50px; height:30px;}JQ jQuery(document).ready(function ($) { var clicked;$('.wrapper').click(function(){ clicked = $(this);clicked.find('img').fadeOut().trigger('click');});$('button.next').click(function(){ clicked.next().find('img').fadeOut().trigger('click'); }); });