I have encountered an issue while using FlexSlider 2 with the thumbnail slider. The problem is that the main image does not respond as expected. When I try to navigate using the next/prev buttons, it does not slide or fade to the next/prev image. Even clicking on one of the thumbnails does not change the main image. However, the prev/next buttons of the thumbnail slider are working fine. I have carefully checked my code and cannot pinpoint the exact issue. I did make some modifications to the flexslider.css file to remove border shadows, but even using the untouched flexslider.css did not resolve the problem. Here is a snippet of the code:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<link rel="stylesheet" href="css/default.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
directionNav: false,
slideshow: false,
touch: true,
itemWidth: 160,
itemMargin: 3,
asNavFor: '#slider'
});
$('#slider').flexslider({
start: function(slider) {
$('html').removeClass('no-js');
slider.removeClass('loading');
},
animation: "fade",
slideshow: false,
directionNav: false,
controlNav: true,
touch: true,
useCSS: false,
slideshowSpeed: 3000,
animationSpeed: 300,
sync: "#carousel"
});
});
</script>
<!-- Additional scripts for fullscreen functionality -->
</head>
<!-- Rest of the HTML code with sliders and buttons omitted here for brevity -->
</body>
</html>