Как грамотно использовать n-ое количество каруселек
Привет, ребята! На одном из сайтов я использую согласно макету множество каруселек и слайдеров... Возникла сложность их все корректно использовать сразу... что-то где-то не работает... Помогите, пожалуйста, разобраться.
Ссылка: http://tupinet.ru/goodwears/main2.html Подключенные скрипты: <!-- JS --> <script src="js/jquery.min.js"></script> <!--bootstrap--> <script src="js/bootstrap-modal.js"></script> <script src="js/bootstrap-carousel.js"></script> <script src='js/jquery.hoverIntent.minified.js'></script> <script src='js/jquery.dcmegamenu.1.3.2.js'></script> <!--slider thumbs--> <script src="js/jquery.tinycarousel.min.js"></script> <!--form input--> <script src="js/forms.js"></script> <!--left categories--> <script type="text/javascript"> $(document).ready(function() { // Store variables var accordion_head = $('.accordion > li > a'), accordion_body = $('.accordion li > .sub-menu'); // Click function accordion_head.on('click', function(event) { // Disable header links event.preventDefault(); // Show and hide the tabs on click if ($(this).attr('class') != 'active'){ accordion_body.slideUp('normal'); $(this).next().stop(true,true).slideToggle('normal'); accordion_head.removeClass('active'); $(this).addClass('active'); } // зажигаем свет у родитильской категории $("#clothing").click(function () { $(".cat_name1").addClass("expand"); }); }); });s </script> <!--items thumbs--> <script type="text/javascript"> $(document).ready(function(){ $('#slider_1 ,#slider_2,#slider_3,#slider_4,#slider_5,#slider_6,#slider_7,#slider_8,#slider_9,#slider_10').tinycarousel({ axis: 'y'}); $('.product-desc').css({'display':'none'}); $('.product-desc').click(function(i){ link = $(i.target).attr('src'); $(this).next().find("img").attr('src', link); }); }); </script> <script type="text/javascript"> $(document).ready(function($){ $('#mega-menu').dcMegaMenu({ rowItems: '3', speed: 'fast', effect: 'fade' }); }); </script> Проблемы: (пощелкайте пожалуйста на этой странице: http://tupinet.ru/goodwears/main2.html) 1) "Новинки" блок каруселька листается только в одну сторону, если попробовать нажать в другую после к примеру левой, то в URL появляется ссылка которая мешает прокрутить в другую сторону. Выше карусельки (большие картинки, бренды и популярные товары) работают вроде нормально. 2) http://clip2net.com/s/4SyKZb Первое проверяешь при загрузке страницу крутятся ли миниатюры, потом переходишь на следующий слайд всего блока и снова щелкаешь на эти стрелки миниатюр, ничего не грузится... вот скрипт, который использую: <script type="text/javascript"> $(document).ready(function(){ $('#slider_1 ,#slider_2,#slider_3,#slider_4,#slider_5,#slider_6,#slider_7,#slider_8,#slider_9,#slider_10').tinycarousel({ axis: 'y'}); $('.product-desc').css({'display':'none'}); $('.product-desc').click(function(i){ link = $(i.target).attr('src'); $(this).next().find("img").attr('src', link); }); }); </script> Спасибо за советы. |
Часовой пояс GMT +3, время: 06:05. |