[Resolved] Flexslider Thumbnail Issue

[Author]

Posts

[mayurJ]

Tell us what you are trying to do?
===========================
I have implemented a flexslider in my content template (Visual Composer). The slider is successfully working for the page. However, the last thumbnail is getting cut off in this template. Here is the code I'm using:

PHP:

add_shortcode ('show_photo_slideshow', 'slideshow_gallery_generator');
function slideshow_gallery_generator () {
	//add_flexslider_slider_js();
	log_this("test");
	
	$str = do_shortcode('[types field="photo-slideshow" link="true" separator=","][/types]');
	$images = explode(",", $str);
	
	$str = do_shortcode('[types field="photo-slideshow" link="true" size="mt-thumbnail" resize="proportional" separator=","][/types]');
	$thumbs = explode(",", $str);
	
	if (count($images) > 0) {
		if (count($images)>1) {
			$return .= "<div id='slider' class='flexslider'><ul class='slides'>";
			foreach ($images as $img){
				$return .= '<li class="photo-gallery">'.$img.'</li>';
			}
			$return .= "</ul></div>";
			$return .= "<div id='carousel' class='flexslider'><ul class='slides'>";
			foreach ($thumbs as $thumb){
				$return .= '<li class="thumbs" style="margin-right:10px;">'.$thumb.'</li>';
			}
			$return .= "</ul></div>";
		} else {
			$return .= "<div id='slider' class='flexslider'><ul class='slides'>";
			foreach ($images as $img){
				$return .= '<li class="photo-gallery">'.$img.'</li>';
			}
			$return .= "</ul></div>";
		}
	}
	return $return;
}

Flex Slider CSS:

/* 
For the Profile Front-end
*/ 

.flex-control-nav, .flex-direction-nav {
  display:none;  
}
.flexslider {
    margin: 0px;
    border: 0px;
    border-radius:0px;
    -webkit-box-shadow: none;
    -o-box-shadow:0px;
    box-shadow:none;
    zoom: 1;
  	margin-bottom:10px;
}
.flexslider .slides>li, ul li.thummbs, ul li.photo-gallery {
  margin:0px;
  border:1px solid black;
}
.flexslider .slides>li.thumbs {
  margin-right:8px;
}
#slider li img {display:block; margin:0 auto;}

.flex-centered .slides {width: 100%!important; text-align: center;}
.flex-centered .slides li {display: inline-block!important; *display: inline!important; float: none!important;}

Flex Slider JS:

jQuery(window).load(function() {
  // The slider being synced must be initialized first
  jQuery('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 150,
    itemMargin: 5,
    asNavFor: '#slider'
  });
   
  jQuery('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    pauseOnHover: true,
    smoothHeight: true
  });
  
});

Is there any documentation that you are following?
===========================
Various forum posts

Is there a similar example that we can see?
===========================
It's function live here:
hidden link

What is the link to your site?
===========================
hidden link

[Christian Cox]

Hi, I'm not an expert with FlexSlider, but this seems to be the expected behavior. See the "Slider w/thumbnail slider" example on their site here:
hidden link

Resize the browser and you will see what I mean. It just depends on the width of the browser, the width of the main image, and the width of each thumbnail. Flexslider does not stretch or compress the size of the thumbnails to make them fit perfectly beneath the image.