I've hit a roadblock while trying to make changes to the slider located at THIS URL.

In the current setup, each thumbnail corresponds to one main display image. Clicking on a thumbnail displays a single image and then proceeds to slide to the next thumbnail along with its associated image in sequence.

However, I now aim to tweak this slider so that one thumbnail can be linked to multiple images - essentially establishing a one-to-many relationship (one thumbnail to several main display images).

For example, upon clicking on the "Bedroom thumbnail" (as depicted in the attached SCREENSHOT), it should exclusively showcase and slide through 5 or more images related to that specific thumbnail. The same principle applies to other thumbnails like "Bathroom," where clicking would reveal a series of images tied to that category.

The HTML code for my modified Thumbnail Section remains unchanged.

I have made adjustments within the Main Image section as follows...

<div id="lofslidecontent45" class="lof-slidecontent" style="width:670px;height:236px;">
<div class="preload"><div></div></div>
<div class="lof-main-outer" style="width:670px; height:236px;">
<ul class="lof-main-wapper">
    <li>
        <ul class=”lof-main-subwapper”>
                    <li>
 <img src="images/slider1.jpg" title="Newsflash 2" >           
                        <div class="lof-main-item-desc">
                        <h3>Innovation</h3>
<h2>lorem ipsum is simply dummy text</h2>
                        </div>
                    </li>
                     <li>
                         ..
                     </li>
         </ul>
     </li>
     <li>
        <ul class=”lof-main-subwapper”>
            <li>
                …
            </li>
            <li>
                …
            </li>
        </ul>
    </li>
</ul>
</div>
</div>

In the process of tweaking the slider's script code, I have introduced another 'wrappersub' class but face difficulty connecting a group of images to a single thumbnail - linking the ul of the main image section with the li elements from the thumbnail...

(function($) {
 $.fn.lofJSidernews = function( settings ) {
    return this.each(function() {
        // obtain an instance of the lofSiderNew.
        new  $.lofSidernews( this, settings ); 
    });
 }


$.lofSidernews = function( obj, settings ){
    this.settings = {
        direction           : '',
        mainItemSelector        : 'li',
                    mainInnerItemSelector   : 'li',
        navInnerSelector    : 'ul',
        navSelector         : 'li' ,
        navigatorEvent      : 'click',
                    subWrapperSelector      :'.lof-main-subwrapper',
        wapperSelector:     '.lof-main-wapper',
        interval        : 4000,
                    innerinterval           :20000,  
        auto                : true, // toggle automatic play of the slideshow
maxItemDisplay      : 5,
        startItem           : 0,
        navPosition         : 'vertical', 
        navigatorHeight     : 100,
        navigatorWidth      : 310,
        duration            : 600,
navItemsSelector    : '.lof-navigator li',
        navOuterSelector    : '.lof-navigator-outer' ,
        isPreloaded         : true,
        easing              : 'easeInOutQuad'
    }   

$.extend( this.settings, settings ||{} );   
    this.nextNo         = null;
    this.previousNo     = null;
    this.maxWidth  = this.settings.mainWidth || 600;
    this.wrapper = $( obj ).find( this.settings.wapperSelector );
            this.subSlides = this.wrapper.find( this.settings.mainItemSelector );
            this.subwrapper = this.subslides.find(this.settings.subWrapperSelector)
            this.slides = this.subwrapper.find(this.settings.mainInnerItemSelector)

if( !this.wrapper.length || !this.subslides.length ) return ;
if( !this.subwrapper.length || !this.slides.length ) return ;
if( this.settings.maxItemDisplay > this.slides.length ){
        this.settings.maxItemDisplay = this.slides.length;  
}
    this.currentNo      = isNaN(this.settings.startItem) )
|| this.settings.startItem > this.slides.length ? 0 : this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );  
    this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ) { 
        this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
        this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
        this.navigatorOuter.height( this.settings.navigatorHeight );
} else {
        this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );    

        this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
        this.navigatorOuter.width( this.settings.navigatorWidth );
    } 

this.navigratorStep = this.__getPositionMode( this.settings.navPosition );      
    this.directionMode = this.__getDirectionMode();  
if( this.settings.direction == 'opacity') {
this.subwrapper.addClass( 'lof-opacity' );
$(this.slides).css('opacity', 0).eq(this.currentNo).css('opacity', 1);
} else { 
        this.subwrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':(this.maxWidth) * this.slides.length});
    }
    if( this.settings.isPreloaded ) {
        this.preLoadImage( this.onComplete );
    } else {
        this.onComplete();
    }

 }

$.lofSidernews.fn = $.lofSidernews.prototype;
$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;

$.lofSidernews.fn.extend({

startUp:function(obj, subwrapper) {
	seft = this;

	this.navigatorItems.each( function(index, item ){
		$(item).click( function(){
			seft.jumping( index, true );
			seft.setNavActive( index, item );                   
		} );
		$(item).css({ 'height': seft.settings.navigatorHeight, 'width': seft.settings.navigatorWidth });
	})
	this.registerWheelHandler( this.navigatorOuter, this );
	this.setNavActive(this.currentNo );

	if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
		this.registerButtonsControl( 'click', this.settings.buttons, this );

	}
	if( this.settings.auto ) 
	this.play( this.settings.innerinterval, 'next', true );

	return this;
},
onComplete:function(){
	setTimeout( function(){ $('.preload').fadeOut(900); }, 400 );   
	this.startUp();
},
preLoadImage:function( callback ){
	var self = this;
	var images = this.subwrapper.find( 'img' );
var count = 0;
	images.each( function(index,image){ 
		if( !image.complete ){                
			image.onload =function(){
				count++;
				if( count >= images.length ){
					self.onComplete();
				}
			}
			image.onerror =function(){ 
				count++;
				if( count >= images.length ){
					self.onComplete();
				}   
			}
		}else {
			count++;
			if( count >= images.length ){
				self.onComplete();
			}   
		}
	} );
},
navigationAnimate:function(currentIndex) { 

	if (currentIndex <= this.settings.startItem 
	|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
		this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
		if (this.settings.startItem < 0) this.settings.startItem = 0;
		if (this.settings.startItem > this.slides.length-this.settings.maxItemDisplay) {
			this.settings.startItem = this.slides.length - this.settings.maxItemDisplay;
		}
	}       

Any assistance would be greatly appreciated.

Thank you.