Привет, ребята! На одном из сайтов я использую согласно макету множество каруселек и слайдеров... Возникла сложность их все корректно использовать сразу... что-то где-то не работает... Помогите, пожалуйста, разобраться.
Ссылка:
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>
Спасибо за советы.